Thiết kế Popular Posts (thống kê bài viết phổ biến) cho blogspot

Tiện ích Popular Posts (bài đăng phổ biến) là một tiện ích rất quan trọng trong blogger. Khi bạn muốn hiển thị thống kê bài đăng được đọc, được xem nhiều nhất trong tuần, tháng, mọi lúc thì bạn sử dụng Popular Posts. Tùy chỉnh của blogger cho phép bạn lựa chọn hiển thị hình ảnh thu nhỏ, hiển thị tiêu đề + nội dung miêu tả ngắn cho bài viết đó.
Tuy nhiên, làm thế nào để có một thống kê bài viết được xem nhiều nổi bật + đẹp mắt thì các bạn có thể chỉnh sửa, thiết kế tùy chỉnh theo ý muốn của các bạn.
Ở đây mình sẽ giới thiệu tới các bạn việc thêm Widget Popular Posts + chỉnh sửa, thiết kế nó. Trong bước chỉnh sửa và thiết kế mình sẽ làm trên 1 site ví dụ.
1. Thêm tiện ích (Widget) thống kê bài được xem nhiều theo tuần, tháng, mọi lúc (Popular Posts)
- Đăng nhập vảng bảng quản trị blogger -> lựa chọn Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> Bài đăng phổ biến (Popular Posts)

Tiếp theo các bạn có những lựa chọn như: thống kê bài đăng được xem nhiều trong 7 ngày, trong 30 ngày, hay trong tất cả thời gian.
Ở dưới là tùy chỉnh hiển thị của những bài đăng đó như: Hiển thị hình ảnh, hiển thị mô tả ngắn của bài đăng.
2. Thiết kế hiển thị thống kê theo ý muốn.
Trong mẫu (Template) -> Tùy chỉnh HTML (Edit HTML) đoạn code có dạng .popular chính là các thuộc tính CSS của Popular Posts. Như vậy việc tùy chỉnh sao cho đẹp mắt của Popular Posts hoàn toàn phụ thuộc vào những đoạn này.
Mình ví dụ 1 Mẫu cụ thể: DEMO
Code CSS của nó là:

.popular-posts ul {list-style-type: none; margin: 0; padding: 0; }
.popular-posts ul li {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimJdVTN88bt04hN0s_golaVtsV8rpYcF0VrH7-okpYEOTmAsyBW0OeC4lOEMcijhTHAyZgscuOjaaZ1pZwAKXCR1OH1VsEmau-IY4lg2jdkE4AItzKNoixyj8DuQZYcHiDdfZ9YeWhZafe/s14/hoa_xoay.gif) no-repeat 0 10px; border-bottom:1px solid #ded2ae;border-top:1px solid #fbfbfb; clear: both; list-style: none; }
.popular-posts ul li:hover {background-color: #f7f7f7; }
.popular-posts .item-content { padding: 5px; }
.popular-posts .item-title {height: 50px; }
.popular-posts .item-title a {color: #000; font-family: Arial; font-size: 12px; font-weight: bold;text-shadow:1px 1px #fff; }
.popular-posts .item-title a:hover {color: #bb3914; text-decoration: underline;}
.popular-posts .item-thumbnail { float: left; margin: 0 5px 0 0;}
.popular-posts a {padding-left: 15px;}
.popular-posts img {height: 50px; width: 50px;}

Ở Demo mình đã không để hiển thị hình ảnh bài viết.
Các bạn có thể thay đổi các thuộc tính như màu sắc, độ căn (px)... để phù hợp.
--------------------------
Nếu tham khảo thấy 1 blog nào đó có thống kê đẹp các bạn muốn thì hãy liên hệ với mình yêu cầu bài viết.
--------------
chúc các bạn vui vẻ 1