Share code popup recent comments for blogger

Hello, chào mừng các bạn đến với chuyên mục thủ thuật blogger của Code Pro. Theo yêu cầu của bạn Nguyễn Phong giấu tên gửi về Code Pro thì hôm này mình sẽ chia sẻ source code popup recent comments, tạm dịch ra là bật lên bình luận gần đây.

Share code popup recent comments for blogger

Code này là sự kết hợp độc đáo giữa recent comment và hiệu ứng Popup. Nói chung là gọn gàng, đơn giản, dưới đây là hình ảnh minh hoạ:

Demo popup recent comments for blogger

Các bước thực hiện

Bước 1: Copy toàn bộ source code dưới đây:

<!-- Popup recent comment by Code Pro -->
<style>
    /* CSS popup comment by Lê Anh Đức */
    .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}
    .codepro-comment{position:fixed;opacity:0;visibility:hidden;z-index:999999;overflow-y:auto;top:0;right:20px;background:#fff;border:1px solid #ddd;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;}  
    .codepro-comment:before{content:"";position:fixed;top:0;right:30px;border:10px solid;border-color:transparent transparent #fff transparent;opacity:0;visibility:hidden;transition:all .3s ease;}  
    .codepro-comment li{display:block;align-items:center;margin:0 20px 0 -15px}
    .codepro-commentStart .more{margin:5px 0 0 -5px;font-size:12px}
    #codepro-CheckPop:checked ~ .codepro-comment{visibility:visible;opacity:1;top:80px}
    #codepro-CheckPop:checked ~ .codepro-comment:before{visibility:visible;opacity:1;top:62px}
    #codepro-CheckPop:checked ~ .codepro-comment + .fullClose{visibility:visible;opacity:1}
    #codepro-CheckPop,.codepro-PopMenu{display:none}
    .codepro-PopMore{display:flex;align-items:center; font-weight:900; color:#262d3d;padding:0 5px}
    .codepro-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}
    .codepro-PopMenu:checked ~ .codepro-PopMore span{color:#f89000}
    .codepro-PopMenu:checked ~ .codepro-PopMore .accorIcon:before, .codepro-PopMenu:checked ~ .codepro-PopMore .accorIcon:after{background-color:#f89000}
    .codepro-PopMenu:checked ~ .codepro-PopMore .accorIcon:after{visibility:hidden;opacity:0}
    .codepro-commentStart .content{position:relative;margin-left:-30px;padding-left:32px;overflow:hidden;max-height:0; transition:all .2s ease; opacity:.8}
    .codepro-PopMenu:checked ~ .content{max-height:100vh;padding-top:15px;padding-bottom:8px}
    @media screen and (max-width:480px){
        #codepro-CheckPop:checked ~ .codepro-comment{top:0}
        .codepro-commentStart{border-top:1px solid #f1f2f4;margin-top:30px}
        .codepro-comment{min-height:100vh;width:100%;top:0;right:0;bottom:0;left:0;padding-top:25px}
        .codepro-commentClose{position:absolute;top:8px;right:15px;width:40px;height:40px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='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' fill='%2348525c'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:35px;background-position:center;}
        .codepro-commentClose:before{content:'Close';position:relative;right:35px;top:10px;font-size:15px;color:#48525c;}
        .codepro-comment:before{display:none}
    }
    /* CSS darkmode popup comment */
    .darkMode .codepro-comment,.darkMode .codepro-PopMore{background:#2d2d30;color:#fefefe;border:none}
    .darkMode .codepro-comment:before{border-color:transparent transparent #2d2d30 transparent}
    .darkMode .codepro-comment li,.darkMode .codepro-commentStart{border-color:rgba(255,255,255,.1)}
    .darkMode .codepro-comment p{color:#fff}
    .darkMode .codepro-comment span{color:#fff}
    /* CSS recent comments by Lê Anh Đức */
    #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;overflow:auto;box-sizing:border-box}
    #rc-avatar-plus li{position: relative; clear: both; margin: 0 0 5px!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:#444!important;text-decoration:none}
    #rc-avatar-plus a:after{content:"";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}
    .codepro-comments-more .left {float:left;padding:8px 0 10px 0;}
    .codepro-comments-more .right {float:right;padding:8px 0 20px 0;}
    .darkMode .codepro-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='codepro-CheckPop' type='checkbox' />
<div class='codepro-comment'>
    <label class='codepro-commentClose' for='codepro-CheckPop'></label>
    <ul class='codepro-commentStart'>
        <li>
            <div id='rc-avatar-plus'></div>
            <div class='codepro-comments-more'>
                <div class='left'>Hiện có <b><span id='totalComments_bottom'></span></b> bình luận</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'></i></a></div>
            </div>
        </li>
    </ul>
</div>
<label class='fullClose' for='codepro-CheckPop'></label>
<!-- js recent comments by Duy Phạm -->
<script type='text/javascript'>
    //<![CDATA[
    var copyright_by_duypham_dot_info = 'Recent Comments free version 3.2 by http://duypham.info';
    nc = 20; // số lượng bình luận
    length_name = 20; // độ dài tên
    length_content = 100; // độ dài nội dung bình luận
    home_page = 'https://www.code.pro.vn/'; // link blogger
    admin_uri = 'https://www.facebook.com/leanhduc.pro.vn/'; // link admin
    no_avatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgho8BlJ4qgBtNEvwN3bXOqi9KHgIEGcup6TS9_SoY1Fbr2P9G__gtDCXJMvV1vbpPBBYlK-mWAS5esD2tiFPLeunuJspwi8C9lT4Pd_lDrCS3VEmnxWDR0IYNTLai0nL_PDDIrRwO5Am90/s16000/favicon-1000x1000.png'; // avatar ẩn danh
    admin_avatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgho8BlJ4qgBtNEvwN3bXOqi9KHgIEGcup6TS9_SoY1Fbr2P9G__gtDCXJMvV1vbpPBBYlK-mWAS5esD2tiFPLeunuJspwi8C9lT4Pd_lDrCS3VEmnxWDR0IYNTLai0nL_PDDIrRwO5Am90/s16000/favicon-1000x1000.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 = "duypham", loc = "http://", dot = ".", inf = "info", a3 = location.href, y = a3.indexOf("?m=0"), copyright_by_duypham_dot_info == "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 Lê Anh Đức -->
<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>

Các bạn có thể thay đổi các giá trị dưới đây tuỳ thích:

• Số lượng bình luận: nc = 20;
• Độ dài tên: length_name = 20;
• Độ dài nội dung: length_content = 100;
• Link blog: home_page = 'https://www.code.pro.vn/';
• Link admin: admin_uri = 'leanhduc.pro.vn';
• Avatar ẩn danh: no_avatar = '...1000x1000.png';
• Avatar admin: admin_avatar = '...1000x1000.png';

Bước 2: Dán toàn bộ code phía trên (đã chỉnh sửa) vào trước thẻ </body>

Bước 3: Chèn biểu tượng comment vào vị trí tuỳ thích (nên để trên thanh menu)

<label for='codepro-CheckPop'>
    <span id='totalComments_top'/>
    <svg class='line' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><line x1='13.9394' x2='13.9484' y1='10.413' y2='10.413'></line><line x1='9.9304' x2='9.9394' y1='10.413' y2='10.413'></line><line x1='5.9214' x2='5.9304' y1='10.413' y2='10.413'></line><path d='M17.0710351,17.0698449 C14.0159481,20.1263505 9.48959549,20.7867004 5.78630747,19.074012 C5.23960769,18.8538953 1.70113357,19.8338667 0.933341969,19.0669763 C0.165550368,18.2990808 1.14639409,14.7601278 0.926307229,14.213354 C-0.787154393,10.5105699 -0.125888852,5.98259958 2.93020311,2.9270991 C6.83146881,-0.9756997 13.1697694,-0.9756997 17.0710351,2.9270991 C20.9803405,6.8359285 20.9723008,13.1680512 17.0710351,17.0698449 Z'></path></g></svg>
</label>

• Copy toàn bộ code phía trên và thêm vào vị trí bạn muốn.
• Có thể thay đổi biểu tượng comment tuỳ ý (SVG)

Bước 4: Lưu lại!

Lời kết

Trên đây, là toàn bộ source code và hướng dẫn thêm bình luận gần đây với hiệu ứng popup vào blogger. Nếu có bất cứ thắc mắc nào hãy comment ngay phía dưới cho mình biết nhé. Chúc các bạn thành công và có một ngày làm việc thật hiệu quả!

Copyright © Code Pro