Bài viết phổ biến nhiều màu sắc đẹp cho Blogger

Demo :

+ Hướng dẫn :

Bước 1: Thêm đoạn code sau vào trên thẻ đóng ]]></b:skin 

/* Widget Popularposts*/ .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{ background:#7f8c8d; color:#ddd!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 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; } .PopularPosts a:hover{ background:#7f8c8d; color:#ddd!important

Bước 2 : Chỉnh sửa phù hợp cho Blog của bạn và lưu lại

Sưu tầm Blog Tuấn Phan