Tạo CSS widget label cloud đẹp

Một tiện ích khá hay nhằm làm đẹp cho widget label cloud blogspot với CSS full color cho những bạn có sở thích làm đẹp template của mình.
Cách tạo làm đẹp cho widget label cloud củng khá đơn giản, thường thì mỗi bạn có cách CSS khác nhau cho template của mình, và ở bài viết này củng vậy mình sẻ hướng dẫn cho các bạn mới bắt đầu làm blogspot CSS cho widget label cloud.

• Đăng nhập vào tài khoản Blogger và chọn Bố cục
• Thêm tiện ích chọn Nhãn(Label) và bấm Lưu

Thêm đoạn CSS

• Chọn Mẫu >> Chỉnh sửa HTML >> Ctrl+F tìm thẻ ]]></b:skin> và thêm đoạn CSS bên dưới trước nó.

CSS widget label cloud blogspot /*widget label cloud*/
.cloud-label-widget-content {text-align: left;}
.label-size {background: #5498C9;display: block;float: left;margin: 0 3px 3px 0;color: #fff;font-family: Oswald, Arial, Sans-Serif;font-size: 11px;text-transform: uppercase;}
.label-size:nth-child(1) {background: #F53477;}
.label-size:nth-child(2) {background: #89C237;}
.label-size:nth-child(3) {background: #44CCF2;}
.label-size:nth-child(4) {background: #01ACE2;}
.label-size:nth-child(5) {background: #94368E;}
.label-size:nth-child(6) {background: #A51A5D;}
.label-size:nth-child(7) {background: #555;}
.label-size:nth-child(8) {background: #f2a261;}
.label-size:nth-child(9) {background: #00ff80;}
.label-size:nth-child(10) {background: #b8870b;}
.label-size:nth-child(11) {background: #99cc33;}
.label-size:nth-child(12) {background: #ffff00;}
.label-size:nth-child(13) {background: #40dece;}
.label-size:nth-child(14) {background: #ff6347;}
.label-size:nth-child(15) {background: #f0e68d;}
.label-size:nth-child(16) {background: #7fffd2;}
.label-size:nth-child(17) {background: #7a68ed;}
.label-size:nth-child(18) {background: #ff1491;}
.label-size:nth-child(19) {background: #698c23;}
.label-size:nth-child(20) {background: #00ff00;}
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 10px;
font-weight: bold;
}
.label-size:hover {
background: #222;
}
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;
}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #ff6bb5;}

Lưu lại và xem kết quả