Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link Get now!

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!

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") ? "//1.bp.blogspot.com/-7bkcAKdpGXI/UrbyQRqvSKI/AAAAAAAAFmI/oBv_yMeYnMQ/s" + avatarSize + "/blogger.png" : -1 != n.indexOf("blogblog.com/img/openid16-rounded.gif") ? "//2.bp.blogspot.com/-VgnInuIUKBU/UrbzyXTYWRI/AAAAAAAAFmU/3f_Vfj3TI6A/s" + 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://4.bp.blogspot.com/-jmA-qIOJIFU/WfgKSYnhm5I/AAAAAAAAABQ/ElEIBlHd31gISODb3GlA9Z_JPRKiSzvYQCLcBGAs/s35/Logo-Bac-Si-Windows.png",
    hideCredits = !0,
    numComments = numComments || 5,
    avatarSize = avatarSize || 60,
    characters = characters || 25,
    defaultAvatar = defaultAvatar || "https://4.bp.blogspot.com/-jmA-qIOJIFU/WfgKSYnhm5I/AAAAAAAAABQ/ElEIBlHd31gISODb3GlA9Z_JPRKiSzvYQCLcBGAs/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é.

Có những thứ luôn quẩn quanh cuộc đời bạn và đôi lúc không có lời giải thích, liệu rằng đó có phải là duyên số?!

11 nhận xét

  1. Duy
    Nhận xét này đã bị tác giả xóa.
    1. Duy
      Nhận xét này đã bị tác giả xóa.
    2. Suspendisse posuere mi lacus, vitae fringilla leo gravida eu. Donec a nisi vel ligula fringilla tempus id vitae nibh. Sed sollicitudin ante ultrices purus auctor auctor. Etiam turpis sem, mattis sit amet purus id, dapibus euismod libero.
    3. Suspendisse posuere mi lacus, vitae fringilla leo gravida eu. Donec a nisi vel ligula fringilla tempus id vitae nibh. Sed sollicitudin ante ultrices purus auctor auctor. Etiam turpis sem, mattis sit amet purus id, dapibus euismod libero.
  2. Suspendisse posuere mi lacus, vitae fringilla leo gravida eu. Donec a nisi vel ligula fringilla tempus id vitae nibh. Sed sollicitudin ante ultrices purus auctor auctor. Etiam turpis sem, mattis sit amet purus id, dapibus euismod libero.
    1. Suspendisse posuere mi lacus, vitae fringilla leo gravida eu. Donec a nisi vel ligula fringilla tempus id vitae nibh. Sed sollicitudin ante ultrices purus auctor auctor. Etiam turpis sem, mattis sit amet purus id, dapibus euismod libero.
    2. Suspendisse posuere mi lacus, vitae fringilla leo gravida eu. Donec a nisi vel ligula fringilla tempus id vitae nibh. Sed sollicitudin ante ultrices purus auctor auctor. Etiam turpis sem, mattis sit amet purus id, dapibus euismod libero.
© Tôi Là Blogger. All rights reserved. Distributed by ASThemesWorld