Hiển Thị Tất Cả Bình Luận Tại Trang Tĩnh Blogger
Hiển thị tất cả bình luận tại trang tĩnh - Tiện ích này giúp cho chúng ta có thể dễ dàng quản lý toàn bộ bình luận có trên blog, bên cạnh đó có thể giúp ta theo dõi được những bình luận gần đây nhất.
Tiện ích này đã có từ lâu rồi nhưng hiện tại vẫn còn sử dụng ngon nên quangsangit sẽ chia sẻ lại cho các bạn.
Demo cực nóng cho anh em tham khảo
Để tạo một trang hiển thị tất cả bình luận các bạn cần tạo một Trang tĩnh
Vào quản trị blog ->
Chèn đoạn code dưới đây vào
<div id='CommentUI'>
<script type="text/javascript">//<![CDATA[
var copyright_by_duypham_dot_info='Recent Comments free version 3.2 by http://duypham.info';
nc=200;
length_name=30;
length_content=300;
no_avatar='https://i.imgur.com/TsS2wN3.png ';
home_page='https://www.quangsangit.com/ ';
admin_uri='https://www.blogger.com/profile/08806039677668174528 ';
admin_avatar='https://i.imgur.com/TsS2wN3.png ';
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 = "←";
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 + "…"
}
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 + "…"
}
"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 AvatarImg() {
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="', e += "CommentBlock", e += '"><div class="AvatarImg"><img alt="' + alt[z] + '" class="AvatarImg" src="' + im[z] + '"/></div><div class="CommentUi"><div class="commentHeader"><span class="userName"><span itemprop="name">' + a[z] + '</span></span><time class="dateTime">' + ti[z] + '</time></div><a href="' + d[z] + r + p[z] + '" rel="nofollow" title="Nhấn vào để xem nhận xét"><div class="commentContent" itemprop="text">' + j2[z] + "</div>", e += '</a></div><div class="clear"></div></li>'
}
e += "</ul>", document.getElementById("CommentUI").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'>AvatarImg();</script>
</div>
Và chèn đoạn CSS này vào
/* Comment All*/
#CommentUI ul{margin:0!important;padding:0}
#CommentUI li{position:relative;padding:8px 12px;border-radius:18px;list-style:none}
#CommentUI .CommentInfo{}
#CommentUI .AvatarImg{display:flex;align-items:center;position:absolute;width:40px;height:40px;border-radius:50%;overflow:hidden;transition:all .2s ease-out;-webkit-transition:all .2s ease-out}
#CommentUI img{margin:0!important;padding:0!important;width:45px;height:45px;border-radius:50%;background:url(https://i.imgur.com/TsS2wN3.png) no-repeat center}
#CommentUI .CommentUi a{color: #343a40;font-size: 13px;}
#CommentUI .CommentBlock .CommentInfo{float:left;position:absolute;width:100%}
#CommentUI .CommentBlock a{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:15px 0 0}
#CommentUI .CommentUi{background:#f0f2f5;margin-left:50px;border-radius:8px;padding:8px 12px}
#CommentUI .CommentBlock a:hover{opacity:.85}
#CommentUI .userName{flex: 0 0 auto;display: flex;align-items: flex-start;font-size: 13px;font-weight: 700;color: #161617;}
#CommentUI .userName span {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 130px;}
#CommentUI .dateTime{font-size: 11px;color: #989b9f;margin-top: -10px;position: absolute;}
@media only screen and (max-width: 640px) {
#CommentUI li {padding: 0;}
#CommentUI li {margin-bottom: 10px;}}
Lưu ý:
- no_avatar='
https://i.imgur.com/TsS2wN3.png '; - home_page='
https://www.quangsangit.com/ '; - admin_uri='
https://www.blogger.com/profile/08806039677668174528 '/; - admin_avatar='
https://i.imgur.com/TsS2wN3.png ';
Thay đổi đường dẫn cho phù hợp với blog của bạn
Code được giải mã và tùy biến lại từ duypham.info. Mọi chi tiết xin liên hệ dưới phần bình luận.
Chúc các bạn thành công