Chia sẻ CSS Popular Post cho blogspot

Chào các bạn, bài viết này mình sẽ chia sẻ cho các bạn đoạn CSS giúp làm đẹp widget Popular Posts của Blogspot.

Chia sẻ CSS Popular Post cho blogspot

Ở trước mỗi tiêu đề bài đăng sẽ có đánh số thứ tự, vị trí 1-2-3 sẽ có màu. Ở dạng Css này thì chúng ta sẽ không có ảnh thumb nhé!

Thực hiện: Các bạn thay thế CSS của Popular Post cũ thành đoạn CSS dưới đây:

#PopularPosts1 ul li:first-child:after{content:"1";color:#fff!important;background:#ff6262!important}
#PopularPosts1 ul li:first-child + li:after{content:"2";color:#fff!important;background:#55579e!important}
#PopularPosts1 ul li:first-child + li + li{background:#fff}
#PopularPosts1 ul li:first-child + li + li:after{content:"3";color:#fff!important;background:#FDB713!important}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li{background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li{background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#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;top:3px;text-align:center;left:1px;line-height:1em;font:300 20px "Roboto",sans-serif;padding:5px 12px;border-radius:50%;color:#888}
#PopularPosts1 ul li a{display:block;margin-left:45px}

Sau đó lưu template là xong. Ra trang chủ Blog xem kết quả. Một vài template sẽ có chỗ lêch lạc, vào canh chỉnh CSS cho phù hợp.

Chúc các bạn thành công!

Từ khóa chính: css popular post, bài viết phổ biến, bài viết ưa chuộng