Xếp hạng bình luận (Top Commentators Widget) có Avatars cho Blogger

Cách làm:
Đăng nhập Blogger ~> Vào Bố cục ~> Thêm tiện ích HTML/Javascript
Dán đoạn code sau vào hộp HTML/Javascript rồi Lưu lại

<style type="text/css">
.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}
</style>
<script type="text/javascript">
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html
//
// CONFIG:
var maxTopCommenters = 5;   // how big a list of top commentators
var minComments = 1;        // how many comments must top commentator have at least
var numDays = 0;            // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true;       // true: exclude my own comments
var excludeUsers = ["Anonymous", "someotherusertoexclude"];     // exclude these usernames
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';      // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 25;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbJEsAsszN0ASRwG7t1uFzMM43RiZriN4CgCT65CS-M3LC8rU6-w0yQoIM38GVokrS_OScAlIrKfiGr2hjJ19l9zFjY7s23ZKcYI5KkSXAKjqM2qWPzD7214x5t2OfSL3TBblWDrupjhk/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = '';  // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
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 = author.gd$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 = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = ''+imgcode+'';
 
  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="profile-name-link" 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); // assume ISO 8601
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
 
      //Calculate difference btw the two dates, and convert to days
      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="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  }
 
  // convert object to array of tuples
  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;
  });
 
  // list top topcommenters:
  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-commenter-line">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
}  
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

Trong đó:

maxTopCommenters: số lượng người nhận xét nhiều được hiển thị
minComments: số nhận xét tối thiểu để được hiển thị ở bảng xếp hạng
numDays: xếp hạng trong vòng bao nhiêu ngày ( Mặc định = 0 thì sẽ tính tất cả, ví dụ = 30 thì là xếp hạng nhận xét trong vòng 1 tháng) (tối đa 500 nhận xét)
excludeMe: true : người dùng nặc danh
excludeUsers: tên người dùng nặc danh
maxUserNameLength: số ký tự dài nhất hiển thị tên người nhận xét

txtTopLine: Một số biến : [#], [image], [user] và [count]. [#] để đánh số thứ tự, [image] là avatar người nhận xét, [user] là tên người nhận xét và [count] hiển thị số nhận xét. Bạn có thể dùng html để tùy biến giao diện cho riêng mình.
txtNoTopCommenters: Hiển thị khi danh sách xếp hạng chưa có ai
txtAnonymous: "Anonymous" người dùng nặc danh
urlMyAvatar: nếu trueAvatars = false, đặt url avatar của bạn vào đây
urlMyProfile: nếu bạn không có profile gadget, đặt url hồ sơ của bạn ở đây
urlAnoAvatar: avatar cho người dùng nặc danh
urlNoAvatar: những người chưa thiết lập hình ảnh hồ sơ cá nhân, đang dùng logo Blogger. Bạn có thể ghi đè link ảnh khác nếu bạn muốn.

cropAvatar: true - avatar vuông hoặc false - avtar tròn
sizeAvatar: kích thước avatar

Cấu hình

Phần trên có giới thiệu một số biến trong code, bình thường bạn chỉ cần quan tâm và chỉnh sửa một số biến sau:
maxTopCommenters = 5 : hiển thị 5 người nhận xét nhiều nhất
numDays = 0 : Xếp hạng tất cả. Nếu muốn xếp hạng theo tháng thì sửa 0 thành 30, tuần thì sửa 0 thành 7 (Các bạn nên để 0 hoặc 7 vì nếu để 30 thì có tháng có 30 ngày nhưng có tháng lại có 28,29 hay 31 ngày -_-)
sizeAvatar = 25 : kích thước avatar - 25px
cropAvatar = true : avatar vuông. Muốn để avtar tròn thì sửa true thành false
txtTopLine: Dùng html và css để thay đổi giao diện. Demo ở trên là mẫu đơn giản, dưới đây sẽ là một số mẫu xếp hạng đẹp cho bạn lựa chọn

Mẫu 1

1, Sửa sizeAvatar = 36

var sizeAvatar = 36;

2, Thay đoạn css

<style type="text/css">
.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}
</style>

bằng đoạn css này:

<style type="text/css">
.top-commenter-line {margin: 3px 0;display:block;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;float:left;margin-right:10px;}
.top-commenter-line h4 {margin:0;padding:0;}
.top-commenter-line span {color:#555;font-size:10px;font-style:italic;}
</style>

3, Thay đoạn code

var txtTopLine = '<b>[#].</b> [image] [user] ([count])';

bằng đoạn code này:

var txtTopLine = '[image] <h4>[user]</h4> <span>[count] Nhận xét</span>';

Mẫu 2

1, Sửa sizeAvatar = 15

var sizeAvatar = 15;

2, Thay đoạn css

<style type="text/css">
.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}
</style>

bằng đoạn css này:

<style type="text/css">
.top-commenter-line {margin: 3px 0;padding:5px;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {position:absolute;bottom:-5px;right:-5px;width:15px;height:15px}
.top-item-thumbnail {float:left;margin-right:10px;width:36px;height:36px}
.top-item-info {overflow:hidden;word-wrap:break-word}
.top-item-info h4 {margin:0;padding:0;}
.top-item-info span {color:#555;font-size:10px;font-style:italic;}
.ol{position:relative}
.ol{background-image:url(https://lh5.googleusercontent.com/-TFh2lJda5nQ/VIlG9iF7qnI/AAAAAAAAAbM/MhbHh82aHpg/s555/sprites.png)}
.ol.st{background-position:-40px -152px}
</style>

3, Thay đoạn code

var txtTopLine = '<b>[#].</b> [image] [user] ([count])';

bằng đoạn code này:

var txtTopLine = '<div class="top-item-thumbnail ol st">[image]</div> <div class="top-item-info"><h4>[user]</h4> <span>[count] Nhận xét</span></div>';

Vậy là xong rồi !