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, Tôi đã 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.


Để 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", "NguyenGia1988"];
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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPGha4vzNpcCupUb-IVW-jjjd685mRTnYw1NxbMBg7sz7pwHyYDMCWqRVlhOOgWiESFY49dlmT7ZRyZ9aJDWzyPKRGs06CO-O1VAUU58zcUioeHOC98x9gvelqhcr0aGGsq_HDX9ukF5Wh/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIfdoC4ebXOpTmaxFLIiaM8npxF7M7pkuXOFMoo7NfJf5cop-FWA4lMTPPRkeww_GK03OA4Xo-Sxfjtb_6GAut7tjD7Bp0ZcWTcdpisI2xdZgPi0kzAe9VWREGbliQWlP-xnHgO1nepYlY/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://nguyengia1988.blogspot.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://nguyengia1988.blogspot.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://nguyengia1988.blogspot.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 !

Tags