Hướng dẫn tạo Popup Recent Comment cho Blogspot/Blogger

Hướng dẫn tạo Popup Recent Comment cho Blogspot/Blogger
Xin chào các bạn, chào mừng các bạn trở lại với chuyên mục thủ thuật hay trên blog của Techzezo. 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 Blogspot/Blogger.
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 blog này.
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:
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.

Thực hiện

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 Techzezo -->
<style>
    /* CSS popup comment by Techzezo.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}
    .techzezo-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;}  

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

    #techzezo-CheckPop:checked ~ .techzezo-comment + .fullClose{visibility:visible;opacity:1}
    #techzezo-CheckPop,.techzezo-PopMenu{display:none}
    .techzezo-PopMore{display:flex;align-items:center; font-weight:900; color:#262d3d;padding:0 5px}
    .techzezo-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}
    .techzezo-PopMenu:checked ~ .techzezo-PopMore span{color:#f89000}
    .techzezo-PopMenu:checked ~ .techzezo-PopMore .accorIcon:before, .techzezo-PopMenu:checked ~ .techzezo-PopMore .accorIcon:after{background-color:#f89000}
    .techzezo-PopMenu:checked ~ .techzezo-PopMore .accorIcon:after{visibility:hidden;opacity:0}
    .techzezo-commentStart .content{position:relative;margin-left:-30px;padding-left:32px;overflow:hidden;max-height:0; transition:all .2s ease; opacity:.8}
    .techzezo-PopMenu:checked ~ .content{max-height:100vh;padding-top:15px;padding-bottom:8px}
    @media screen and (max-width:480px){
        #techzezo-CheckPop:checked ~ .techzezo-comment{top:0}
        .techzezo-commentStart{border-top:1px solid #f1f2f4;margin-top:30px}
        .techzezo-comment{min-height:100vh;width:100%;top:0;right:0;bottom:0;left:0;padding-top:25px}
        .techzezo-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;}
        .techzezo-commentClose:before{content:&#39;Close&#39;;position:relative;right:35px;top:10px;font-size:15px;color:#48525c;}
        .techzezo-comment:before{display:none}
    }
    
    /* CSS recent comments by Techzezo.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}
    .techzezo-comments-more .left {float:left;padding:8px 0 10px 23px;}
    .techzezo-comments-more .right {float:right;padding:8px 0 20px 0px;}
    .darkMode .techzezo-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='techzezo-CheckPop' type='checkbox'/>
<div class='techzezo-comment'>
    <label class='techzezo-commentClose' for='techzezo-CheckPop'/>
    <ul class='techzezo-commentStart'>
        <li>
            <div id='rc-avatar-plus'/>
            <div class='techzezo-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='techzezo-CheckPop'/>
<!-- js recent comments by Techzezo -->
<script type='text/javascript'>
    //<![CDATA[
    var copyright_by_techzezo_dot_top = 'Recent Comments free version 3.2 by http://techzezo.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.techzezo.top/'; // link blogger
    admin_uri = 'https://www.facebook.com/dinhthanhdat3793/'; // link admin
    no_avatar = 'https://1.bp.blogspot.com/-UeqtbCDcu0Y/YUKpJuik4uI/AAAAAAAAJH4/ITeenpSLvO4gnPG9L4xTMlV31lzvLfdGgCLcBGAsYHQ/s221/TechZezo-img.png'; // avatar ẩn danh
    admin_avatar = 'https://1.bp.blogspot.com/-UeqtbCDcu0Y/YUKpJuik4uI/AAAAAAAAJH4/ITeenpSLvO4gnPG9L4xTMlV31lzvLfdGgCLcBGAsYHQ/s221/TechZezo-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 = "techzezo", loc = "http://", dot = ".", inf = "top", a3 = location.href, y = a3.indexOf("?m=0"), copyright_by_techzezo_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 Techzezo -->
<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 = 100
  • Địa chỉ blogger: https://www.techzezo.top/
  • 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='techzezo-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 Techzezo
        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
    DMCA.com Protection Status

    Techzezo.top

    To maintain and develop the Blog, we have Adsense attached. Hope you don't hesitate to help me 1 click Adsense.

    4 Comments

    Previous Post Next Post

    Recent Post

    Features