Nguyễn Lương Duy Blog: Tạo widget Popular Post đẹp cho blogger

Ủng hộ mình bằng cách bấm vào Quảng Cáo để giúp mình phát triển hơn nhé!

Hình Ảnh Minh Hoạ

Cách làm rất đơn giản, chỉ cần thêm CSS vào HTML và không cần bất cứ các công cụ hỗ trợ gì cả. Không nói nhiều nữa, chúng bắt đầu làm nào:
Bước 1: Truy cập Chủ đề ▶ Chỉnh sửa HTML
Bước 2: Tìm thẻ ]]></b:skin> và dán CSS bên dưới vào phía trước nó.

#PopularPosts1 ul li:first-child:after{content:"1";color:#ff6262!important;border:2px solid!important}
#PopularPosts1 ul li:first-child + li:after{content:"2";color:#629e55!important;border:2px solid!important}
#PopularPosts1 ul li:first-child + li + li{background:#fff}
#PopularPosts1 ul li:first-child + li + li:after{content:"3";color:#f99fa7!important;border:2px solid!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:8px;text-align:center;line-height:1em;font:300 20px "Roboto",sans-serif;padding:5px 12px;border-radius:50%;color:#888;border:2px solid #eee}

Bước 3: Lưu mẫu lại và kiểm tra.

Chúc các bạn thành công!
- Theo: BacSiWindows