Tùy biến Label wiget style3

Trước đây, mình cũng đã giới thiệu với các bạn hai mẫu tùy biến label wiget. Hôm nay, mình sẽ giới thiệu với các bạn một kiểu tùy biến mới mà nó được sử dụng rất nhiều trên các blog hiện nay.

#Thêm tiện ích label wiget (Nhãn)

Nếu đã có sẵn tiện ích này rồi thì bạn có thể bỏ qua bước này 

1. Đăng nhập Blogger
2. > Bố cục > Mẫu > Thêm tiện ích > Nhãn (label)
3. > Save

#Thêm CSS

1. > Mẫu > Chỉnh sửa HTML
2. > Tìm thẻ ]]></b:skin>
3. > Dán code dưới vào trên thẻ vừa tìm được
.Label a{
background:#000;
padding:0 20px;
color:#fff!important;
height:32px;
font-size:14px; 
text-transform:uppercase;
text-decoration:none;
line-height:32px;
padding-left:20px;
float:left;
border:none !important;
margin-left:5px;
margin-top:5px;
-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;
}
.Label a:hover{
color:#000 !important;
background:#FF5848; }
Lưu ý:

  • Phần màu xanh là quy định màu nền của tiện ích
  • Phần màu đen là nền của từng Label
  • Phần màu đỏ quy định màu khi dê chuột(hover)

4. Save

Comments