Tiện ích Recent Comment tuyệt đẹp cho Blogspot

Có thể bạn sẽ thích

Trong quá trình tút tát làm đẹp cho Kelvin Duong's Blog mình thấy được cái tiện ích Recent Comment (bình luận gần đây) trên mạng, và mang về chỉnh lại tí phù hợp với blog của mình. Code được mod bởi Bác Sĩ Windows

#Cách thực hiện

• Bước 1: Vào Blogger > Bố cục > Thêm tiện ích HTML/Javascript

• Bước 2: Chèn đoạn code bên dưới vào. Ở đây mình bổ sung 2 Style các bạn tự chọn nhé!

NOTE: Chỉnh sửa lại CSS cho phù hợp với Template nhé! Do việc thay đổi qua lại giữa 2 Style khá dễ nên mình khỏi Demo nha ^^

Style 1

<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/AVvXsEgheNcA9AYgbyqAfNElZbcvOnhIPzhK2ytziYshCNhLowkepe9X-zjwRexSk57uo4HpHKYWGPeAGou10lZoxBEPEEl_tM-zPWmP1LswZbgXhVSYeEZY0E3E-WlYy2sSsjGKjUpmBkuxrxcA/" + avatarSize + "/blogger.png" : -1 != n.indexOf("blogblog.com/img/openid16-rounded.gif") ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ6WiEL8zT6BIIDS3Dk3bGginKHamKe03npfRRRsk806RCew849cK6pOiaaTmD_wjSddaFAQ6Fc7HNW3LtqSmBVSFYY9GbMoL6hYe4U61rf9o7CrP5aBMZVjQbdVnXPtHFjHSfrB9VtAje/" + 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 += "…", 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/AVvXsEj02eOKyDPumA1K3BnEJB4SF7dxv1_vpBPikXE6zJH8K7rPAi9Mkrsu2_VBLNLteOSQq7PRc1MrAMabj3OfiPBjRJfEMYdggMdrLhubbqAYBMZr71fVR-4k3nzV-8PL3fe3R7eMEIRJ69_r/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/AVvXsEj02eOKyDPumA1K3BnEJB4SF7dxv1_vpBPikXE6zJH8K7rPAi9Mkrsu2_VBLNLteOSQq7PRc1MrAMabj3OfiPBjRJfEMYdggMdrLhubbqAYBMZr71fVR-4k3nzV-8PL3fe3R7eMEIRJ69_r/s35/Logo-Bac-Si-Windows.png",
    moreLinktext = moreLinktext || " More »",
    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&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>

Style 2

<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/AVvXsEgheNcA9AYgbyqAfNElZbcvOnhIPzhK2ytziYshCNhLowkepe9X-zjwRexSk57uo4HpHKYWGPeAGou10lZoxBEPEEl_tM-zPWmP1LswZbgXhVSYeEZY0E3E-WlYy2sSsjGKjUpmBkuxrxcA/" + avatarSize + "/blogger.png":-1 != n.indexOf("blogblog.com/img/openid16-rounded.gif") ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ6WiEL8zT6BIIDS3Dk3bGginKHamKe03npfRRRsk806RCew849cK6pOiaaTmD_wjSddaFAQ6Fc7HNW3LtqSmBVSFYY9GbMoL6hYe4U61rf9o7CrP5aBMZVjQbdVnXPtHFjHSfrB9VtAje/" + 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 += "…",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/AVvXsEj02eOKyDPumA1K3BnEJB4SF7dxv1_vpBPikXE6zJH8K7rPAi9Mkrsu2_VBLNLteOSQq7PRc1MrAMabj3OfiPBjRJfEMYdggMdrLhubbqAYBMZr71fVR-4k3nzV-8PL3fe3R7eMEIRJ69_r/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/AVvXsEj02eOKyDPumA1K3BnEJB4SF7dxv1_vpBPikXE6zJH8K7rPAi9Mkrsu2_VBLNLteOSQq7PRc1MrAMabj3OfiPBjRJfEMYdggMdrLhubbqAYBMZr71fVR-4k3nzV-8PL3fe3R7eMEIRJ69_r/s35/Logo-Bac-Si-Windows.png",moreLinktext = moreLinktext || " More »",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&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>

• Bước 3:Lưu lại và xem thành quả.

Hãy để lại comment phía dưới hoặc Chia sẻ bài viết để ủng hộ tác giả nhé!

Kelvin Dương

Mong muốn chia sẻ những hiểu biết cũng như kinh nghiệm của bản thân đến với mọi người

Life is not fair, get used to it

CHIA SẺ BÀI VIẾT

BÀI VIẾT LIÊN QUAN