[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ủ Đề

• [Tips] - Tối ưu seo blogspot search labelSearch label hay còn gọi là trang nhãn trong blog, những người làm seo blogspot thì ít ai nghĩ đến việc seo trang này. ...
• [Tips] - Popup like box với chỉ dẫn đẹp cho blogspotLike box là tiện ích thiết yếu cho một blogspot nhằm quảng bá thương hiệu cho fanpage cũng như danh tiếng của mình, để ...
• Recent Post Widget For Blogspot chuyên nghiệpRecent post là widget trình diễn bài viết theo label tùy chỉnh của nhà thiết kế, nếu bạn có một label (nhãn) muốn nằm t ...
• [Tips] Làm sao để thêm bài viết liên quan cho blogspot Bài viết liên quan là gì? Bài viết liên quan hay còn gọi là Related Posts là những bài viết cùng chủ đề (cùng label) n ...
• [Tips] - Hướng dẫn tối ưu blogspot chuẩn PageSpeed InsightsPageSpeed Insights là công cụ check tối ưu cho blogspot và website, với công cụ này khi bạn check với website mà tầm 80 ...