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

• Vì sao blogspot không nhận thumbnail khi share linkThumbnail là hình đại diện của một bài viết hay một trang web nó mang tính chất hiển thị nhằm mô tả cho bài viết hay mộ ...
• Tại sao cần phải thiết kế giao diện mobi cho blogspotGiao diện mobi cho blogspot nói chung là một giao diện khi xem blog trên mobi hay các thiết bị di động khác mà blog vẫn ...
• [Tips] - Làm sao để blogspot không bị lỗi hình ảnhLỗi hình ảnh (image) là lỗi thường gặp nhất hiện nay, hiện nay đối với nhà mạng VNPT đã chặn hình ảnh đối với blogspot, ...
• [Tips] - Lấy data và cách phòng tránh bị ăn cắp data blogspotChào các bạn, việc ăn cắp data blogspot hiện nay là vấn đề đâu đầu cho các blogger hiện nay, vì toàn bộ bài viết trên b ...
• Chuyển hướng link trong blogpsot (Redirect 301)Chuyển hướng link hay còn gọi là thủ thuật seo Redirect 301. Ứng dụng khi dùng Redirect 301 cho Seoer: Đó là khi muốn c ...