Phản hồi email
Nhập Thông Tin
Giới Tính
Send

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 ModMobile. Theo yêu cầu của bạn Hương Giang giấu tên gửi về ModMobile thì hôm này mình sẽ chia sẻ source code bật lên bình luận gần đây.

Share code popup recent comments for blogger
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
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 ModMobile -->
<style>
/* CSS popup comment by Nguyễn Xuân Dũng */
.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>

<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.modmobile.online/'; // link blogger
admin_uri = 'https://www.facebook.com/nguyendunghehehe'; // link admin
no_avatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtQFNcygO1sMKfqe3WElFOvBo7BvF5QngGy0P0YWgCOb3ILFdH3IqxOlJwxq2nIWJGE2u4vtSn_c5JyB0MwUSGylWTOlMBYefeR6gXvf7hd_Sx_n5l6uh3N2fZ7QdoUfE5FZ7G13Yzg5pTR7nR6z3pQTOKhl39HV_90LUbawU95GLsL8W4Q8teUg/s500/_Pngtree_code_icon_design_vector_3657923-removebg-preview.png'; // avatar ẩn danh
admin_avatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtQFNcygO1sMKfqe3WElFOvBo7BvF5QngGy0P0YWgCOb3ILFdH3IqxOlJwxq2nIWJGE2u4vtSn_c5JyB0MwUSGylWTOlMBYefeR6gXvf7hd_Sx_n5l6uh3N2fZ7QdoUfE5FZ7G13Yzg5pTR7nR6z3pQTOKhl39HV_90LUbawU95GLsL8W4Q8teUg/s500/_Pngtree_code_icon_design_vector_3657923-removebg-preview.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.modmobile.online/';
  • Link admin: admin_uri = 'modmobile.online';
  • 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ỳ ý 

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

See Also :
ModMobile

Subscribe YouTube ModMobile