Popular Posts Widget có số đếm

Tiện ích bài viết nổi bật rất quan trọng để giúp các độc giả theo dõi  các bài viết hay nhất tại blog của bạn. Để tạo sự chú ý và lôi cuốn hơn xin giới thiệu đến các bạn một giao diện mới cho tiện ích Popular Posts. Tiện ích này có số đếm và màu sắc cho từng bài viết theo số lượt truy cập của độc giả.

Demo Popular Posts Widget có số đếm

Nào cùng thực hiện thôi !

1.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 by Chinhtrucblog */
.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}

2. Lưu ý các bạn phải gỡ bỏ tất cả các đoạn css có dạng .Popular Posts có trong template của bạn đi để có kết quả như trên. Nếu bạn biết về CSS thì có thể tuỳ chỉnh lại để tạo thành mẫu bạn ưng ý nhất.

3. Lưu mẫu lại và tận hưởng thành quả. 

 ^_^