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

Đâ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/AVvXsEg-qS75D48Iyh6_gub_oyLWBGiAlNZMGnC8iZ4ff445cMihH-wUM-EjHRKts_MeK5u8r_MwT3bBSo8wFZyLxRLPGhljQPWxDIrGBHhdis-JT9QmcqrG-S09gpx1SmzHxWI8T5N8_Vi9wAt2/" + avatarSize + "/blogger.png" : -1 != n.indexOf("blogblog.com/img/openid16-rounded.gif") ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgouJ3kmPAhI5XswsKfCoCFGrvBAjTRDVFrcXTmjfoZlFXV_hoLuCaZ_xKjtR_MidAY205TMkWC0TxmJr5iiQsXStnL_xXHiOXsq0sqBfW0e0Dzb1jm3nV8ekeXhuGO8mGmyGG7aD0HYBSX/" + 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/AVvXsEhnYn63YyhIsGmJ3nyOgK50nw7TFfIILjwZzQ-cwO3TLhqTs1S4gFSZjSIwnSSflK23HxJSwUyYm2vwnsYDZ3XfRmO98YLzvlglHzR0H_cSdVbROcsUe061lhwXn70yEqf85oOAUCzM7_Gd/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/AVvXsEhnYn63YyhIsGmJ3nyOgK50nw7TFfIILjwZzQ-cwO3TLhqTs1S4gFSZjSIwnSSflK23HxJSwUyYm2vwnsYDZ3XfRmO98YLzvlglHzR0H_cSdVbROcsUe061lhwXn70yEqf85oOAUCzM7_Gd/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

Bài Liên Quan Tác Giả

Huỳnh Phụng Blogger

Tôi thích viết Blog để chia sẻ trãi nghiệm của chính mình. Tôi làm việc về Digital Marketing (SEO, Google Adwords, Facebook) và hy vọng sẽ có cơ hội hợp tác với bạn trong tương lai. Cùng chia sẻ kinh nghiệm mình có được