Thủ thuật blogger / thủ thuật blogspot này sẽ hướng dẫn các bạn cách thêm nhiều màu khác nhau và số đếm trong Popular Post Widget của blogger. Điểm nổi bật của thủ thuật này là bạn không cần phải thêm bất kỳ JavaScript nặng hoặc bất thuộc tính nào khác, bạn chỉ cần thêm 1 đoạn CSS đơn giản. Ngoài ra, bạn có thể tùy chỉnh widget này với việc sử dụng trình thiết kế mẫu của blogger. Chúng ta hãy đi đến hướng dẫn.

>>Khung Comments - Thủ thuật đưa khung nhận xét lên đầu những nhận xét trong Blogger

>>Sitemap - Thủ thuật tạo Sitemap dạng bảng cho Blogger

>>Auto Readmore - Thủ thuật hiện bài viết ở trang chủ có ảnh cho Blogger

>>Chia cột bài viết - Thủ thuật chia danh sách bài viết 2 cột có ảnh cho Blogger

>>Rainbow PopularPosts - Thủ thuật bài viết phổ biến cầu vồng có đánh số cho Blogger

>>Popup - Thủ thuật tạo Popup cảnh báo khi rời khỏi trang web cho Blogger

>>Keywords - Thủ thuật tự động chèn từ khóa vào bài viết Blogger

>>Comments Google Plus - Thủ thuật chèn bình luận Google + vào Blogger

>>Page Navigation - Thủ thuật bài viết trang chủ và label tự tải khi cuộn chuột xuống.

>>Sidebar - Thủ thuật ẩn hiện Sidebar bằng Jquery cho Blogger

>>Comments - Thủ thuật chèn bình luận facebook vào Blogger

>>Popup - Thủ thuật tạo Popup hiện lên cảnh báo cho Blogger

>>Recent Comment - Thủ thuật bình luận mới nhất với ảnh thumbnail đẹp cho Blogger

>>Drop Menu - Thủ thuật tạo Drop Menu ngang xổ xuống nhiều cột có hình ảnh Blogger

Bước 1 » Thêm widget Popular Posts vào blogspot của bạn!

1.1- Đăng nhập vào Blogger / Blogspot

1.2- Vào mẫu (Templates)
1.3- Chọn Thêm Tiện ích (Add Widget)
1.4. Bấm chọn mục bài đăng phổ Biến (Popularposst):
1.5- Bấm chỉnh sửa tiện ích Popularposts và cài đặt:

• Chọn "hiển thị tối đa" 9 bài viết.
• Bỏ chọn hình ảnh thu nhỏ và đoạn trích.

1.6- Lưu tiện ích lại.
 

Bước 2 » Tùy biến widget Popular Posts của bạn! 
1- Đăng nhập vào blog
2- Chọn Mẫu (Template)
3- Chọn Chỉnh sử HTML. 
4- Tìm thẻ  ]]></b:skin>:(Mẹo: Bấm Ctrl+F để tìm). Và dán code bên dưới vào trước nó.

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

Sau đó Lưu mẫu lại và xem kết quả.!