Tạo widget Top Commentators (Xếp hạng người bình luận nhiều nhất) theo phong cách ZingChart cực đẹp cho Blogspot

Có lẽ đây cũng là bài viết được nhiều bạn chờ đợi. Widget Top Commentators là một tiện ích cho Blogger thịnh hành và được người dùng quan tâm mạnh vào khoảng từ tháng 7 đến tháng 9 năm 2017. Thế nhưng tiện ích này rồi cũng ít được các blogger sử dụng bởi sự thiết kế cũng như màu sắc vẫn chưa đáp ứng được xu hướng của các blogger. 
Nắm vững được nhu cầu người dùng, Khanh Blogger đã cho ra mắt một Widget Top Commentators theo một cách thiết kế khác biệt so với các widget trước đây. Tiện ích này được thiết kế dựa theo BXH ZingChart của Zing MP3 rất bắt mắt tạo cảm giác ưa thích với các độc giả cũng như tạo sự chuyên nghiệp cho blog. 


XEM DEMO

Ở tiện ích này sử dụng hoàn toàn JS từ widget phiên bản trước (xem tại đây), chỉ khác ở khâu thiết kế CSS. Để thêm widget này vào blog, chỉ cần đăng nhập Blogger > Bố cục > Thêm tiện ích > HTML/Javascript > Dán toàn bộ đoạn code phía dưới vào khung nhập và bấm lưu:

