Cách tạo widget Recent Comment cho Blogger/Blogspot

Bạn đang xem: 
Cách tạo widget Recent Comment cho Blogger/Blogspot
 tại Thuthuatwiki.com
Recent Comment cho Blogger
Xin chào, chào mừng các bạn trở lại với chuyên mục thủ thuật Blogger của Thủ Thuật Wiki. Tình hình là mình thấy nhiều người chia sẻ popup recent comments(bình luận gần đây) cho theme Median UI, nên mình đã mang về chỉnh sửa lại để phù hợp với Template LiteSpot. 
Trong bài viết này mình sẽ chia sẻ tới các bạn cách tạo popup nhận xét gần đây trên Blogger/Blogspot. Hãy cùng mình bắt đầu nào!
Hướng dẫn tạo Popup Recent Comment cho Blogspot/Blogger
ảnh minh họa
Tiện ích này kết hợp giữa Recent Comment(bình luận gần đây) và cửa sổ Popup khi người dùng bấm vào. Sau đây mình hướng dẫn các bước:

Thực hiện

Lưu ý: Popup Recent Comment này chỉ hợp với mẫu Litespot, còn các mẫu theme khác bạn phải chỉnh sửa chút cho phù hợp.

Bước 1: Bạn hãy copy đoạn code bên dưới và dán trên thẻ </body>



  <!-- Popup recent comment by thuthuatwiki -->
