Style Label Widget - Phần 2

Tiếp tục đề tài về làm đẹp tiện ích nhãn bài đăng, hôm nay mình sẽ giới thiệu đến bạn một style khá đẹp, gọn gàng và bắt mắt - đang được mình sử dụng. Style này được chia sẻ ở trang http://premium-stuff-guru.blogspot.com và được mình đơn giản hóa rất nhiều về code css với tiêu chí đơn giản nhưng vẫn đẹp.

Bắt đầu thủ thuật.

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

.tags{zoom:1}

.tags:before,.tags:after{content:"";display:table}

.tags:after{clear:both}

.tags li{position:relative;float:left;margin:0 12px 8px 0}

.tags li:active{margin-top:1px;margin-bottom:7px}

.tags li:after{content:'';z-index:3;position:absolute;top:10px;right:-2px;width:5px;height:6px;opacity:.95;background:#da9c9c;border-radius:3px 0 0 3px}

.tags a,.tags span{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

.tags a{height:26px;font-size:13px;color:#000;border-radius:5px 0 0 5px;background:#efece9;border:1px 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}

.tags a:hover span{max-width:40px;padding:0 7px 0 6px}

.tags 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:#da9c9c;-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:#da9c9c;padding:0 0 0 2px}

Hãy chỉnh sửa màu sắc phù hợp với bạn.

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 đoạn code sau trong template của bạn (trong chế độ Mở rộng Mẫu Tiện ích)

 <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

Một khi tìm thấy đoạn mã này chỉ cần nhìn xuống 2 dòng bạn có thể thấy <ul> và sửa thành <ul class='tags'> như hình dưới đây

Bước 3: Tiếp tục tìm kiếm đoạn mã (đầu tiên)

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

và sửa 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>

Thủ thuật hoàn thành! Lưu lại template và tận hưởng.