Label cloud widget cho Blogger (style 2)

Ở bài trước mình đã giới thiệu một style cho tiện ích Label dạng cloud. Bài này mình sẽ chia sẻ một style nữa của tiện ích này (các bạn xem hình trên).

Bước 1: Tại trang quản trị blog, các bạn vào Bố cục, tạo một tiện ích Nhãn (Label), tùy chỉnh các thông số và chọn chế độ hiển thị là Cloud.

Bước 2: Lưu tiện ích. Vào Mẫu -> Chỉnh sửa HTML, tìm dòng ]]></b:skin> và chèn trước nó đoạn code sau:

/* Label widget style 2 by kjmagic.blogspot.com */
.label-size{ 
margin:0; 
padding:0; 
position:relative; 
} 
.label-size a{ 
float:left; 
height:24px; 
line-height:24px; 
position:relative; 
font-size:12px; 
margin-bottom: 9px; 
margin-left:20px; 
padding:0 10px 0 12px; 
background:#0089e0; 
color:#fff; 
text-decoration:none; 
-moz-border-radius-bottomright:4px; 
-webkit-border-bottom-right-radius:4px; 
border-bottom-right-radius:4px; 
-moz-border-radius-topright:4px; 
-webkit-border-top-right-radius:4px; 
border-top-right-radius:4px; 
} 
.label-size a:before{ 
content:""; 
float:left; 
position:absolute; 
top:0; 
left:-12px; 
width:0; 
height:0; 
border-color:transparent #0089e0 transparent transparent; 
border-style:solid; 
border-width:12px 12px 12px 0;  
} 
.label-size a:after{ 
content:""; 
position:absolute; 
top:10px; 
left:0; 
float:left; 
width:4px; 
height:4px; 
-moz-border-radius:2px; 
-webkit-border-radius:2px; 
border-radius:2px; 
background:#fff; 
-moz-box-shadow:-1px -1px 2px #004977; 
-webkit-box-shadow:-1px -1px 2px #004977; 
box-shadow:-1px -1px 2px #004977; 
}  
.label-size a:hover{background:#555;} 
.label-size a:hover:before{border-color:transparent #555 
transparent transparent;}

Bây giờ lưu lại và xem kết quả. Chúc các bạn thành công !