Tùy biến label cloud với số đếm ẩn hiện cho Blogspot

Hôm nay mình tiếp tục giới thiệu tới các bạn một kiểu tùy biến label cloud mới, ở lần này ta sẽ làm cho số đếm ẩn hiện khi hover và thêm một chút hiệu ứng chuyển động cho nó.

Tùy biến label cloud với số đếm

#Thêm tiện ích Label

1. Đăng nhập Blogger

2. Bố cục > Thêm tiện ích > Nhãn (label)

3. Tùy chỉnh như hình dưới

4. Lưu lại

#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ước(trên) thẻ mà bạn mới tìm

/* khanh98.blogspot.com/2015/08/label-cloud-voi-so-dem.html */
.widget-content.cloud-label-widget-content {display:inline-block;width:100%;}
.widget-content.cloud-label-widget-content {display:inline-block;}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;padding:10px;}
.label-count {white-space:nowrap;display:inline-block;}
.Label li{position:relative;background:#fff;color:#444;padding:0;margin:0;text-align:left;width:100%;transition:all .3s ease-out}
.Label li:hover {background:#fff;color:#cf4d35;}
.Label li:before {content:"";position:absolute;width:0;height:100%;background:#4fafe9;transition:all .2s ease-in-out;}
.Label li:hover:before {width:100%;}
.Label li a{padding:0 0 0 20px;display:block;position:relative;line-height:42px;color:#787878;text-decoration:none;transition:all .3s ease-out}
.Label li a:hover {color:#fff;}
.Label li span{float:right;height:42px;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2}
.Label li:nth-child(1) span, .Label li:nth-child(1):before, .Label li:nth-child(7) span, .Label li:nth-child(7):before {background:#ca85ca;}
.Label li:nth-child(2) span, .Label li:nth-child(2):before, .Label li:nth-child(8) span, .Label li:nth-child(8):before {background:#e54e7e;}
.Label li:nth-child(3) span, .Label li:nth-child(3):before, .Label li:nth-child(9) span, .Label li:nth-child(9):before {background:#61c436;}
.Label li:nth-child(4) span, .Label li:nth-child(4):before, .Label li:nth-child(10) span, .Label li:nth-child(10):before {background:#f4b23f;}
.Label li:nth-child(5) span, .Label li:nth-child(5):before, .Label li:nth-child(11) span, .Label li:nth-child(11):before {background:#46c49c;}
.Label li:nth-child(6) span, .Label li:nth-child(6):before, .Label li:nth-child(12) span, .Label li:nth-child(12):before {background:#607ec7;}
.label-size{position:relative;display:block;float:left;margin:0 4px 4px 0;font-size:13px;transition:all 0.3s;}
.label-size a{text-decoration: none;background:#fff;display:inline-block;color:#444;padding:5px 8px;font-weight:400;border:1px solid #ccc;transition:all .3s}
.label-count{backface-visibility:hidden;opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-10px;right:-10px;background:#4fafe9;color:#fff;white-space:nowrap;padding:0;width:25px;height:25px;line-height:25px;border-radius:25px;text-align:center;z-index:1;transition:all .3s}
.label-size:hover .label-count{opacity:1;visibility:visible;right:-15px}
.label-size a:hover{color:#444;border-color:#4fafe9}

4. Lưu mẫu lại và kiểm tra kết quả