Thêm hiệu ứng cho nhãn trên blogger

Thông thường thì việc thiết kế nhãn mà sơ xài, không trang điễm cho Blogger blogspot của mình thêm phần bắt mắt, sẽ khó coi và không thu hút được độc giả vào ra với bài đăng của mình. Khanhnguyen' s blog cũng có một phong cách của Khanhnguyen' sblog, chắc hẳn bạn bè của Khanhnguyen 's blog cũng có một sự lực chọn cho chính mình.

Trong Source Code Css dưới đây, sẽ giúp các bạn phần nào về phong cách thể hiện đó đối với hiệu ứng dành cho nhãn (label) trên Blogger Blogspot.

Chuyện thiết kế theo mẫu chuẩn trên Blogger, rất đơn giản, chỉ thức hiện các bước sau:

Vào blogger>Layout>Add Widget

Đơn giản chỉ vậy, nhưng kết quả chỉ như hình trên:

Không đẹp phải không các bạn. Thế thì sao có được như hình dưới đây? Có thể bạn muốn có một màu sắc khác, chuyện đó cũng dễ dàng thôi.

1. Đăng nhập vào Blogger Bảng điều khiển sau đó đi đến Layout & nhấp vào Thêm một tiện ích (Widget)  tùy chọn và chọn Label.

2. Bạn phải Chọn tùy chọn đám mây (Cloud) từ trong Widget Label được chọn.

3. Bây giờ bấm Save & nút đi cho CSS .
4. Bây giờ hãy nhấp Template tùy chọn và sau đó nhấp vào Edit HTML nút.
5. Bây giờ bấm Ctrl + F nút trên bàn phím của bạn và tìm ]]></b:skin> tag.
6. Bây giờ Sao chép mã dưới đây và dán nó ở trên ]]></b:skin> tag.

.label-size{ padding: 3px; text-transform: uppercase; margin:0 2px 6px 0; border: solid 2px #061ED5; border-radius: 3px; float:left; text-decoration:none; font-size:14px; color:#000000; background: #000000 ; } .label-size:hover {background: #0faefd ; border:5px solid #000000; text-decoration: none; -o-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -o-transform: rotate(7deg); -moz-transform: rotate(7deg); -ms-transform: rotate(7deg); -webkit-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .label-size a { text-transform: uppercase; float:left; text-decoration: none; color:#0FAEFD; } .label-size a:hover { text-decoration: none; color:#000000;} 

Bạn có thể tùy chỉnh:
font-size:14px: Kích cở chữ
color:#000000: Màu chữ
background: #000000 : Màu nền
Bạn có thể Click chuột vào đây để xem vào bản Demo của Khanhnguyen' s blog

• DEMO

Chúc các bạn thành công.
Khanhnguyen' s Blog