Tạo widget Popular Post đẹp cho blogger

Tạo widget Popular Post đẹp cho blogger
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


Cùng tham gia bình luận bài viết này nhé!

Loading...