Cách tạo Widget bình luận mới nhất đẹp và cực đơn giản cho Blogspot 2023

Bài viết này mình sẽ chia sẻ các bạn cách tạo widget bình luận mới nhất cho blogspot cực kỳ đơn giản. Với cách hiển thị bình luận này sẽ giúp chủ trang blog cũng như khách truy cập blog theo dõi được những bình luận mới nhất để dễ dàng tương tác. OK.

Theo thường lệ trước khi thực hiện các thay đổi về giao diện blogspot yêu cầu các bạn nên sao lưu lại Template để tránh phát sinh các lỗi không cần thiết nhé !

Bước 1: Các bạn vào Bố cục và tạo 1 Widget đặt tên là Bình luận hay gì đó theo ý bạn => Dán đoạn code sau vào Widget đó và lưu lại Bố cục.

<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("/s1600/") ? n.replace("/s1600/", "/s" + avatarSize + "-c/") : -1 != n.indexOf("/s1600-c/") && 0 != n.indexOf("http:") ? "http:" + n.replace("/s1600-c/", "/s" + avatarSize + "-c/") : -1 != n.indexOf("blogblog.com/img/b16-rounded.gif") ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuCpNg6hRFQQbwDI1og6o16uBUEit67L_OYpkoZSIYhd_4OhNpVtZEXRXh9jSvu9BrUSI53QVkxfDRo1jCWi2Bl4w_5gkdpk4yci3ip_Xf8hcbuiZDOv8vfPUJJEomftF99moTI1EGp1s/s1600-p-k-no-nu/avatar.jpg" : -1 != n.indexOf("blogblog.com/img/openid16-rounded.gif") ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBOH9nv__VhQCXnPxr4k3uwW9QnrdLPwBykSQvENyX7hUE1ktWbvfjjFrnn-q6vqV6qfkx4Iv63WnU1L_rGwGKP4rXUMGIQVnMpSJZxonDDBrdLqOVN5ikQDuMdqEoPP83nTmPO5A6NKhE/" + 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="color: #185a7ad1;" 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 = 10,
    showAvatar = !0,
    avatarSize = 55,
    roundAvatar = !0,
    characters = 30,
    showMorelink = !1,
    defaultAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFL0aleKNuYeAcPz1MILs9i-vBdxPIVfQiS4VdGBrvUWcCLQXYlTObfCtd638OPpqzqe_Jryw6H9KnuOyUfBSfZSvDqR4gkqlr-WzV4tATWPdTZG8r72Lv241TYTQOdhCEB0N6ArDWIqA/s1600/avt.png",
    hideCredits = !0,
    numComments = numComments || 5,
    avatarSize = avatarSize || 60,
    characters = characters || 25,
    defaultAvatar = defaultAvatar || "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEWLumItglUJwSsJ1_soIKseyIpP8Ef_dsiZFyypsbK_gv8wNDRS9DADbzHjKOLxWdyg7P4K5AeYaIQr9Y3fXarxSSNPh-_GMIdfYOIKGyhjuT6W9zB8d0rXbSR2Eyt_ZrbnjGhD0meVXE/s1600/67667256_1343333345813869_6595375101410017280_n.jpg",
    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>

<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 2: Bạn vào phần Chủ đề => Chỉnh sửa HTML => Dán đoạn code bên dưới vào trước thẻ ]]></b:skin> như hình:

.comment-info2_NPT {clear: both; width: 100%; float: left; margin: 0 0 15px; }
.comment-info2_NPT .left {background: #dedede; padding: 3px 15px; border-radius: 100px; display: block; text-transform: uppercase; font: 400 12px Roboto;}
.comment-info2_NPT .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_NPT .right a:hover {opacity: .8}
.idbcomments{box-sizing: border-box; overflow-y: scroll; white-space: nowrap; height: 225px; padding: 5px;}
.comment-info2_NPT .right a:hover {opacity: .8}
ul.idbcomments { list-style: none;}
.idbcomments li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:0!important;word-break:break-all;}.idbcomments li .avatarImage{float:left;margin-right:12px;position:relative;overflow:hidden;padding-left: 0px;}
.idbcomments li img{position:relative;overflow:hidden;display:block;width:40px;height:40px}
.idbcomments li a{font-weight: 600; font-size: 13px; line-height: 2em;}
.idbcomments li span {color: #666; display: block; padding: 0px; margin: 0px 0 5px; font-size: 13px}
.adsgg { padding: 10px 15px; }

Lưu lại Chủ đề và quay lại Blog kiểm tra. Xong rồi nhé !

Các bạn có thể tùy chỉnh code lại CSS phần bình luận cho hợp lý với Template Blogspot để hài hòa hơn nhé. Chúc các bạn thành công !

Admin (12.8.20)