CHIA SẺ CSS POPULAR POSTS CHO BLOGSPOT XẾP THEO SỐ THỨ TỰ TUYỆT ĐẸP

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. Trước mỗi tiêu đề bài viết sẽ đánh dấu một số. Để rõ hơn thì xem demo ảnh bên dưới nhé!

CHIA SẺ CSS POPULAR POSTS CHO BLOGSPOT XẾP THEO SỐ THỨ TỰ TUYỆT ĐẸP

Các bước thực hiện

Bước 1:Đăng nhập Blogger  Mẫu  Chỉnh sửa HTML.
Bước 2:Chèn đoạn CSS dưới đây vào trước thẻ ]]></b:skin> trong template.
#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}
Bước 3:Vào trang Bố cục,bấm Chỉnh sửa widget Bài đăng phổ biến (Popular Posts) và cài đặt như sau:(bấm vào ảnh để xem kích thước lớn)
Bước 4:Lưu template.
Lưu ý:Phải xóa hết những CSS của #PopularPosts1 trước đó (nếu có).


Công Cụ TEST Thử CODE JS CSS HTML Trước Khi Coppy

Bài Viết Cùng Chuyên Mục

Comment - Bình Luận

3 Bình Luận

Tuyệt Vời , Cảm ơn bác nhé <3

Cảm ơn Bạn ! Nhớ Theo Dõi blog của mình nhé

Hữu ích !


Biểu Tượng Cảm XúcBiểu Tượng Cảm Xúc