Chào mừng các bạn đã quay trở lại Blog của NamIT
Hôm nay mình chia sẻ cho các bạn Khung Xếp Hạng Bình Luận Đẹp cho Blogspot mà mình sưu tầm được. Khung được bố trí đẹp, chạy mượt và hover đẹp.

Demo

Demo
Click here

Cách thực hiện như sau:
1. Bạn tạo một widget HTML/Javascript rồi dán toàn bộ code này vào:

<style type="text/css">
.so_cmt {font-family: Roboto;color: #fff; padding: 3px; padding-right: 5px; display: block}
.abcbg {
background: #1f0032 url(https://uphinhnhanh.com/images/2018/11/30/www.NamIT.com-2.jpg) 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:#ff9900; 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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBueQDOu4yLftUT1P6keDKdgZ7lH1UUeGcCyM14wTKYQKFUGM48MPprf7r-jQhsUpdrdoSs3teZaAd0CV6tDvVvj7aJDdaIB7Bpz-2Jf9LJIEjruD-7wEw_HXIH4TjPdW3za9tuIsLVrd_/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhww9ryMvj5ZDOE_sMBDPasYA673Ksk8D9qHJ23-CdFDZJ1xCOgxJFXcqaQjCIj21JbcjaVrH70BCe1UK8TqFkQ7sH31r0WtGDCv2AMuyAeYP57w3pNbuTKl3E62f9JmwrmqwYua_rMH_k8/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://namittn.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> TOP BÌNH LUẬN</span><div class="add-details"><a href="https://namittn.blogspot.com/" title="Xem tất cả" target="_top">Xem tất cả</a></div></h3><script type="text/javascript" src="https://namittn.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'><center><i class='fa fa-clock-o'></i>Cập nhật: " +now.getDate()+ "/" +monName[now.getMonth()]+ "/" +now.getFullYear()+ " "+now.getHours()+ ":" +now.getMinutes()+ "</center></div></div>")
</script>

2. Các bạn save lại và thưởng thức tuyệt phẩm nhé. Chúc các bạn thành công!