Popular Posts xếp hạng dạng số cho Blogspot

Sau đây mình sẽ giới thiệu một kiểu CSS Popular Posts xếp hạng dạng số cho Blog nhạc hoặc bạn nào muốn có số đếm cho Popular Posts (Bài viết nổi bật).

Bước 1: Vào Template > Mẫu > Chỉnh sửa HTML

Bước 2: Tìm kiếm (Ctrl + F) từ sau:

</b:skin>

Và thêm CSS sau vào trước nó:

/* #PopularPosts xếp hạng
---------------------------------------------*/
#PopularPosts1 a:hover, #PopularPosts2 a:hover {color: #FF009C;text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);}
#PopularPosts1 ul{list-style-type:none;float:left;width:100%}
#PopularPosts1 ul li{position:relative;padding:10px;float:left;overflow:hidden;width:95%}
#PopularPosts1 ul li:first-child{}
#PopularPosts1 ul li:first-child a{float:left;margin-left:0!important;padding-left:10px}
#PopularPosts1 ul li:first-child:after{content:"1.";color:chocolate}
#PopularPosts1 ul li:first-child + li{}
#PopularPosts1 ul li:first-child + li:after{content:"2.";color:greenyellow}
#PopularPosts1 ul li:first-child + li + li{}
#PopularPosts1 ul li:first-child + li + li:after{content:"3.";color:cornflowerblue}
#PopularPosts1 ul li:first-child + li + li + li{}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4.";color:darkgrey}
#PopularPosts1 ul li:first-child + li + li + li + li{}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5.";color:darkgrey}
#PopularPosts1 ul li:first-child + li + li + li + li + li{}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6.";ccolor:darkgrey}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li{}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7.";color:darkgrey}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li{}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8.";color:darkgrey}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li{}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9.";color:darkgrey}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li{}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10.";color:darkgrey}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li:after{position:absolute;left:2px;top:10px;float:left;margin:0;text-align:center;width:15px;height:20px;line-height:20px;font-weight:bold}
#PopularPosts1 ul li:first-child + li img,#PopularPosts1 ul li:first-child + li + li img,#PopularPosts1 ul li:first-child + li + li + li img,#PopularPosts1 ul li:first-child + li + li + li + li img,#PopularPosts1 ul li:first-child + li + li + li + li + li img,#PopularPosts1 ul li:first-child + li + li + li + li + li + li img,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li img,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li img,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li img{display:none}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;margin-left:10px;background:transparent;padding:0;width:65px;height:65px;border:1px solid #eee}
#PopularPosts1 ul li a{font-weight:normal;padding-left:10px}
#PopularPosts1 ul li a:hover{text-decoration:none}

Bước 3: Lưu template và xem kết quả.

Jakub BB