<style type="text/css">
.so_cmt {font-family: Roboto;color: #fff; padding: 3px; padding-right: 5px; display: block}
.abcbg {
background: #1f0032 url(https://zmp3-static.zadn.vn/skins/zmp3-v5.1/zingchart/images/bg1.png) top center no-repeat;
background-size: cover;
position: relative;
background-color: #1f0032;
max-width: 654px;
height: 400px;
}
.abcbg h3 {padding: 15px; color: #fff; font-size: 20px; font-family: Roboto; margin: 0px!important; font-weight: 500}
.abcbg h3 i {padding-right: 2px}
.top-commentators .stt {float: left; font-family: Roboto; padding: 6px; color: #fff; padding-left: 9px; padding-right: 15px; font-size: 22px}
.add-details {display: block; float: right; margin-top: -2px}
.add-details a {padding: 3px 8px; text-decoration: none; color: #fff; background:#FF6501; font-family: Roboto; border-radius:10px; font-size: 13px}
.time-updated {color: #a2a2a2; font-size: 12px; font-family: Roboto; margin-left: 17px; margin-top: 10px}
.time-updated i {padding-right: 5px}
.time-updated:hover {color: #fff}
.top-commentators:nth-child(3) .stt {color: #4a90e2!important}
.top-commentators:nth-child(4) .stt {color: #00AF64!important}
.top-commentators:nth-child(5) .stt {color: #D8541C!important}
.top-commentators a {color: #4267b2}
.top-commentators {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 11px;
padding: 8px;
}
.top-commentators:hover {background: rgba(255, 255, 255, 0.15)}
.avatar-top-commentators {
vertical-align:middle;
border-radius: 30px;
}
.top-commentators .commenter-link-name {
font-sizeL 14px;
color: #fff;
padding-left:0;
font-family: Roboto;
text-decoration: none;
}
.isc2 {color: #a2a2a2; font-size: 12px}
</style>
<script type="text/javascript">
var maxTopCommenters = 5;
var minComments = 1;
var numDays = 7;
var excludeMe = true;
var excludeUsers = ["Anonymous", "Khanh Blogger"];
var maxUserNameLength = 42;
var txtTopLine = '<div class="stt">[#]</div> [image] [user] <span class="so_cmt"><span class="isc2"> [count] bình luận</span></span>';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';
var sizeAvatar = 33;
var cropAvatar = true;
var urlNoAvatar = "http://lh3.ggpht.com/-pWdg8wLsedo/UmVWQxLdwrI/AAAAAAAAEVk/-z7YgKykkuU/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = 'http://lh3.ggpht.com/-6B6DXCp8dek/UmVPm7D2mOI/AAAAAAAAEVU/Xz-3z2nRpUk/s1600/avatar1.png' + sizeAvatar;
var urlMyProfile = '';
var urlMyAvatar = '';
if(!Array.indexOf) {
Array.prototype.indexOf=function(obj) {
for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
return -1;
}}
function replaceTopCmtVars(text, item, position) {
if(!item || !item.author) return text;
var author = item.author;
var authorUri = "";
if(author.uri && author.uri.$t != "")
authorUri = author.uri.$t;
var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = image.src;
else {
var parseurl = document.createElement('a');
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
}
}
if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
avaimg = urlNoAvatar;
var newsize="s"+sizeAvatar;
avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
if(cropAvatar) newsize+="-c";
avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
var authorName = author.name.$t;
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '';
if(authorUri!="") imgcode = '<a href="'+authorUri+'" target="_blank">'+imgcode+'</a>';
if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
authorName = authorName.substr(0, maxUserNameLength-3) + "...";
var authorcode = authorName;
if(authorUri!="") authorcode = '<a class="commenter-link-name" href="'+authorUri+'" target="_blank">'+authorcode+'</a>';
text = text.replace('[user]', authorcode);
text = text.replace('[image]', imgcode);
text = text.replace('[#]', position);
text = text.replace('[count]', item.count);
return text;
}
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
var one_day=1000*60*60*24;
var today = new Date();
if(urlMyProfile == "") {
var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break;
}
}
if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
if(numDays > 0) {
var datePart = entry.published.$t.match(/\d+/g);
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
if(days > numDays) break;
}
var authorUri = "";
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;
if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
continue;
var authorName = entry.author[0].name.$t;
if(excludeUsers.indexOf(authorName) != -1)
continue;
var hash=entry.author[0].name.$t + "-" + authorUri;
if(topcommenters[hash])
topcommenters[hash].count++;
else {
var commenter = new Object();
commenter.author = entry.author[0];
commenter.count = 1;
topcommenters[hash] = commenter;
}
}
if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) {
ndxbase += 200;
document.write('<script type="text/javascript" src="https://www.khanhblogger.com/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
return;
}
// chuyen doi numtovar TKN
var tuplear = [];
for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
tuplear.sort(function(a, b) {
if(b[1].count-a[1].count)
return b[1].count-a[1].count;
return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
});
var realcount = 0;
for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
var item = tuplear[i][1];
if(item.count < minComments)
break;
document.write('<di'+'v class="top-commentators">');
document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
document.write('</d'+'iv>');
realcount++;
}
if(!realcount)
document.write(txtNoTopCommenters);
}
document.write('<div class="abcbg" style="width: 300px"><h3><span><i class="fa fa-line-chart" aria-hidden="true"></i> BXH Comments</span><div class="add-details"><a href="https://www.khanhblogger.com/p/bxh-comments.html" title="Xem tất cả" target="_top">Xem tất cả</a></div></h3><script type="text/javascript" src="https://www.khanhblogger.com/feeds/comments/default?redirect=false&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>
<script language="javascript" type="text/javascript">
monName = new Array ("1","2","3","4","5","6","7","8","9","10","11","12")
now = new Date
document.write("<div class='time-updated'><i class='fa fa-clock-o'></i>Cập nhật: " +now.getDate()+ "/" +monName[now.getMonth()]+ "/" +now.getFullYear()+ " "+now.getHours()+ ":" +now.getMinutes()+ "</div></div>")
</script>

Sau khi lưu, tùy chỉnh vị trí cho thích hợp và chọn "Lưu sắp xếp" ở bố cục, sau đó tận hưởng thành quả.
Hi vọng bài viết này sẽ giúp ích rất nhiều cho các Blogger từ việc tăng thêm phần chuyên nghiệp và trang trí cho blog nhé.
Chúc các bạn thành công !

Bình luận

  1. vừa mới hỏi Khanh mà đã ra luôn r hihi ( Đến hẹn lại lên ) <3

    Trả lờiXóa
  2. BXH này là nó sẽ tự động tuột cmt đúng ko e?

    Trả lờiXóa
    Trả lời
    1. Vag ạ. code mac dinh 7 ngay tự reset cmt. A tìm numDays de chinh là ok

      Xóa
  3. cảm ơn mọi người nhé <3

    Trả lờiXóa
  4. Cái style này kiểu như ở Zing MP3 á

    Trả lờiXóa
    Trả lời
    1. Đức đang đùa hay nói thật vậy :3

      Xóa
  5. Trả lời
    1. cái này đặt ở slidebar. cần phải res sao ???

      Xóa
  6. Klq nhưng anh ra bài về thủ phạm đằng sau chuyện Nam Hacker đi, nóng lòng quá đây :v

    Trả lờiXóa
    Trả lời
    1. hiện tại thì đang còn lâu vì bên bọn a đang chuẩn bị tổ chức offline.

      Xóa

XEM NHIỀU TRONG TUẦN

Bạn có thể quan tâm