Style Label Widget - Phần 1

Hôm nay mình hơi mệt nên chỉ nghiên cứu một thủ thuật nhỏ đó là làm đẹp cho tiện ích Danh sách Nhãn bài đăng.

Với thủ thuật này mình chỉ sử dụng css nhưng vẫn đảm bảo tiêu chí đó là đẹp lại rất đơn giản. Mong rằng bạn sẽ thích mẫu này!

Demo

Bước 1: Bạn vào phần Bố cục → Thêm Tiện ích Danh sách Nhãn bài đăng và tùy chỉnh như sau

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

- Với LIGHT style

#Label1 h2{font-family:Arial;background:#12a6f3;color:#fff;border-bottom:1px solid #12a6f3;text-shadow:none} #Label1{font:14px Arial;padding:0;margin:0;text-shadow:none} #Label1 li{background:#fff;position:relative;border-bottom:1px solid #12a6f3;border-top:1px solid #fff;padding:0} #Label1 ul{list-style:none;padding:0;margin:0} #Label1 li a{background:url(https://lh3.googleusercontent.com/-gvPSBLnkOkw/UQGAEBvhqrI/AAAAAAAABuc/2U3SEkVeuIs/s10/bullet-icon.png) no-repeat 5px 11px;display:block;min-height:28px;line-height:28px;margin:0;padding:0 5px 0 20px;text-decoration:none;color:#12a6f3;font-size:14px;border-right:4px solid #12a6f3;cursor:pointer;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out} #Label1 li a:hover{border-right-color:#fff;text-decoration:none;color:#fff;background:#12a6f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQTKUF1FMTX7EIvaMjKEDzqM2NQOe9nBSSbd5cPgrlaIr9XxJJD-k09fVg8O-mXqI-UvvA8Q55YfIgqGBTIUwgTwhlkZlrmOGXRnXkeNfABNEgO4fXX4PMx5jyGCzun4bxmp0leq2IirxH/s1600/bullet.png) no-repeat 5px 11px;}

- Với DARK style

#Label1 h2{font-family:Arial;background:#222;color:#fff;border-top:1px solid #444;border-bottom:1px solid #000;text-shadow:none} #Label1{font:14px Arial;padding:0;margin:0;text-shadow:none;} #Label1 li{background:#333;position:relative;border-bottom:1px solid #000;border-top:1px solid #444;padding:0} #Label1 ul{list-style:none;padding:0;margin:0} #Label1 li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQTKUF1FMTX7EIvaMjKEDzqM2NQOe9nBSSbd5cPgrlaIr9XxJJD-k09fVg8O-mXqI-UvvA8Q55YfIgqGBTIUwgTwhlkZlrmOGXRnXkeNfABNEgO4fXX4PMx5jyGCzun4bxmp0leq2IirxH/s1600/bullet.png) no-repeat 5px 11px;display:block;min-height:28px;line-height:28px;margin:0;padding:0 5px 0 20px;text-decoration:none;color:#fff;font-size:14px;border-right:4px solid #111;cursor:pointer;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out} #Label1 li a:hover{border-right-color:#444;text-decoration:none;color:#ddd;background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQTKUF1FMTX7EIvaMjKEDzqM2NQOe9nBSSbd5cPgrlaIr9XxJJD-k09fVg8O-mXqI-UvvA8Q55YfIgqGBTIUwgTwhlkZlrmOGXRnXkeNfABNEgO4fXX4PMx5jyGCzun4bxmp0leq2IirxH/s1600/bullet.png) no-repeat 5px 11px;}

Ok saver lại template và tận hưởng!