Cách đánh số thứ tự cho Popular Post Blogger

Cách đánh số thứ tự bài xem nhiều nhất từ 1 đến 10.

Không giống như các style khác, popular post thật không dễ để tùy biến với những bạn không thạo. Nhất là bạn không thể đánh style với kiểu decimal xấu xí.
Trong bài viết này mình sẽ hướng dẫn bạn cách để đánh thứ tự bài viết xem nhiều nhất trên blogger.

Đầu tiên mời bạn xem demo :

View Demo

Cách đánh số thứ tự như ở DEMO

Mở chế độ chỉnh sửa HTML. Bạn thêm code sau trước ]]></b:skin>

Bạn vào Dashbroad -> Mẫu -> Chỉnh sửa HTML

Thêm đoạn code sau :

#PopularPosts{width:100%!important;margin:0 auto!important;padding:5px 0 !important;}
.popular-posts ol{list-style-type:decimal !important;}
.widget-content popular-posts ul{list-style-type:decimal !important;}
#PopularPosts1 .widget-content ul{list-style-type:decimal !important;}
.PopularPosts .widget-content ul{width:100%;list-style-type:decimal !important;margin:0;padding-left:30px;padding-top:13px; color:black}
#PopularPosts1 ul li:first-child:before{content:"1."; color: #76A3E0; font-weight:bold; font-size:18px}
#PopularPosts1 ul li:first-child+li:before{content:"2."; color: #76A3E0; font-weight:bold; font-size:18px}
#PopularPosts1 ul li:first-child+li+li:before{content:"3."; color: #76A3E0; font-weight:bold; font-size:18px}
#PopularPosts1 ul li:first-child+li+li+li:before{content:"4."; color: #76A3E0; font-weight:bold; font-size:18px}
#PopularPosts1 ul li:first-child+li+li+li+li:before{content:"5."; color: #76A3E0; font-weight:bold; font-size:18px}
#PopularPosts1 ul li:first-child+li+li+li+li+li:before{content:"6."; color: #76A3E0; font-weight:bold; font-size:18px}
#PopularPosts1 ul li:first-child+li+li+li+li+li+li:before{content:"7."; color: #76A3E0; font-weight:bold; font-size:18px}
#PopularPosts1 ul li:first-child+li+li+li+li+li+li+li:before{content:"8."; color: #76A3E0; font-weight:bold; font-size:18px}
#PopularPosts1 ul li:first-child+li+li+li+li+li+li+li+li:before{content:"9."; color: #76A3E0; font-weight:bold; font-size:18px}
#PopularPosts1 ul li:first-child+li+li+li+li+li+li+li+li+li:before{content:"10."; color: #76A3E0; font-weight:bold; font-size:18px}
.PopularPosts .widget-content li{width:100%;height:auto;overflow:hidden!important;list-style:none!important;text-indent:0;margin:0 5px!important;}
.popularposts-img{margin:2px!important;padding:3px!important;}

Lưu ý : Bạn cần để chế độ không ảnh nhé (no thumbnail)

Ok. Vậy là đã xong. Mọi người có thể tùy chỉnh lại màu, kích thước, font cho phù hợp.


Ghi lại nguồn erhay khi bạn phát hành lại thông tin từ trang này.