Tạo widget Recent Comment (bình luận mới) với thiết kế đẹp mắt cho Blogspot

Chào các bạn, chào mừng các bạn quay lại với Blog Bác Sĩ Windows - bacsiwindows.com/blog.
Hôm nay mình sẽ chia sẻ code widget Recent Comment (hay còn gọi là bình luận mới nhất, bình luận gần đây) do mình mod lại  từ một trang blog nước ngoài (không nhớ tên).
Widget sẽ liệt kê ra những nhận xét mới nhất trên Blog của bạn, giúp bạn cũng như khách ghé thăm dễ dàng quản lý được những ai đã nhận xét!
Xem demo

Cách thực hiện

Tạo một Widget HTML/Javascript trong Bố cục, và dán toàn bộ code này vào:
<style>
.comment-info2 {clear: both; width: 100%; float: left; margin: 0 0 15px; }
.comment-info2 .left {background: #dedede; padding: 3px 15px; border-radius: 100px; display: block; text-transform: uppercase; font: 400 12px Roboto;}
.comment-info2 .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 .right a:hover {opacity: .8}
ul.idbcomments{list-style:none;margin:0;padding:0}.idbcomments li{position:relative;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{text-decoration: none; color: #fff; font: 500 14px "Roboto"; position: absolute; background: #dedede; padding: 5px 10px; border-radius: 100px;border-bottom-left-radius:0}.idbcomments li span{color: #666; display: block; background: #dedede; padding: 7px 15px; border-radius: 100px;border-top-left-radius:0; margin: 25px 0 0 0;}
</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("https:") ? "https:" + 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 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 = 7, // số cmt
    showAvatar = !1, // hiện avatar hay không
    avatarSize = 42, // kích thước avatar
    roundAvatar = !0, // avatar có bo tròn không
    characters = 38, // số kí tự của nhận xét
    showMorelink = !1, // hiện link đọc thêm
    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'>
<div class='right'><a href='/cmt' target='_blank' title='Xem 200 bình luậ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>
Chỉnh sửa một vài chỗ in đậm lại cho phù hợp với Blog của bạn nhé.

Tổng kết

Để xem thêm các widget recent comment khác, hãy click vào đây! Chúc thành công!
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. lâu lâu không thấy ra bài, mà đã ra thì toàn bài hay đó

      Trả lờiXóa
    2. Nặc danh17:11 11/6/18

      vãi thật , BSW chuyến này tốt bụng quá ra bài 24/24

      Trả lờiXóa
      Trả lời
      1. Lâu rồi không ra bài, tranh thủ rảnh viết cho nhiều @@

        Xóa
      2. Nặc danh17:31 11/6/18

        à mà BSW ơi !!! Làm sao để tạo được cái khung như này người khác chỉ cần click 1 cái là coppy được vậy admin ?
        [img]https://i.imgur.com/Y9vKbvl.png[/img]

        Xóa
      3. Thêm user-select: all cho class hoặc id hoặc thẻ đó nhé, ví dụ:

        blockquote, code {user-select:all}

        Xóa
      4. Nặc danh17:55 11/6/18

        ok a

        Xóa
    3. bài chất lượng gọi là miễn bàn :v

      Trả lờiXóa
    4. Anh có thể ra bài hướng dẫn
      khi cmt link .gif thì nó hiện ảnh động luôn được khong anh

      Trả lờiXóa
      Trả lời
      1. Cái đó thì thread comment cũ mới làm được.

        Xóa
      2. có Free Theme nào đẹp chia sẻ đi :V

        Xóa
      3. Comment mới thì bắt buộc phải dùng thẻ [ img ]

        Xóa
    5. Muốn cho nó mất bớt 2 cái cmt đi làm kiểu gì hả anh ?

      Trả lờiXóa
    6. Trả lời
      1. Sao anh làm được mấy cái ở trên thanh menu mà click vào là nó có cái hiệu ứng gì á, nó trượt ra cái đẹp thế?

        Xóa
      2. Cái nào em? Ở đâu?

        Xóa
      3. Ở thanh Menu á anh, Click vô là có hiệu ứng trượt á anh
        Anh thử click giữ vào 1 điểm trên thanh menu xem. Nó trượt ra cái gì á, anh thử bấm, giữ vào Blogspot chẳng hạn, nó ra hiệu ứng trượt 1 cái. đây nè anh

        Xóa
      4. Đó là hiệu ứng ripple click của material design đó em.

        Xóa
      5. Anh hướng dẫn em làm được không >< ?

        Xóa
      6. Để a rảnh viết bài viết hướng dẫn.

        Xóa