- Tại đây
- Tại đây
Dưới đây chia sẻ một mẫu tùy biến tiện ích nhãn khá là đẹp mắt để các bạn có thể sử dụng cho blogspot của mình.
DEMO
CÀI ĐẶT
Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin>
/* Label */
.label-show{zoom:1}
ul .label-show {margin:0 auto;padding:0}
.label-show{list-style:none}
.label-show:before,.label-show:after{content:"";display:table}
.label-show:after{clear:both}
.label-show li{position:relative;float:left;margin:0 12px 8px 0;padding:0;}
.label-show li:after{content:"";position:absolute;top:50%;margin-top:-4px;right:-1px;width:5px;height:6px;opacity:.95;background:#333;border-radius:3px 0 0 3px}
.label-show a,.label-show span{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.label-show a{height:26px;color:#000;background:#f5f5f5;padding:3px 8px 5px;z-index:1;border-radius:3px 0 0 3px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);transition:.3s box-shadow ease;-webkit-transition:.3s box-shadow ease;text-shadow:0 0 0}
.label-show a:hover span{max-width:40px;padding:2px 8px}
.label-show a:hover {box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19);}
.label-show span{height:26px;position:absolute;top:0px;left:100%;z-index:2;overflow:hidden;max-width:0;opacity:.95;color:#fff;vertical-align:middle;background-color:#333;transition:all .3s ease-out;
padding:5px 0 3px 2px;border-radius:0 3px 3px 0;border:0.5px solid #333}Bước 2: Thêm tiện ích danh sách nhãn bài đăng (nếu template của bạn đã có tiện ích này thì bỏ qua) và tìm kiếm thẻ <ul> tại phần tiện ích nhãn(Label1 chẳng hạn) của phần HTML trong template của bạn và thay thành:<ul class='label-show'>Bước 3: Tiếp tục tìm kiếm đoạn mã bên dưới tại phần HTML trong mẫu của tiện ích Label1(có 2 đoạn như vậy).
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>Thay thành:
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/><span class='label-count' dir='ltr'><data:label.count/></span></a>
Quay ra blog xem thành quả nhé!
Thêm 1 tùy biến khác cho bạn lựa chọn.
DEMO
Bước 1: CSS
.tags{zoom:1}
.label-show:before,.tags:after{content:"";display:table}
.label-show:after{clear:both}
.label-show li{position:relative;float:left;margin:0 12px 8px 0}
.label-show li:active{margin-top:1px;margin-bottom:7px}
.label-show li:after{content:'';z-index:3;position:absolute;top:10px;right:-2px;width:5px;height:6px;opacity:.95;background:#56a3d5;border-radius:3px 0 0 3px}
.label-show a,.label-show span{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.label-show a{height:26px;font-size:13px;color:#000;border-radius:3px 0 0 3px;background:#f5f5f5;border:0.5px solid #fafafa;-webkit-box-shadow:0 0 3px rgba(0,0,0,.4);-moz-box-shadow:0 0 3px rgba(0,0,0,.4);box-shadow:0 0 3px rgba(0,0,0,.4);padding:3px 8px}
.label-show a:hover span{max-width:40px;padding:0 7px 0 6px}
.label-show span{position:absolute;top:0;left:100%;z-index:2;overflow:hidden;max-width:0;height:26px;line-height:23px;opacity:.95;color:#fff;text-shadow:0 -1px rgba(0,0,0,0.3);border:1px solid;border-radius:0 4px 4px 0;background:#56a3d5;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;border-color:#56a3d5;padding:0 0 0 2px}Bước 2 và bước 3 làm như hướng dẫn ở trên.