Tạo Popular Posts Widget có số đếm đẹp cho blogger

Tiếp nối bài viết về Popular Posts Widget hôm qua thì hôm nay mình xin giới thiệu đến các bạn một style mới cho tiện ích này, nó có số đếm cho từng bài viết từ cao đến thấp và màu sắc của nó thay đổi theo độ cao như bên cạnh đây. Các bạn thực hiện như bên dưới để thực hiện nhé!

Thêm một tiện ích Popular Posts

Đầu tiên từ giao diện quản lí blog đi vào Bố cục → Thêm Tiện ích → Bài đăng phổ biến. Thêm các widget ở vị trí mong muốn và nhấn Lưu. Nhớ chọn các mục hình ảnh thu nhỏ và đoạn trích nhé.

Thêm CSS

Vào chỉnh sửa HTML và thêm vào trước thẻ đóng ]]></b:skin>đoạn CSS bên dưới:

/* Popular Posts Widget */
.PopularPosts ul,.PopularPosts li,.PopularPosts li a{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:black;counter-reset:num}
.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative;}
.item-thumbnail img{float:left;margin:0 10px 0 0}.PopularPosts a{color:#fff!important}.PopularPosts a:hover{color:#222!important}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a,
.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
.PopularPosts .item-snippet {font-size: 11px;color: #101010;overflow: hidden;text-align: justify;}
.PopularPosts ul li:nth-child(1){background-color:#f1c40f}
.PopularPosts ul li:nth-child(2){background-color:#f39c12}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71}
.PopularPosts ul li:nth-child(4){background-color:#27ae60}
.PopularPosts ul li:nth-child(5){background-color:#e67e22}
.PopularPosts ul li:nth-child(6){background-color:#d35400}
.PopularPosts ul li:nth-child(7){background-color:#3498db}
.PopularPosts ul li:nth-child(8){background-color:#2980b9}
.PopularPosts ul li:nth-child(9){background-color:#ea6153}
.PopularPosts ul li:nth-child(10){background-color:#c0392b}

Cũng lưu ý rằng bạn phải gỡ bỏ tất cả các mã CSS Popular Posts trước đây (nếu có) trước khi thêm một hoặc kết quả này sẽ là sự kết hợp của cả hai.

Sau khi thêm xong các bạn hãy Lưu mẫu lại. Bây giờ ra trang chủ blog của mình và xem sự thay đổi nhé!