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

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") ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsm7hO77MdJRcCgFy-06YTSEDDe9491yEg8N2LPoHAHRFRyIno-6PwGC9o_mQHpwaqtfCvn2kwKd4KeZZYuHwucpDtPIJ20StUoy-iGKp5dP28ik3v-cSNPE5-_nNd-S9g9e7XENG41aGz/" + avatarSize + "/blogger.png" : -1 != n.indexOf("blogblog.com/img/openid16-rounded.gif") ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi4_3jtGe5Nk-vBTamgvBFk0k_lGuieaeNVJGV94z-1jnwhDMv1-IWFuj7zt_XbN0X55vAsg8LsuHrCUIV15Voa31NgjxXe7ZezWqfQAhBu-hY7_iXCxeIIyuRZOcQuscakxJdfbCShC08/" + 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgimHVo_8hM8BViBfgSwV8cSlF8ut8v7KFMuxUSOkp6NeiqOUcDKZytIRbG7CL24TWXUgGe_tmMnF0UIBBYDA9EtthJZ7ZIOJkYZAQCKOzdEk5uLKLcSNxvHCo8zou5CJOxyi9WgDmyiQol/s35/Logo-Bac-Si-Windows.png",
    hideCredits = !0,
    numComments = numComments || 5,
    avatarSize = avatarSize || 60,
    characters = characters || 25,
    defaultAvatar = defaultAvatar || "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgimHVo_8hM8BViBfgSwV8cSlF8ut8v7KFMuxUSOkp6NeiqOUcDKZytIRbG7CL24TWXUgGe_tmMnF0UIBBYDA9EtthJZ7ZIOJkYZAQCKOzdEk5uLKLcSNxvHCo8zou5CJOxyi9WgDmyiQol/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
Nhớ bấm "Thông báo cho tôi" bên trên để nhận thông báo qua Email khi Admin trả lời nhé.
  • Đây là khu vực quản trị, bạn không có quyền truy cập vào!
    1. Trả lời
      1. Quào nhanh dữ, vừa xuất bản 1 phút trước :v

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

      Trả lờiXóa
    3. 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
    4. Trả lời
      1. Đẹp thì share một phát nào!!
        https://media.tenor.co/images/284ccb130b2619867c8153106e48f688/tenor.gif

        Xóa
    5. Ủ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. Haha nhìn thằng này giống mình ghê :v
        https://media.tenor.co/images/284ccb130b2619867c8153106e48f688/tenor.gif

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

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

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

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

      Trả lờiXóa
    7. 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
    8. 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
    9. 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
    10. blog thành group cha rồi :3

      Trả lờiXóa
      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. nhìn ko quen lắm :3

        Xóa
      5. 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
      6. a thêm cái ảnh to ở trên luôn :v

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

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

        Xóa
    11. 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
    12. 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
    13. 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
    14. 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
    15. 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
    16. 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
    17. Ủ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. body{font-family: ... }

        Xóa
      4. 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
      5. Temp hiện tại bao nhiêu tiền ạ ?

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

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

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

      Trả lờiXóa
    19. Nặc danh19:37 14/6/18

      [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
    20. Nặc danh20:08 14/6/18

      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. Nặc danh20:28 14/6/18

        [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. Nặc danh20:37 14/6/18

        vào chỗ nào a ơi

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

        Xóa
      6. Nặc danh20:44 14/6/18

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

        Xóa
      7. Ok không có gì em ;)

        Xóa