Share code popup recent comments for blogger

Name: Dịch vụ mạng xã hội
Brand: Code Pro

recent comments for blogger, popup recent comments, recent comment widget for blogger, comment widget blogger, widget bình luận gần đây cho 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.

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ả!

Sống hết mình !

17 comments

Wind Aug 20, 2021, 7:11:00 AM Aug 20, 2021, 7:11:00 AM

Bạn Nguyễn Phong đây anh
1. Lê Anh Đức Aug 20, 2021, 8:15:00 AM Aug 20, 2021, 8:15:00 AM
  
  Bạn Nguyễn Phong là nhất =))
Nguyễn Quang Linh Aug 20, 2021, 8:39:00 AM Aug 20, 2021, 8:39:00 AM

chất quá anh
1. Lê Anh Đức Aug 20, 2021, 8:51:00 AM Aug 20, 2021, 8:51:00 AM
  
  chất gì đâu :3
Ngô Hoàng Anh Tuấn Aug 20, 2021, 11:36:00 AM Aug 20, 2021, 11:36:00 AM

Amazing, good job e :V
1. Lê Anh Đức Aug 20, 2021, 11:51:00 AM Aug 20, 2021, 11:51:00 AM
  
  oke anh tuấn 2k8 :))
Tống Xuân Trung Aug 20, 2021, 11:59:00 AM Aug 20, 2021, 11:59:00 AM

vip cà chua xí muội :3
1. Lê Anh Đức Aug 20, 2021, 12:18:00 PM Aug 20, 2021, 12:18:00 PM
  
  zip bờ dồ 💪🏻
Lê Vạn Bảo Trọng Aug 20, 2021, 12:14:00 PM Aug 20, 2021, 12:14:00 PM

hay a <#
1. Lê Anh Đức Aug 20, 2021, 12:19:00 PM Aug 20, 2021, 12:19:00 PM
  
  oki em oi <3
Star Cường IT Aug 20, 2021, 12:17:00 PM Aug 20, 2021, 12:17:00 PM

chờ bài này lâu rồi nè :v
1. Lê Anh Đức Aug 20, 2021, 12:20:00 PM Aug 20, 2021, 12:20:00 PM
  
  bài này tâm huyết nên phải chỉnh sửa mấy tháng mới xong anh ạ 🤣
2. Star Cường IT Aug 20, 2021, 1:15:00 PM Aug 20, 2021, 1:15:00 PM
  
  js của em ko áp dụng đc cho blog của a, a mới áp dụng js khác làm bên blog a cũng cái nút khá là ok :v
3. Lê Anh Đức Aug 20, 2021, 1:22:00 PM Aug 20, 2021, 1:22:00 PM
  
  oke luôn anh ơi 😅
Anonymous Nov 13, 2022, 11:24:00 AM Nov 13, 2022, 11:24:00 AM

Thử coi
1. Lê Anh Đức Nov 14, 2022, 8:08:00 AM Nov 14, 2022, 8:08:00 AM
  
  oke =))

Code Pro Software | Công ty Cổ phần Phần mềm Code Pro - Giải pháp chuyển đổi số toàn diện!

Code Pro Software | Công ty Cổ phần Phần mềm Code Pro - Giải pháp chuyển đổi số toàn diện!

Share code popup recent comments for blogger

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

Lời kết

Link 323 - Đóng góp ý kiến của bạn về tính năng của Facebook

Link 237 - Đổi tên Facebook không được chấp nhận

Link 929 - Xác minh danh tính Facebook

Rename tích ẩn - Hướng dẫn đổi tên Facebook ký tự ẩn mới nhất

Link 333 - Đổi tên Facebook chưa đủ 60 ngày