Tùy biến tiện ích nhãn đẹp cho blogspot

Tùy biến tiện ích nhãn đẹp cho blogspot
Tiện ích nhãn của blogger cung cấp về hình thức thì đơn điệu, rối mắt và chiếm nhiều không gian giao diện.Làm đẹp cho tiện ích nhãn có rất nhiều kiểu dáng khác nhau có thể xem
- 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.

Tùy biến tiện ích nhãn đẹp cho blogspot

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.
Tùy biến tiện ích nhãn đẹp cho blogspot

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.
Thủ thuật blogspot - Tdb Blogspot
Facebook Comments
Blogger Comments