Tạo CSS widget label cloud đẹp cho blogspot

By Unknown

Thứ Bảy, 30 tháng 8, 2014

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.

Tạo CSS widget label cloud đẹp cho blogspot

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.
Bước 1: Đăng nhập vào tài khoản Blogger.com
Bước 2: Chọn Bố cục
Bước 3: Thêm tiện ích chọn Nhãn(Label) và bấm Lưu

Bước 4: 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;
}

Bước 5: Lưu lại và xem kết quả
Chúc bạn bạn thành công !

Tag : Chia sẻ, CSS