[Tips] - Mẫu PopularPosts đẹp mà bạn nên dùng

PopularPosts là bài đăng phổ biến là những bài viết được xem nhiều nhất thường được hiển thị trên sidebar của blogspot, thay vì mặc định của nó không được đẹp thì chúng ta có thể dùng css làm cho nó trở nên đẹp và chuyên nghiệp hơn cho blogspot.

Hôm nay Khám Phá Blog's chia sẽ một mẫu PopularPosts cực đẹp mà tôi nghĩ mà bạn nên dùng, đánh số thứ tự từ 1 đến 10 khá chuyên nghiệp.

XEM DEMO

Cách sửa widget PopularPosts cho blogspot

1. Cấu hình PopularPosts

Đầu tiên bạn cần vào phần Bố cục > Thêm tiện ích bài đăng phổ biến và cấu hình như sau 

Sau đó bấm lưu tiện ích lại và tiến hành bước 2

2. Thêm css làm đẹp PopularPosts

Để thêm css thì các bạn vào phần Mẫu (templates) > Chỉnh sửa HTML và tìm đến thẻ ]]></b:skin> và thêm đoạn code sau trên thẻ này

.PopularPosts ul,.PopularPosts li,.PopularPosts li a{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}.PopularPosts ul{margin:0;list-style:none;color:black;counter-reset:num}.PopularPosts ul li{background-color:#eee;margin-bottom:3px;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}.item-thumbnail img{float:left;margin:0 10px 0 0}.PopularPosts a{color:#fff!important}.PopularPosts a:hover{color:#ccc!important}.PopularPosts ul li:hover{background:#3498DB!important}.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:300;font:normal normal 14px 'Roboto Condensed',sans-serif;color:inherit;text-decoration:none}.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#3a5795;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}.PopularPosts .item-snippet{font-size:11px;color:#101010;overflow:hidden;text-align:justify}.PopularPosts ul li{width:100%}.PopularPosts ul li:nth-child(1){background-color:#4DAEF6}.PopularPosts ul li:nth-child(2){background-color:#4DAEF6}.PopularPosts ul li:nth-child(3){background-color:#4DAEF6}.PopularPosts ul li:nth-child(4){background-color:#4DAEF6}.PopularPosts ul li:nth-child(5){background-color:#4DAEF6}.PopularPosts ul li:nth-child(6){background-color:#4DAEF6}.PopularPosts ul li:nth-child(7){background-color:#4DAEF6}.PopularPosts ul li:nth-child(8){background-color:#4DAEF6}.PopularPosts ul li:nth-child(9){background-color:#4DAEF6}.PopularPosts ul li:nth-child(10){background-color:#4DAEF6}a{color:#4277b9;text-decoration:none}a:hover{color:#333}pp{margin:0;padding:0}ol,ul{margin:0;padding:0}li{list-style-type:none}.site-inner,.wrap{margin:0 auto;max-width:1125px} Sau đó lưu mẫu lại và quay lại trang chủ nơi mà bạn đã đặt widget PopularPosts kiểm tra thành qủa nhé. Chúc các bạn thành công.

Bài Viết Cùng Chủ Đề