Tạo widget Popular Posts nhiều màu cho blogspot

Demo

Chào các bạn!
Hiện nay nhiều blogger đang phàn nàn về bài đăng phổ biến (Popular posts) của template không được đẹp cho lắm! Cái này chúng ta hoàn toàn có thể tùy biến cho nó đẹp hơn chỉ bằng 1 đoạn CSS. Mình có tham khảo bài viết tại akswhithloud.com Sau đây mình hướng dẫn các bạn tạo một widget popular post nhiều màu bằng CSS cho blogspot.
Bước 1: Đăng nhập blogger
Bước 2: Chọn mẫu và chỉnh sửa HTML

Chỉnh sửa mẫu ở chế độ HTML

Bước 3: Tìm thẻ ]]></b:skin> hoặc </style>
Bước 4: Dán đoạn mã sau lên trước (trên) thẻ  ]]></b:skin> hoặc </style>

/* Popular Post keren warna-warni */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}.PopularPosts ul{list-style:none;font-size:15px;color:#fff;margin:0 !important;width:100% !important;font-weight:bold}.PopularPosts ul li img{display:block;transition:all 400ms ease-in-out;width:60px;height:60px;float:left;margin:0 15px 0 0;border:4px solid rgba(0,0,0,0.2)}.PopularPosts ul li img:hover{border:4px solid rgba(0,0,0,0.5);transition:all 400ms ease-in-out}.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px;height:70px;}.PopularPosts .item-title{text-overflow: ellipsis;overflow:hidden;height:64px}.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-size:15px !important;color:inherit;text-decoration:none}.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;font-size:35px !important;font-weight:700;color:rgba(0,0,0,0.2);top:40%;left:9px;}
.PopularPosts ul li{margin:0 !important;padding:10px 5px 10px 40px}
.PopularPosts ul li:nth-child(1){background-color:#5d93b2}.PopularPosts ul li:nth-child(2){background-color:#67b8b3}.PopularPosts ul li:nth-child(3){background-color:#67c27a}.PopularPosts ul li:nth-child(4){background-color:#ee9f7e}.PopularPosts ul li:nth-child(5){background-color:#ea6868}.PopularPosts ul li:nth-child(6){background-color:#b65757}.PopularPosts ul li:nth-child(7){background-color:#e9c462}.PopularPosts ul li:nth-child(8){background-color:#84d558}.PopularPosts ul li:nth-child(9){background-color:#4dd38c}.PopularPosts ul li:nth-child(10){background-color:#b44d7a}

Bước 5: Lưu template và thưởng thức!

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait