Đánh Số Thứ Tự Cho Bài Đăng Phổ Biến Bằng CSS

Bài viết này mình sẽ hướng dẫn bạn đánh số thứ tự tự động cho widget Popular Post (Bài đăng phổ biến) của blogspot. Các bạn có thể xem demo tại widget "Xem Nhiều Trong Tuần" tại blog này của mình

Thêm tiện ích Popular Post

Trước hết bạn hãy add widget Popular Post vào blog sau đó thiết lập như hình bên dưới.

Cài đặt trong template

Sử dụng đoạn code bên dưới

/*--Đánh số thứ tự cho Popular post--*/
.popular-posts ul {
 padding-left: 0;
 counter-reset: popcount;
}
.popular-posts ul li:before {
 list-style-type: none;
 margin-right: 15px;
 padding: .3em .6em;
 counter-increment: popcount;
 content: counter(popcount);
 font-size: 16px;
 background: #292d30;
 color: #ffffff;
 border-radius: 0;
 position: relative;
 font-weight: bold;
 font-family: georgia;
 float: left;
 border: 2px solid #dddddd;
 box-shadow: 1px 2px 9px #666666;
}
.popular-posts ul li {
 border-bottom: 1px dashed #dddddd;
}
.popular-posts ul li:hover {
 border-bottom: 1px dashed #696969;
}
.popular-posts ul li a {
 text-decoration: none;
 color: #5a5f63;
}
.popular-posts ul li a:hover {
 text-decoration: none;
}