Hello xin chào tất cả các bạn, chào mừng các bạn đã quay lại với blog Bác Sĩ Windows.
Theo yêu cầu của một bạn yêu cầu mình chia sẻ cách làm widget bài đăng phổ biến có số đếm ở phía trước (giống blog của mình), thì bài viết hôm nay mình sẽ chia sẻ đoạn CSS mà mình viết để tùy biến widget popular post (hay bài đăng phổ biến) mà mình đang sử dụng trên blog.
Thêm một Style đẹp cho Widget Popular Post (Bài Đăng Phổ Biến) - Bác Sĩ Windows

Thủ thuật rất đơn giản, chỉ cần một ít CSS và ngoài ra không cần làm thêm bất kỳ việc gì nữa, xem cách làm nhé.

Các bước thực hiện

Bước 1. Truy cập vào trang chỉnh sửa HTML.
Bước 2. Tìm thẻ ]]></b:skin> và dán CSS bên dưới vào phía trước nó.
#PopularPosts1 ul li:first-child:after{content:"1";color:#ff6262!important;border:2px solid!important}
#PopularPosts1 ul li:first-child + li:after{content:"2";color:#55579e!important;border:2px solid!important}
#PopularPosts1 ul li:first-child + li + li{background:#fff}
#PopularPosts1 ul li:first-child + li + li:after{content:"3";color:#FDB713!important;border:2px solid!important}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#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:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#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:#fff}
#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:after{content:"10"}
#PopularPosts1 ul li:first-child: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,#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 + 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:after,#PopularPosts1 ul li:first-child + li + li + li + li + li:after{position:absolute;top:8px;text-align:center;line-height:1em;font:300 20px "Roboto",sans-serif;padding:5px 12px;border-radius:50%;color:#888;border:2px solid #eee}
#PopularPosts1 ul li a{display:block;margin-left:55px}
Bước 3. Lưu mẫu và tận hưởng thành quả!
Lưu ý: Bạn phải xóa hết các CSS tùy biến cũ (nếu có) nhé, nếu không sẽ bị xung đột và... lỗi đấy. Nếu không thích màu có sẵn thì bạn có thể thay mã màu khác vào ba chỗ in đậm ở trên nhé.

Lời kết

