Thêm hiệu ứng trượt đẹp mắt cho nhãn Blogspot

Lướt một vòng các blog, tình cờ mình gặp trang premium-stuff-guru- Họ hướng dẫn về cách làm đẹp tiện ích nhãn bài đăng. Mình thấy khá đẹp nên chia sẻ lại cho các bạn. Tuy nhiên sau khi đọc mình thấy có vẻ bài viết chia sẻ hơi phức tạp  nên mình tối ưu hóa về code css cho đơn giản hơn nhưng không phải vì thế mà sẽ bớt đẹp hơn đâu nhé. Nào hãy cùng thực hiện nào các bạn

Ảnh minh họa

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

.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='"widget-content " + data:display + "-label-widget-content"'>

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'>

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>

Chúc thành công.