[Tips] - Tạo số đếm cho Popular Posts / Bài viết phổ biến trong Blogspot Blogger

Có nhiều bạn vừa hỏi Terocket làm sao để Tạo số đếm cho Popular Posts / Bài viết phổ biến trong Blogspot Blogger? Việc tạo số đếm này thực ra rất đơn giản, nên hôm nay Terocket sẽ hướng dẫn cho các bạn thắc mắc và các bạn khác nếu có yêu cầu thì cũng sử dụng được.

Một mẫu tạo số đếm cực kỳ đẹp mắt dành cho tất cả mọi người!

Cách thực hiện thủ thuật blog Tạo số đếm cho Popular Posts / Bài viết phổ biến trong Blogspot Blogger này rất đơn giản, hoàn toàn sử dụng CSS, không sử dụng Javascript nên các bạn hoàn toàn yên tâm về tốc độ tải, cũng như độ thân thiện với SEO nhé. Giờ thì cùng Terocket thực hiện thủ thuật Tạo số đếm cho Popular Posts / Bài viết phổ biến trong Blogspot Blogger này nào.

Đầu tiên bạn cần tạo một widget Popular Posts / Bài viết phổ biến cho blog của mình

Cách đơn giản, đầu tiên các bạn vào Blog Title → Layout → Add Widget → Popular Posts và thêm tiện ích này.

Chèn CSS sau vào HTML của blog website bạn

Đầu tiên các bạn vào Blog Title → Template → Edit HTML. Nhấn tổ hợp phím Ctrl + F và tìm kiếm ]]></b:skin>. Sau đó dán đoạn mã code sau lên trên ]]></b:skin> và Lưu mẫu lại.

.popular-posts ul li a {
    background: none repeat scroll 0 0 #222222;
    color: #FFFFFF;
    display: block;
    margin: 10px 0;
    padding: 25px 15px 30px;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
 width: 85%;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #2DB3E9;
    color: #FFFFFF;
    font-weight: 700;
    height: 2em;
    line-height: 2em;
    margin-left: 88%;
    padding: 4px;
    position: absolute;
    text-align: center;
    width: 2em;
    transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.3s ease-in-out 0s;
}
.popular-posts ul li a:hover {
    opacity: 0.8;
}
.popular-posts ul li a:hover:before {
    border-left-color: #CCCCCC;
    left: -1px;
     -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {
    content: "10";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {
    content: "9";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {
    content: "8";
}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before {
    content: "7";
}
.popular-posts ul li:first-child + li + li + li + li + li a:before {
    content: "6";
}
.popular-posts ul li:first-child + li + li + li + li a:before {
    content: "5";
}
.popular-posts ul li:first-child + li + li + li a:before {
    content: "4";
}
.popular-posts ul li:first-child + li + li a:before {
    content: "3";
}
.popular-posts ul li:first-child + li a:before {
    content: "2";
}
.popular-posts ul li:first-child a:before {
    content: "1";
}
.item-snippet {
    display: none;
}
.PopularPosts .item-thumbnail {
    display: none;
}

Vậy là đã xong thủ thuật blog Tạo số đếm cho Popular Posts / Bài viết phổ biến trong Blogspot Blogger mà Terocket vừa chia sẻ. Đây là thủ thuật đơn giản nhưng tạo được nét thiện cảm đến người dùng blog, tạo sự chuyên nghiệp trong sự thể hiện với người dùng. Chúc các bạn luôn thành công với thủ thuật blog này của Terocket nhé.

Nếu bạn nào đã làm được rồi thì share và khoe thành quả đến bạn bè ở dưới đây nha, còn bạn nào chưa thực hiện được thủ thuật Tạo số đếm cho Popular Posts / Bài viết phổ biến trong Blogspot Blogger này thì gửi câu hỏi ở dưới đây, Terocket sẽ giải đáp mọi thắc mắc nhé.

Một số thủ thuật liên quan đến Popular Posts / Bài viết phổ biến trong Blogspot Blogger

1. [Tips] - Popular Posts / Bài đăng phổ biến hiện đại & hiệu ứng đẹp tùy chỉnh cho Blogger V1
2. Tổng hợp một số style tiện ích Popular Posts cho blog
3. Hiển thị ảnh thumbnail của bài viết bất kỳ trên tiện ích Popularposts của blogger
4. Bo tròn bài viết trong Popular Post cho Blogger
5. Rainbow PopularPosts với thumbnail và số cho blogger(V4)
6. Multi Color Popular Posts có số đếm cho blogspot (v3)
7. Popular Posts dạng Slides trượt dọc cho Blogger
8. Tùy chỉnh Popular Posts đơn giản của blogger/blogspot
9. Popular posts dạng ảnh có số đếm từ jquery v2 cho blogger
10. Popular Post dạng ảnh Gallery cho blogspot
11. Tiện ích Bài đăng phổ biến bố trí chiều ngang - vers 2
12. Cool Popular Posts style đẹp cho bài đăng phổ biến
13. Màu nền riêng cho bài viết xem nhiều nhất
14. Thêm hiệu ứng tooltips cho rencent post và popuplar post cho blogger
15. Làm đẹp tiện ích Popular Posts (hiệu ứng tooltip)
16. Popular Posts dạng ảnh xoay tròn từ CSS3 cho blogger
17. Ẩn một bài viết bất kỳ trong tiện ích Popular Posts
18. Hiển thị đoạn trích dẫn dạng title cho bài đăng phổ biến
19. Hiển thị bài đăng phổ biến dạng ảnh chuyển động
20. Popular pots có có số đếm và title trích dẫn

Trứng Vịt - Terocket