Tạo bài viết

Thêm ảnh
Comment Recent Comment Thủ Thuật Blogspot Widget Tạo widget Recent Comment (bình luận mới) với thiết kế đẹp mắt cho Blogspot
  • Lưu bài viết

    Lưu bài viết để xem sau

  • Chia sẻ bài viết

    Chia sẻ bài viết lên Facebook

  • Đăng bình luận

    Bình luận về bài viết này

  • Báo lỗi bài viết

    Báo lỗi hoặc góp ý bài viết

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

    Quản trị viên
    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/AVvXsEjMhq38KEjUaZVD1QFoYkAk-JNI9rSHEUuGnyKMjvcYPu_SUuxlrBm48cFIBOTd1WeZmYHIu-9fZCN7n314kDVTt7_ah2cGQj_PpHBQ7cvjr6pp-8i5PfqOaJl_gd87qGLPqTUDVnh4Lwfq/" + avatarSize + "/blogger.png" : -1 != n.indexOf("blogblog.com/img/openid16-rounded.gif") ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1er0pVO7chl-JukjbdGhAcdba9yxTnrG-RJg8fsmprTlU6lNSm1Tn-5ZKcqINVWzaRaXd-n5-oZDngZIbQyF1pgNVK-beaKjHQgFDNSxQpTebZ7U5VE-2X1f-eKkT3Er6rsQpJoVcr_dX/" + 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/AVvXsEjNWo-0taRvXuegQa2OEes2o0Ic6Yf-He47Jg-4qSd5KkzALnnUUxJX0nu54RtAClrVG8Itelnoc0uaiuZMYiEyYQcYnfbrR5cKbl4oGDfTwCsAOsAG5nqZau4vC4QTiOoRL3yGKTrteFs-/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/AVvXsEjNWo-0taRvXuegQa2OEes2o0Ic6Yf-He47Jg-4qSd5KkzALnnUUxJX0nu54RtAClrVG8Itelnoc0uaiuZMYiEyYQcYnfbrR5cKbl4oGDfTwCsAOsAG5nqZau4vC4QTiOoRL3yGKTrteFs-/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!

    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/AVvXsEjMhq38KEjUaZVD1QFoYkAk-JNI9rSHEUuGnyKMjvcYPu_SUuxlrBm48cFIBOTd1WeZmYHIu-9fZCN7n314kDVTt7_ah2cGQj_PpHBQ7cvjr6pp-8i5PfqOaJl_gd87qGLPqTUDVnh4Lwfq/" + avatarSize + "/blogger.png" : -1 != n.indexOf("blogblog.com/img/openid16-rounded.gif") ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1er0pVO7chl-JukjbdGhAcdba9yxTnrG-RJg8fsmprTlU6lNSm1Tn-5ZKcqINVWzaRaXd-n5-oZDngZIbQyF1pgNVK-beaKjHQgFDNSxQpTebZ7U5VE-2X1f-eKkT3Er6rsQpJoVcr_dX/" + 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/AVvXsEjNWo-0taRvXuegQa2OEes2o0Ic6Yf-He47Jg-4qSd5KkzALnnUUxJX0nu54RtAClrVG8Itelnoc0uaiuZMYiEyYQcYnfbrR5cKbl4oGDfTwCsAOsAG5nqZau4vC4QTiOoRL3yGKTrteFs-/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/AVvXsEjNWo-0taRvXuegQa2OEes2o0Ic6Yf-He47Jg-4qSd5KkzALnnUUxJX0nu54RtAClrVG8Itelnoc0uaiuZMYiEyYQcYnfbrR5cKbl4oGDfTwCsAOsAG5nqZau4vC4QTiOoRL3yGKTrteFs-/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!

    Bình luận
    Chia sẻ

    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