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 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 -> Trang -> Trang mới -> Đặt tiêu đề tùy ý

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 = "&#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 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 ]]></b:skin> hoặc cặp thẻ <style></style>

/* 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

You may like these posts

1 Comments

  1. Tô Khắc Giáp
    :))
  1. Để chèn mã hay sử dụng: <i rel="pre">code_here</i>
  2. Để chèn một trích dẫn, hãy sử dụng: <b rel="quote">your_qoute</b>
  3. chèn ảnh, hãy sử dụng: <i rel="image">url_image_here</i>
Để lại bình luận theo chủ đề của bài viết, bình luận có Liên kết sẽ không được hiển thị.
Quản trị viên và tác giả blog có quyền hiển thị, xóa, đánh dấu spam, trên các nhận xét đã đăng
data-ad-format="link"