Tạo widget Recent Comment với avatar bo tròn tuyệt đẹp cho Blogspot

đã xuất bản
Hello xin chào tất cả các bạn, chào mừng các bạn trở lại với blog Bác Sĩ Windows.
Tình hình là mới tìm được một widget Recent Comment (bình luận gần đây) trên mạng, và mang về chỉnh CSS để xài trong blog này. Thấy nhiều bạn chắc cũng thích, chưa gì đã "ăn trộm" về xài rồi, thôi thì viết bài chia sẻ luôn cho ai muốn xài thì xài. Chán, mỗi lần làm ra cái gì mới là cứ bị auto copy :v
Tạo widget Recent Comment với avatar bo tròn tuyệt đẹp cho Blogspot - Bác Sĩ Windows
Đây là một widget gọn nhẹ giúp hiện ra những bình luận mới nhất, giúp bạn dễ dàng quản lý được ai đã bình luận trên trang web của mình để tiện việc theo dõi & trả lời một cách nhanh chóng. Demo xem tại chân trang của blog mình.
Không linh tinh nữa, cùng xem cách thực hiện nhé.

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

Bước 1. Vào phần Bố cục, tạo một widget HTML/Javascript.
Bước 2. Dán toàn bộ code này vào:
<style>
.comment-info2_BSW {clear: both; width: 100%; float: left; margin: 0 0 15px; }
.comment-info2_BSW .left {background: #dedede; padding: 3px 15px; border-radius: 100px; display: block; text-transform: uppercase; font: 400 12px Roboto;}
.comment-info2_BSW .right a {font: 500 12px Roboto,sans-serif; text-transform: uppercase; background: #dedede; padding: 3px 15px; box-sizing: border-box; display: block; border-radius: 100px;}
.comment-info2_BSW .right a:hover {opacity: .8}
ul.idbcomments{list-style:none;margin:0;padding:0}.idbcomments li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:0!important;word-break:break-all;padding:0 0 7px!important}.idbcomments li .avatarImage{float:left;margin-right:12px;position:relative;overflow:hidden}.idbcomments li img{border-radius:100%;position:relative;overflow:hidden;display:block;width:45px;height:45px}.idbcomments li a{font-weight:700}.idbcomments li span{color: #666; display: block; background: #dedede; padding: 10px; border-radius: 100px}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments
function idbcomments(a) {
    var e;
    e = '<ul class="idbcomments">';
    for (var t = 0; numComments > t; t++) {
        var r, o, n, i;
        if (t == a.feed.entry.length) break;
        e += "<li>";
        for (var d = a.feed.entry[t], s = 0; s < d.link.length; s++) "alternate" == d.link[s].rel && (r = d.link[s].href);
        for (var l = 0; l < d.author.length; l++) o = d.author[l].name.$t, n = d.author[l].gd$image.src;
        n = -1 != n.indexOf("/s1600/") ? n.replace("/s1600/", "/s" + avatarSize + "-c/") : -1 != n.indexOf("/s220/") ? n.replace("/s220/", "/s" + avatarSize + "-c/") : -1 != n.indexOf("/s512-c/") && 0 != n.indexOf("http:") ? "http:" + n.replace("/s512-c/", "/s" + avatarSize + "-c/") : -1 != n.indexOf("blogblog.com/img/b16-rounded.gif") ? "http://1.bp.blogspot.com/-7bkcAKdpGXI/UrbyQRqvSKI/AAAAAAAAFmI/oBv_yMeYnMQ/s" + avatarSize + "/blogger.png" : -1 != n.indexOf("blogblog.com/img/openid16-rounded.gif") ? "http://2.bp.blogspot.com/-VgnInuIUKBU/UrbzyXTYWRI/AAAAAAAAFmU/3f_Vfj3TI6A/s" + avatarSize + "/openid.png" : -1 != n.indexOf("blogblog.com/img/blank.gif") ? -1 != defaultAvatar.indexOf("gravatar.com") ? defaultAvatar + "&s=" + avatarSize : defaultAvatar : n, 1 == showAvatar && (i = 1 == roundAvatar ? "avatarRound" : "", e += '<div class="avatarImage ' + i + '"><a title="Truy cập đến bình luận đó" href="' + r + '"><img class="' + i + '" src="' + n + '" alt="' + o + '" width="' + avatarSize + '" height="' + avatarSize + '"/></a></div>'), e += '<a style="display:none" href="' + r + '">' + o + "</a>";
        var A = d.content.$t,
            v = A.replace(/(<([^>]+)>)/gi, "");
        "" != v && v.length > characters ? (v = v.substring(0, characters), v += "&hellip;", 1 == showMorelink && (v += '<a href="' + r + '">' + moreLinktext + "</a>")) : v = v, e += "<span>" + v + "</span>", e += "</li>"
    }
    e += "</ul>";
    var c = "";
    0 == hideCredits && (c = "display:block;"), e += "", document.write(e)
}
var numComments = 5,
    showAvatar = !0,
    avatarSize = 42,
    roundAvatar = !0,
    characters = 30,
    showMorelink = !1,
    defaultAvatar = "https://4.bp.blogspot.com/-jmA-qIOJIFU/WfgKSYnhm5I/AAAAAAAAABQ/ElEIBlHd31gISODb3GlA9Z_JPRKiSzvYQCLcBGAs/s35/Logo-Bac-Si-Windows.png",
    hideCredits = !0,
    numComments = numComments || 5,
    avatarSize = avatarSize || 60,
    characters = characters || 25,
    defaultAvatar = defaultAvatar || "https://4.bp.blogspot.com/-jmA-qIOJIFU/WfgKSYnhm5I/AAAAAAAAABQ/ElEIBlHd31gISODb3GlA9Z_JPRKiSzvYQCLcBGAs/s35/Logo-Bac-Si-Windows.png",
    moreLinktext = moreLinktext || " More &raquo;",
    showAvatar = "undefined" == typeof showAvatar ? !0 : showAvatar,
    showMorelink = "undefined" == typeof showMorelink ? !1 : showMorelink,
    roundAvatar = "undefined" == typeof roundAvatar ? !0 : roundAvatar,
    hideCredits = "undefined" == typeof hideCredits ? !1 : roundAvatar;
//]]>
</script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=idbcomments"></script>
<div class='comment-info2_BSW'>
<div class='left'>
Hiện có <b><span id='Stats1_totalComments'></span></b> bình luận
</div>
<div class='right'><a href='/cmt' target='_blank' title='Xem 200 bình loạn gần đây'>View all <i class='fa fa-angle-right' style='margin:0 0 0 5px'/></i></a>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
//]]>
</script>
Bước 3. Lưu tiện ích. Nhớ chỉnh lại một số thông số để phù hợp với blog của bạn.

Lời kết

Đây là widget gọn và nhẹ giúp bạn dễ dàng quản lý được nhận xét/bình luận trên blog của mình. Ngoài ra mình có thêm code thống kê tổng số bình luận trên blog vào để người xẻm có thể biết được hiện tại có bao nhiêu bình luận trên blog. Bạn có thể xóa nếu không muốn nhé.
Nếu thấy bài viết hay & hữu ích hãy bình luận và chia sẻ nhé. Ngoài ra nếu thực hiện không được hoặc xảy ra lỗi thì cũng bình luận xuống bên dưới để mình giúp đỡ (nếu được). Chúc các bạn thành công.
Source code: idblanter.com

97 bình luận

Hãy cùng tham gia bình luận về bài viết này nhé!

  1. Trả lời
    1. Quào nhanh dữ, vừa xuất bản 1 phút trước :v

      Xóa
  2. Trả lời
    1. https://media.tenor.co/images/065972681bf9bfbb564024333fc9e214/tenor.gif

      Xóa
  3. https://media.tenor.co/images/3ca3e3df4aef0f07989588f16e326cb5/tenor.gif cmt 3

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

      Xóa
  4. thật bất ngờ là cái bài viết mô liên quan đến BÌNH LUẬN thumbnail nào cũng có mặt của Khanh đẹp trai vào hết :v

    http://www.linkthuthuat.com/2017/11/tao-widget-recent-comment-voi-avatar-bo.html
    CMT4

    Trả lờiXóa
    Trả lời
    1. Vậy à, để mai mốt né thèn TKN ra :)))

      Xóa
    2. TKN méo thích điều này -.-

      Xóa
  5. Trả lời
    1. Đẹp thì share một phát nào!!
      https://media.tenor.co/images/284ccb130b2619867c8153106e48f688/tenor.gif

      Xóa
  6. Ủa chỉ cách comment ảnh động trên Blog này đi, sao thấy comment nhiều hình thế :3

    Trả lờiXóa
    Trả lời
    1. Comment Link ảnh động thôi là hiện được.

      Xóa
    2. http://www.bacsiwindows.com/2017/11/mot-so-anh-dong-hai-huoc-cho-anh-em-thoai-mai-binh-loan.html

      Xóa
    3. Haha nhìn thằng này giống mình ghê :v
      https://media.tenor.co/images/284ccb130b2619867c8153106e48f688/tenor.gif

      Xóa
    4. Thật à, cho tấm hình kiểm chứng đi :v

      Xóa
    5. Soái ca Niệm =))
      https://i.imgur.com/Wr64EvL.jpg

      Xóa
    6. Ặc, méo thấy giống miếng nào luôn :)))

      Xóa
    7. ý nói đẹp trai giống nhau ý mà :v

      Xóa
    8. https://media.tenor.co/images/aa440153baa6f34405ef831cbf58531c/tenor.gif

      Xóa
  7. Trả lời
    1. https://media.tenor.co/images/c47123d8c726a90ed380243c90cdb8f9/tenor.gif

      Xóa
  8. Mình là người đến sau nên cướp cmt 6 vậy -_-

    Trả lờiXóa
  9. Trả lời
    1. https://media.tenor.co/images/065972681bf9bfbb564024333fc9e214/tenor.gif

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

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

      Xóa
    2. http://pik.vn/20148e28ba45-cb2e-4ee4-b165-3513df9c9759.gif

      Xóa
    3. https://media2.giphy.com/media/P0RWkdsRpK7ss/200_d.webp

      Xóa
  11. https://lh4.googleusercontent.com/-4pQZUoyN3-8/VALpFu56pCI/AAAAAAAAMOw/EhGJ9v-1IXU/s1600/Hinh-Anh-Dong-Hai-Huoc-Ve-Dong-Vat-%2B(7).gif

    Trả lờiXóa
  12. Thanh Menu cố định nên khi sử dụng điện thoại thì menu chỉ hiện được 1 phần.

    Trả lờiXóa
  13. Test gif mới :3
    https://i.imgur.com/BgyHJdY.gif

    Trả lờiXóa
    Trả lời
    1. Gif này cũ rồi mà :))
      https://i.imgur.com/BgyHJdY.gif

      Xóa
  14. Bài này ít bình loạn quá, lên nào!
    https://media.giphy.com/media/OYPYjvGWYGre0/giphy.gif

    Trả lờiXóa
  15. Trả lời
    1. Vẫn chưa giống lắm :v

      Xóa
    2. h ko biết blog a là home fb hay group fb nữa :3

      Xóa
    3. Cả 2 gọp lại thành 1 luôn đó :v

      Xóa
    4. Dần dần rồi quen, để xem ý kiến mọi người thế nào :v không được thì xóa

      Xóa
    5. a thêm cái ảnh to ở trên luôn :v

      Xóa
    6. thêm giống cái pagiis luôn ý a

      Xóa
    7. Cái đấy để ngâm cứu thêm vào trang giới thiệu thì hợp hơn ý.

      Xóa
  16. Chu choa mọa ơi, template gì mà chất vãi :v Mà theo tui nghĩ nên tắt cái load đi, đẹp thì đẹp thật mà vào nhiều cảm thấy trang load chậm :v không phải chậm vì thêm cái load này nên nặng mà do hiệu ứng khi load nó trắng.

    Trả lờiXóa
  17. Tưởng bác Trường nghỉ mất rồi chứ!

    Trả lờiXóa
    Trả lời
    1. Cũng muốn nghỉ lắm đó bác, nhiều người thúc quá nên không nghỉ được...

      Xóa
    2. Tui thì cũng muốn thúc mà nhắn tin không thấy rep :v

      Xóa
    3. Không có check tin nhắn đang chờ!!

      Xóa
    4. https://i.imgur.com/XkKXhUU.png

      Xóa
    5. Chắc nó nằm mơ thấy template cũ :v

      Xóa
  18. Bài viết rất hay, nhưng còn phần code của page ViewAll em k biết viết sao á. Mong Add hướng dẫn luôn phần đó với.

    Trả lờiXóa
  19. Còn phần code của cái page ViewAll thì làm sao Add, hướng dẫn em với.
    Thanks

    Trả lờiXóa
  20. không như demo ở tấm ảnh trên nhỉ ? Ông chỉnh lại cho tôi được không ?
    https://viethungtest.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Thêm trước ]]></b:skin> 2 dòng này:
      #footer-wrapper .widget li:before {display:none!important}
      #footer-wrapper .widget li {width: 100%!important}

      Xóa
  21. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
    Trả lời
    1. Cảm ơn bạn, nếu bạn còn tiếp tục spam link mình sẽ chặn vĩnh viễn.

      Xem nội quy

      Xóa
  22. Ủa anh Trường ơi ! Em hỏi nhé. Làm thế nào để chỉnh sửa font arial mặc định cho blogspot vậy ? Em cài font awesome nó lỗi thành font times new roman luôn !
    Link : http://dome-itttt.blogspot.com/
    Cảm ơn anh ạ !

    Trả lờiXóa
    Trả lời
    1. Đầu tiên thêm Font vào Template (tìm trên Google Fonts)
      Sau đó muốn sử dụng cho thành phần nào trên Blog thì sử dụng CSS này:
      #ID hoặc .class {font-family: "Tên_font"; font-size: kích thước; font-weight: độ dày}

      Xóa
    2. Muốn sử dụng tất cả thì làm sao hả anh ?

      Xóa
    3. Làm như bình luận trên của anh đó, thêm font vào template rồi thêm css là được rồi.

      Xóa
    4. Temp hiện tại bao nhiêu tiền ạ ?

      Xóa
    5. Nhận xét này đã bị tác giả xóa.

      Xóa
    6. À mà anh không bán Template hiện tại nha.

      Xóa
  23. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  24. [img]https://i.imgur.com/0kVO94Z.png[/img]
    A Trường ơi e làm theo a nhưng k đc nó hiện tất logo bsw của a , k hiển thị được avatar của người khác , giúp em khắc phục với a !!! Help Me ???

    Trả lờiXóa
    Trả lời
    1. Em xem lại trong template còn code nào tương tự không, xóa hết nhé. Anh vừa test thấy vẫn hoạt động tốt.

      Xóa
  25. có template e test được có template k test được

    Trả lờiXóa
    Trả lời
    1. Cái đó do em import data từ blog khác vào nên nhận xét không hiện avatar đấy, em thử bình luận 1 cái mới xem có hiện không.

      Xóa
    2. [img]https://i.imgur.com/mRTRJ1N.png[/img]
      à mà a Trường e edit nhầm , khung comment màu trắng k nhỉn rõ chữ giờ e muốn đổi màu thì sao a ?

      Xóa
    3. Thêm CSS này:
      [code]#comments,.comments,.comment-content,.comment-block{color:#444!important}[/code]

      Xóa
    4. CSS thì trước ]]></b:skin> thôi chứ đâu em

      Xóa
    5. ok đc r ạ , e cảm ơn a nhiều <3

      Xóa
Gợi ý cho bạn