Mẫu Popular Post này phù hợp với các theme dạng đơn giản, cá nhân (như của mình), không có miêu tả và hình ảnh thu nhỏ.
Nếu thấy bài viết hay & hữu ích thì hãy cho mình một bình luận hoặc chia sẻ nhé, nếu thực hiện không được hoặc có lỗi xảy ra thì cũng bình luận bên dưới để mình giúp đỡ và sửa lỗi. Chúc các bạn thành công!
Trường Nguyễn - - 131 bình luận
Tag
  • Bình luận (131)
  • Emoticon
    1. Tui lại cướp cmt đầu ời hic

      Trả lờiXóa
      Trả lời
      1. Hahaa nhanh ghê, vừa xuất bản đã bóc cmt đầu :))

        Xóa
      2. Chỉ dám ước một vé ctv :>

        Xóa
      3. Cộng tác viên chắc chưa cần đến bây giờ, từ từ tuyển sau, hóng đi nhé :D

        Xóa
      4. Sợ hạn chế tuổi thôi :))

        Xóa
      5. Mấy cái đó không quan trọng nữa, quan trọng là phong cách viết bài với sự siêng năng & sáng tạo thôi !!

        Xóa
      6. Wow, phong cach va ngau qua

        Xóa
      7. Hahaaa :)) chất lượng vẫn hơn số lượng

        Xóa
    2. hahaha đẹp :v
      http://www.linkthuthuat.com/2017/11/tao-widget-popular-post-tuyet-ep-co-so.html
      share nào ae :v

      Trả lờiXóa
      Trả lời
      1. Haha nhanh quá, nảy vào linkthuthuat không thấy bài viết, tí F5 lại thấy liền :))

        Xóa
    3. Trả lời
      1. Chia sẻ bài viết thể hiện cho tình yêu nhé =)))

        Xóa
      2. Trường là zai thẳng nhe :v ahihi

        Xóa
      3. Một câu chuyện cảm động giữa Trường & Huy 💞 :v

        Xóa
      4. Ặc, đây là 1 câu chuyện buồn và không hề cảm động :v

        Xóa
      5. em xin code mai đăng bài viết luôn :v

        Xóa
      6. e cào phím nhanh quá ghi nhầm
        e mượn bài viết mai đăng trên blog á a

        Xóa
      7. Thanh niên nói chuyện zễ thương quááá, mượn bài để up blog nhé :v

        Xóa
      8. Hahaa copy nhớ ghi Nguồn: www.bacsiwindows.com là Ok.

        Xóa
      9. À, cho link blog xem với nào!

        Xóa
      10. http://www.nguyenhuyit.tk/
        nè a

        Xóa
    4. hợp tác a ưi :v
      http://www.linkthuthuat.com/hop-tac

      Trả lờiXóa
      Trả lời
      1. Hợp tác thế nào? Hình thức hợp tác ra sao!?

        Xóa
      2. nôn na là: a đặt banner blog e, e cập nhật bài viết bên a <3

        Xóa
      3. Còn hình thức khác không, anh không thích đặt quảng cáo trên blog.

        Xóa
      4. get link tại đây thì sao a. dạng như a get link DEMo mấy cái widget á :v

        Xóa
      5. Cũng được đấy, nhưng mà anh có demo.bacsiwindows.com rồi !? @@

        Xóa
      6. thì a get cái link demo đó :v
        vd nè a :v
        http://ch.linkthuthuat.com/p/go-to-url.html?url=aHR0cDovL2RlbW8uYmFjc2l3aW5kb3dzLmNvbS8=

        Xóa
      7. À cũng được đấy! :))
        Mấy công cụ này em tự làm cả à?

        Xóa
      8. vâng. tự mày mò a ạ :v

        Xóa
      9. mak nếu khi chèn code cho ngta xem mak dài quá chèn lag thì a có thể mã hóa r chèn tại đây nha :v
        http://notepad.linkthuthuat.com/

        Xóa
      10. Javascript hay gì đấy e? Giỏi đấy :))

        Xóa
      11. Hahaa chắc mình cũng phải tập tành học hỏi theo nhỉ :))
        Javascript là js đấy (js viết tắt)

        Xóa
      12. Học từ đâu và học cái gì trước vậy? :v

        Xóa
      13. e down giáo trình trên mạng về a. Học từ cơ bản đến nâng cao ạ






















        Xóa
      14. Ok cám ơn e nhé, để a mò mò tìm hiểu xem :3

        Xóa
    5. đây nek a
      https://drive.google.com/file/d/1i-ay1ZZz9W30rMmgmYl5Fv9muk8e4Zpo/view?usp=sharing

      Trả lờiXóa
    6. Trả lời
      1. http://www.vanhuyy-it.tk/2017/11/tao-widget-popular-post-tuyet-ep-cho.html em mượn bài luôn nha a

        Xóa
      2. OK nhớ thi nguồn nhé e ;))

        Xóa
    7. Vào cài đặt tên miền thứ 3 trong blogspot mà ấn tick vào chuyển hướng bacsiwindows.com sang www.bacsiwindows.com nhé, vừa vào thì thấy lỗi.

      Trả lờiXóa
    8. cho em Xin cái back-top được không bác ơi :( đang tìm cái back-top bo tròn như vậy

      Trả lờiXóa
    9. Sao hôm nay không thấy ai comment hết nhỉ ?

      Trả lờiXóa
    10. Hóng bài viết đưa menu lên trên :)

      Trả lờiXóa
    11. Kéo bài viết này lên 100 Comment đi :v

      Trả lờiXóa
      Trả lời
      1. Các ông cứ tích cực bình loạn chém gió đi thế nào cũng lên 100 thôi :v

        Xóa
      2. Chà, canh chừng người ta lên blog comment ghê nhỉ :3

        Xóa
    12. Trả lời
      1. Cũng không luôn nhé :v

        Xóa
      2. https://dantricdn.com/k:2015/1-rlmnxau-xi-1-1448471527152/chiem-nguong-nguoi-dan-ong-xau-nhat-the-gioi.jpg

        Xóa
      3. https://media.tenor.co/images/1095600804c7b10415ae65df35bbf566/tenor.gif

        Xóa
    13. Sao footer bên phải chừa trống làm gì vậy?

      Trả lờiXóa
      Trả lời
      1. Đưa cái recent comment lên sidebar rồi nên không biết nhét cái gì vào chỗ trống đó nữa :v

        Xóa
      2. nhét nhạc vào cho chất :v

        Xóa
      3. Nhét nhạc vào làm chậm blog, với lại làm phiền một số người không thích!

        Xóa
      4. http://www.starbinhit.net/2017/11/them-giong-chi-google-xin-chao-cho-trang-web.html
        Nhạc xin chào sao lại phiền :3

        Xóa
      5. Hay đấy :v để tí nghịch thử xem ahaha

        Xóa
      6. tôi thu gọn lại cho dễ :V https://goo.gl/j8qDms

        Xóa
      7. đổi lời ko đc hả [pre]Star Bình[/pre]

        Xóa
      8. Muốn đổi chữ khác, làm sao để copy link vậy??

        Xóa
      9. muốn nó kêu tên gì gửi lời thoại đây a làm cho

        Xóa
      10. Chào mừng các bạn đến với Blog Trọng Khanh Nguyễn. Nhớ theo dõi blog và ủng hộ Admin nhé !

        Xóa
      11. https://goo.gl/rB77rF

        Xóa
      12. https://media.tenor.co/images/065972681bf9bfbb564024333fc9e214/tenor.gif

        Xóa
      13. lời thoại đâu làm cho ông

        Xóa
      14. https://cdn.worldvectorlogo.com/logos/facebook-like.svg

        Xóa
      15. cái đó đăng ký đâu vậy anh

        Xóa
      16. @Trường Nguyễn - https://goo.gl/A8Uk7y

        Xóa
      17. Cách làm: http://www.starbinhit.net/2017/11/3-cach-don-gian-de-tai-file-phat-am-tren-google-dich.html

        Xóa
      18. a định thay cái thông báo ting ting khi inb tới thành ứ, á, ớ :))

        Xóa
      19. Định mệnh =))
        https://media.tenor.co/images/aa440153baa6f34405ef831cbf58531c/tenor.gif

        Xóa
      20. https://i.imgur.com/S0f5d.gif

        Xóa
      21. Quỳ
        https://media.tenor.co/images/6f567ef7cae93ca76de2346f28764ee9/tenor.gif

        Xóa
      22. https://goo.gl/RSL5cZ
        p/s: bx nay chắc cmt kiểu này quá :v admin chèn thêm âm thanh khi cmt luôn đi :v

        Xóa
      23. Muốn bình loạn bằng âm thanh thì URL phải có đuôi .mp3 mới được.
        Mà thêm vào chắc blog loạn hết mất :v

        Xóa
      24. k giống chút nào, á hơi lâu, phải thêm ớ ứ nữa mới giống

        Xóa
      25. http://gifimage.net/wp-content/uploads/2017/06/gif-4-2.gif

        Xóa
      26. https://38.media.tumblr.com/906cde665f2818b71a6eb4725c92fe69/tumblr_nvnfytsR921tlyjpto1_500.gif

        Xóa
      27. http://i1.kym-cdn.com/photos/images/newsfeed/000/718/067/1b0.gif

        Xóa
    14. Ơ cái đệt lúc trưa c/m bài này mới đúng 70 c/m, bây giờ lên hơn 100 c/m. toàn c/m ảnh biến thái ko chứ :v

      Trả lờiXóa
      Trả lời
      1. https://media.tenor.co/images/58da3874fbf792c6682bdbb577052e9d/tenor.gif

        Xóa
    15. bị lỗi rồi
      https://viethungtest.blogspot.com/
      Ông giúp tui được không

      Trả lờiXóa
      Trả lời
      1. Xóa đoạn css này
        <code>.PopularPosts .item-thumbnail {
        width:90px;
        height:65px;
        float:left;
        overflow:hidden;
        display:block;
        vertical-align:middle;
        margin:0 15px 0 0 !important;
        border-radius:3px;
        }
        .PopularPosts .item-thumbnail a {
        position:relative;
        display:block;
        overflow:hidden;
        line-height:0;
        }
        .PopularPosts ul li img {
        width:100px;
        height:80px;
        object-fit:cover;
        padding:0;
        transition:all .3s ease;
        }
        .PopularPosts .widget-content ul li {
        overflow:hidden;
        padding:15px 0;
        border-top:1px solid #eee;
        }
        .sidebar .PopularPosts .widget-content ul li:first-child,.sidebar .custom-widget li:first-child {
        padding-top:0;
        border-top:0;
        }
        .sidebar .PopularPosts .widget-content ul li:last-child,.sidebar .custom-widget li:last-child {
        padding-bottom:0;
        }
        .PopularPosts .item-title {
        font-size:14px;
        font-weight:500;
        line-height:1.4em;
        margin:0 0 5px;
        padding:0;
        }
        .PopularPosts ul li a {
        color:#333333;
        transition:color .3s;
        }
        .PopularPosts ul li a:hover {
        color:#0078d7;
        }</code>

        Xóa
      2. .PopularPosts .item-thumbnail {
        width:90px;
        height:65px;
        float:left;
        overflow:hidden;
        display:block;
        vertical-align:middle;
        margin:0 15px 0 0 !important;
        border-radius:3px;
        }
        .PopularPosts .item-thumbnail a {
        position:relative;
        display:block;
        overflow:hidden;
        line-height:0;
        }
        .PopularPosts ul li img {
        width:100px;
        height:80px;
        object-fit:cover;
        padding:0;
        transition:all .3s ease;
        }
        .PopularPosts .widget-content ul li {
        overflow:hidden;
        padding:15px 0;
        border-top:1px solid #eee;
        }
        .sidebar .PopularPosts .widget-content ul li:first-child,.sidebar .custom-widget li:first-child {
        padding-top:0;
        border-top:0;
        }
        .sidebar .PopularPosts .widget-content ul li:last-child,.sidebar .custom-widget li:last-child {
        padding-bottom:0;
        }
        .PopularPosts .item-title {
        font-size:14px;
        font-weight:500;
        line-height:1.4em;
        margin:0 0 5px;
        padding:0;
        }
        .PopularPosts ul li a {
        color:#333333;
        transition:color .3s;
        }
        .PopularPosts ul li a:hover {
        color:#0078d7;
        }

        Xóa
      3. Có đọc phần lưu ý trên bài viết không?

        Xóa
      4. Chưa thì đọc lại đê.

        Xóa
      5. Sorry... tại xóa thiếu vì khi tìm popularposts1

        Xóa
    16. https://vanvyiit.blogspot.com/
      Bác sĩ xem dùm em với huhu

      Trả lờiXóa
      Trả lời
      1. Tìm [tag].PopularPosts .widget-content ul li[/tag] thêm [code]height:40px[/code] nhé

        Xóa
      2. nhiều .PopularPosts .widget-content ul li lắm bác sĩ ơi

        Xóa
      3. Tui add bác sĩ vào giúp được không @@

        Xóa
      4. Email: truongdz.2069@gmail.com

        Xóa
    17. Anh Trường ơi làm sao cho bài viết hiển thị ngoài index được ạ, em lỡ tay xóa hết rồi

      Trả lờiXóa
      Trả lời
      1. Là sao? Xóa hết bài viết hay sao?

        Xóa
      2. Dạ không có nghĩa là ngoài index không hiển thị một bài viết nào ý

        anh qua bên em xem nè: http://sangblog.com

        Xóa
      3. Tìm [tag]#Blog1[/tag] xóa display:none; visibility:hidden đi nhé.

        Xóa

  • :))
    :((
    :D
    :(
    :)
    :-)
    ;)
    =))
    :p
    =.=
    ==
    ^_^
    /=he
    :*
    /=r
    /=l
    :v
    /=ok
    /=clap
    (y)
    (yy)
    /=hi
    /=j
    /=hup
    /=hd
    /=hl
    /=hr
    /=s
    <3