<style>
    /* CSS popup comment by thuthuatwiki.top */
    .fullClose{display:block;position:fixed;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .1s ease;background:transparent;opacity:0;visibility:hidden}
    .thuthuatwiki-comment{position:fixed;opacity:0;visibility:hidden;z-index:99;overflow-y:auto;top:0;right:-12px;background:#fff;border:1px solid var(--widget-bg);width:350px;height:auto;max-height:400px;display:block;border-radius:6px;color:#48525c;box-shadow:10px 10px 35px rgba(0,0,0,0.1),-10px -10px 35px rgba(0,0,0,0.1);transition:all .3s ease;}  

    .thuthuatwiki-comment li{display:block;align-items:center;margin:0 20px 0 -15px}
    .thuthuatwiki-commentStart .more{margin:5px 0 0 -5px;font-size:12px}
    #thuthuatwiki-CheckPop:checked ~ .thuthuatwiki-comment{visibility:visible;opacity:1;top:60px;width: 380px;background-color:var(--widget-bg);color: var(--title-color)}

    #thuthuatwiki-CheckPop:checked ~ .thuthuatwiki-comment + .fullClose{visibility:visible;opacity:1}
    #thuthuatwiki-CheckPop,.thuthuatwiki-PopMenu{display:none}
    .thuthuatwiki-PopMore{display:flex;align-items:center; font-weight:900; color:#262d3d;padding:0 5px}
    .thuthuatwiki-PopMore span{flex-grow:1} .accorIcon{position:relative;flex-shrink:0; display:flex;align-items:center;justify-content:center; width:12px;height:12px;margin-right:15px}
    .thuthuatwiki-PopMenu:checked ~ .thuthuatwiki-PopMore span{color:#f89000}
    .thuthuatwiki-PopMenu:checked ~ .thuthuatwiki-PopMore .accorIcon:before, .thuthuatwiki-PopMenu:checked ~ .thuthuatwiki-PopMore .accorIcon:after{background-color:#f89000}
    .thuthuatwiki-PopMenu:checked ~ .thuthuatwiki-PopMore .accorIcon:after{visibility:hidden;opacity:0}
    .thuthuatwiki-commentStart .content{position:relative;margin-left:-30px;padding-left:32px;overflow:hidden;max-height:0; transition:all .2s ease; opacity:.8}
    .thuthuatwiki-PopMenu:checked ~ .content{max-height:100vh;padding-top:15px;padding-bottom:8px}
    @media screen and (max-width:480px){
        #thuthuatwiki-CheckPop:checked ~ .thuthuatwiki-comment{top:0}
        .thuthuatwiki-commentStart{border-top:1px solid #f1f2f4;margin-top:30px}
        .thuthuatwiki-comment{min-height:100vh;width:100%;top:0;right:0;bottom:0;left:0;padding-top:25px}
        .thuthuatwiki-commentClose{position:absolute;top:8px;right:15px;width:40px;height:40px;background-image:url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 512 512&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z&#39; fill=&#39;%2348525c&#39;/%3E%3C/svg%3E&quot;);background-repeat:no-repeat;background-size:35px;background-position:center;}
        .thuthuatwiki-commentClose:before{content:&#39;Close&#39;;position:relative;right:35px;top:10px;font-size:15px;color:#48525c;}
        .thuthuatwiki-comment:before{display:none}
    }
    
    /* CSS recent comments by thuthuatwiki.top */
    #rc-avatar-plus ul::-webkit-scrollbar{width:0}
    #rc-avatar-plus ul:hover::-webkit-scrollbar{width:5px}
    #rc-avatar-plus ul::-webkit-scrollbar-thumb{background:#ddd}
    #rc-avatar-plus ul{margin:0!important;padding:0;box-sizing:border-box}
    #rc-avatar-plus li{position: relative; clear: both; margin: 0 0 5px 20px!important; padding: 10px 0!important; list-style-type: none!important; float: left; width: 100%; box-sizing: border-box;}
    #rc-avatar-plus img{margin:0!important;padding:0!important;width:40px;height:40px;border-radius:50%}
    #rc-avatar-plus h4{display:none; font-size: 16px; margin: 0!important; margin: 0; position: absolute; top: 8px; left: 65px; z-index: 1; color: #555;}
    #rc-avatar-plus a{position: relative; line-height: 1.3;}
    #rc-avatar-plus a,#rc-avatar-plus a:hover{color:var(--title-color);text-decoration:none}
    #rc-avatar-plus a:after{content:&quot;&quot;;position:absolute;top:0;width:0;height:0;line-height:0}
    #rc-avatar-plus p{margin: 0; padding: 0; font-weight: 400; font-size: 16px; line-height: 1.4;}
    #rc-avatar-plus .rc-author .rc-info,#rc-avatar-plus .rc-admin a{float: left;position:absolute;width:fit-content}
    #rc-avatar-plus .rc-admin .rc-info,#rc-avatar-plus .rc-author a{float: left; margin:0 0 0 55px; width: fit-content;max-width:100%}
    #rc-avatar-plus span {font-size:12px}
    #rc-avatar-plus .rc-author a{word-break:break-word;background:none}
    .thuthuatwiki-comments-more .left {float:left;padding:8px 0 10px 23px;}
    .thuthuatwiki-comments-more .right {float:right;padding:8px 0 20px 0px;}
    .darkMode .thuthuatwiki-comments-more a{color:#fff}
    #totalComments_top {position: relative; top: -9px; left: 9px; font-size: 8px; font-weight: 900; color: white; background: rgb(242 22 22); padding: 3px 4px; border-radius: 30px;animation: text-flicker 4s linear infinite;}
    @keyframes text-flicker {
        0% {opacity:0.1;text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);}
        2% {opacity:1;text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);}
        8% {opacity:0.1;text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);}
        9% {opacity:1;text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);}
        12% {opacity:0.1;text-shadow: 0px 0px rgba(242, 22, 22, 1);}
        20% {opacity:1;text-shadow: 0px 0px rgba(242, 22, 22, 1);}
        25% {opacity:0.3;text-shadow: 0px 0px rgba(242, 22, 22, 1);}
        30% {opacity:1;text-shadow: 0px 0px rgba(242, 22, 22, 1);}
        70% {opacity:0.7;text-shadow: 0px 0px rgba(242, 22, 22, 1);}
        72% {opacity:0.2;text-shadow: 0px 0px rgba(242, 22, 22, 1);}
        77% {opacity:0.9;text-shadow: 0px 0px rgba(242, 22, 22, 1);}
        100% {opacity:0.9;text-shadow: 0px 0px rgba(242, 22, 22, 1);}
    }
</style>
<input id='thuthuatwiki-CheckPop' type='checkbox'/>
<div class='thuthuatwiki-comment'>
    <label class='thuthuatwiki-commentClose' for='thuthuatwiki-CheckPop'/>
    <ul class='thuthuatwiki-commentStart'>
        <li>
            <div id='rc-avatar-plus'/>
            <div class='thuthuatwiki-comments-more'>
                <div class='left'>Hiện <b><span id='totalComments_bottom'/></b> bình luận mới</div>
                <div class='right'><a href='/p/recent-comment.html' target='_blank' title='Xem 1000 bình luận'>Xem thêm<i class='fa fa-angle-right' style='margin:0 0 0 5px'/></a></div>
            </div>
        </li>
    </ul>
</div>
<label class='fullClose' for='thuthuatwiki-CheckPop'/>
<!-- js recent comments by thuthuatwiki -->
<script type='text/javascript'>
    //<![CDATA[
    var copyright_by_thuthuatwiki_dot_top = 'Recent Comments free version 3.2 by http://thuthuatwiki.top';
    nc = 20; // số lượng bình luận
    length_name = 20; // độ dài tên
    length_content = 1000; // độ dài nội dung bình luận
    home_page = 'https://www.thuthuatwiki.com/'; // link blogger
    admin_uri = 'https://www.facebook.com/dinhthanhdat3793/'; // link admin
    no_avatar = 'https://1.bp.blogspot.com/-UeqtbCDcu0Y/YUKpJuik4uI/AAAAAAAAJH4/ITeenpSLvO4gnPG9L4xTMlV31lzvLfdGgCLcBGAsYHQ/s221/thuthuatwiki-img.png'; // avatar ẩn danh
    admin_avatar = 'https://1.bp.blogspot.com/-UeqtbCDcu0Y/YUKpJuik4uI/AAAAAAAAJH4/ITeenpSLvO4gnPG9L4xTMlV31lzvLfdGgCLcBGAsYHQ/s221/thuthuatwiki-img.png'; // avatar admin

    function rc_avatar2(a) {
        -1 != d[u].indexOf("/p/") ? (pn[u] = 1, o = a.entry.title.$t, t[u] = o) : (o = a.feed.title.$t, t[u] = o, num = a.feed.openSearch$totalResults.$t, i = parseInt((num - 1) / 200) + 1, pn[u] = i), u++
    }

    function rc_avatar1(t) {
        tt = t.feed.openSearch$totalResults.$t, tb = t.feed.title.$t, "uri" in t.feed.author[0] && (ura = t.feed.author[0].uri.$t), ima = t.feed.author[0].gd$image.src;
        for (g = 0; g < nc && g < tt && (c = t.feed.entry[g], g != t.feed.entry.length); g++) {
            if (lk = c.link[0].href, lk = lk.split("/"), bid = lk[4], pid = lk[5], cid = lk[8], d[g] = c["thr$in-reply-to"].href, -1 != y && (d[g] = d[g] + "?m=0"), pi[g] = c.gd$extendedProperty[0].value, ti[g] = c.gd$extendedProperty[1].value, p[g] = cid, "content" in c) var e = c.content.$t;
            else if ("summary" in c) e = c.summary.$t;
            else e = "&#8592;";
            if ((e = (e = (e = e.replace(/<br \/>/g, " ")).replace(/@<a.*?a>/g, "")).replace(/<[^>]*>/g, "")).length < length_content) j2[g] = e;
            else {
                var r = (e = e.substring(0, length_content)).lastIndexOf(" ");
                e = e.substring(0, r), j2[g] = e + "&#133;"
            }
            if (a2 = c.author[0].name.$t, a2.length < length_name) a[g] = a2;
            else {
                a2 = a2.substring(0, length_name);
                r = a2.lastIndexOf("");
                a2 = a2.substring(0, r), a[g] = a2 + "&#133;"
            }
            "uri" in c.author[0] && (ur[g] = c.author[0].uri.$t), "http://img1.blogblog.com/img/blank.gif" == c.author[0].gd$image.src ? (im[g] = no_avatar, alt[g] = "no avatar") : (im[g] = c.author[0].gd$image.src, alt[g] = a[g]), -1 != d[g].indexOf("/p/") ? document.write('<script type="text/javascript" src="https://www.blogger.com/feeds/' + bid + "/pages/default/" + pid + '?alt=json-in-script&callback=rc_avatar2"><\/script>') : document.write('<script type="text/javascript" src="' + home_page + "/feeds/" + pid + '/comments/default?alt=json-in-script&max-results=1&callback=rc_avatar2"><\/script>')
        }
    }

    function rc_avatar() {
        var e = "";
        for (e += "<ul>", z = 0; z < nc && z < tt; z++) {
            t[z] = t[z].replace("Comments on " + tb + ": ", "");
            var r = "";
            1 == pn[z] ? r = "#c" : (cp = "commentPage=" + pn[z] + "#c", r = -1 != y ? "&" + cp : "?" + cp), e += '<li class="', ur[z] == ura && im[z] == ima || ur[z] == admin_uri && im[z] == admin_avatar ? e += "rc-admin" : e += "rc-author", e += '"><div class="rc-info"><img alt="' + alt[z] + '" class="rc-avatar" src="' + im[z] + '"/><h4>' + a[z] + '</h4></div><a href="' + d[z] + r + p[z] + '" rel="nofollow" title="' + a[z] + " on " + t[z] + '"><p>' + j2[z] + "</p>", "true" != pi[z] && (e += "<span>" + ti[z] + "</span>"), e += '</a><div class="clear"></div></li>'
        }
        e += "</ul>", document.getElementById("rc-avatar-plus").innerHTML = e
    }
    tt = 0, u = 0, lk = [], d = [], p = [], pn = [], j2 = [], tb = [], t = [], pi = [], ti = [], a = [], im = [], alt = [], ur = [], ura = [], ima = [], ad = "thuthuatwiki", loc = "http://", dot = ".", inf = "top", a3 = location.href, y = a3.indexOf("?m=0"), copyright_by_thuthuatwiki_dot_top == "Recent Comments free version 3.2 by " + loc + ad + dot + inf && document.write('<script type="text/javascript" src="' + home_page + "/feeds/comments/default?alt=json-in-script&max-results=" + nc + '&callback=rc_avatar1"><\/script>');
    //]]>
</script>
<script type='text/javascript'>rc_avatar();</script>
<!-- get số lượng comments by thuthuatwiki -->
<script type='text/javascript'>
    //<![CDATA[
    function totalComments_bottom(json) {
        document.getElementById('totalComments_bottom').innerHTML = json.feed.openSearch$totalResults.$t
    };
    document.write('<script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments_bottom\"><\/script>');
    //]]>
</script>
<script type='text/javascript'>
    //<![CDATA[
    function totalComments_top(json) {
        document.getElementById('totalComments_top').innerHTML = json.feed.openSearch$totalResults.$t
    };
    document.write('<script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments_top\"><\/script>');
    //]]>
</script>


Copy
Các bạn chú ý phần mình tô đỏ:
  • Số lượng bình luận: nc = 20
  • Độ dài tên: length_name = 20
  • Độ dài nội dung bình luận: length_content = 1000
  • Địa chỉ blogger: https://www.thuthuatwiki.com/
  • Link admin: https://www.facebook.com/dinhthanhdat3793/
Bước 2: Chèn icon comment vào vị trí bạn muốn trên blog.(bạn nên để cùng hàng với menu)
Nếu đang dùng mẫu LiteSpot bạn tìm đoạn <div class='tgl-wrap'> và dán đoạn code bên dưới vào sau nó.


<label for='thuthuatwiki-CheckPop'>
<span id='totalComments_top'>1</span><i class='far fa-comments'/></label>
Copy
Bước 3: Cuối cùng bạn nhấn Lưu lại và kiểm tra kết quả.

Tạo trang Recent Comment

Bước 1: Bạn hãy tạo trang mới với tiêu đề là Recent comment.
Bước 2: Copy toàn bộ code bên dưới dán vào phần trang mới vừa tạo.




<script type="text/javascript">
    //<![CDATA[
    // Recent Comments by Thủ Thuật Wiki
    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") ? "http://1.bp.blogspot.com/-7bkcAKdpGXI/UrbyQRqvSKI/AAAAAAAAFmI/oBv_yMeYnMQ/s" + avatarSize + "/blogger.png" : -1 != n.indexOf("blogblog.com/img/openid16-rounded.gif") ? "http://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 + '"><img class="' + i + '" src="' + n + '" alt="' + o + '" width="' + avatarSize + '" height="' + avatarSize + '"/></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 = 1000,
        showAvatar = !0,
        avatarSize = 42,
        roundAvatar = !0,
        characters = 40,
        showMorelink = !1,
        defaultAvatar = "http://1.bp.blogspot.com/-m2JqA8HH-JY/V1Y9Z1SpzpI/AAAAAAAAEEY/jnJ-r_-Ta0UadbOE84Egdea5jfcwPSSvwCLcB/s1600/noimage.png",
        hideCredits = !0,
        numComments = numComments || 5,
        avatarSize = avatarSize || 60,
        characters = characters || 40,
        defaultAvatar = defaultAvatar || "http://1.bp.blogspot.com/-m2JqA8HH-JY/V1Y9Z1SpzpI/AAAAAAAAEEY/jnJ-r_-Ta0UadbOE84Egdea5jfcwPSSvwCLcB/s1600/noimage.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&amp;max-results=1000"></script>
<style>
/* Bình luận gần đây */
  ul.idbcomments{list-style:none;margin:0;padding:0}
  .idbcomments li{margin:8px 0 0;padding:5px 0 5px 5px;display:block;clear:both;overflow:hidden;list-style:none;border:1px solid var(--widget-bg);border-radius: 6px;}
  /*.idbcomments li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:0!important;word-break:break-all;padding:8px 0!important}*/
  .idbcomments li .avatarImage{float:left;margin-right:10px;position:relative;overflow:hidden}
  .idbcomments li img{border-radius:100%;position:relative;overflow:hidden;display:block;width:42px;height:42px}
  .idbcomments li a{font-weight:600;color:var(--title-color)}
  .idbcomments li:hover{border: 1px solid #e9e9e9;}
  .idbcomments a{color:var(--body-color)}
  .idbcomments li span{margin-top:2px;color:var(--title-color);display:block;font-size:12px;line-height:1.4}
  .idbcomments .left {float:left;padding:8px 0 0 0;}
  .idbcomments .right {float:right;padding:8px 0 0 0;}
</style>

Copy
Bước 3: Cuối cùng Xuất bản. Bây giờ khi bạn ấn vào Xem thêm trên Popup Recent Comment thì sẽ được đưa đến trang tổng hợp tất cả bình luận của blog.

Lời kết:

Như vậy ở trên mình đã chia sẻ tới các bạn cách tạo Popup Recent Comment cho Blogspot/Blogger. Mọi thắc mắc hay góp ý hãy để lại nhận xét phía dưới. Chúc các bạn thành công!

Thành Đạt – Tổng hợp và edit

Thuthuatwiki.com

Học để làm - Học để chia sẻ

1 Nhận xét

Mới hơn Cũ hơn