Top Commentators Widget with Avatar for Blogger

Best Commentators Widget with Avatar for Blogger will show the name together with the round profile photos of your blog beat reporters. The name of your dynamic comment'slinks to their Google Plus record. The gadget has a choice to prohibit somebody from demonstrating their name in the gadget by simply including their name in the code, you will take in this later. When you introduce this contraption in your blog sidebar you will see the straightforwardness of the gadget outlines, and I'm certain that you will like it. 

The perusers that are remarking in our blog entries is the person who offers life to each blog. Ones they drop a remark, the talk between the writer and the peruser will begin. That is the reason this gadget will help the writer to decide whether who is the most dynamic perusers of your blog who leave a greater number of remarks than other. You can decide whether somebody is your dependable perusers or not, once their name appears in the gadget, that implies they are your faithful perusers/guests that you should give a significance by noting their inquiries and answering to whatever their remarks are. 

When you include this reporters gadget in your blogger sidebar, it builds the shot that your perusers will compose remarks in your articles. Simply suppose one of your guests need a little acclaim, that guest will drop many remarks in your blog all together his/her name to be shown in the blog sidebar. The gadget will likewise fill in as basic gratefulness for those individuals that are remarking in your blog. 

Is it accurate to say that you are intrigued with the gadget? in the event that your answer is yes take after my direction beneath on how you can include it in your own particular blog, Don't stress it's anything but difficult to actualize in blogger.

Steps on How to Add Top Commentators Widget to Blogger

Step 1: Login to your Blogger Dashboard > Go to LAYOUT then click the ADD A GADGET

Step 2: In the pop up window select the HTML/JavaScript option.

Step 3: Select then Copy the code below and Paste it inside the CONTENT area the big empty box. In the title box type "Top Blog Commentators" or whatever title you want.

 <style type="text/css">
.top-commentators {
margin: 3px 0;
border-bottom: 1px dotted #ccc;
}
.avatar-top-commentators {
vertical-align:middle;
border-radius: 30px;
}
.top-commentators .commenter-link-name {
padding-left:0;
}
</style>
<script type="text/javascript">
var maxTopCommenters = 10; 
var minComments = 1;     
var numDays = 0;         
var excludeMe = true;    var excludeUsers =["Anonymous","devidmark","Hieronymus Franck","Humaun Kabir","Janny Simon","Murali Rajesh","OtherUserNameToExclude"]; 
var maxUserNameLength = 42;
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
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/AVvXsEifk1T45XQWoiWnEd34W4XiceXDfQpg6YtnifcvTrNApTSPWknyifkE8Rjd3HlvmM5BD8276C2vDUtnLGno1qVm6UKJxsUMck4RA68HCJgSsBp4eLNhjDLUVYgw1EmlwW_cFx6XSGPF5i3V/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwbfoYA_496_wYxEhcCGGOWjgf0sBWNLOVR7fAZ0lemzzTh5flKwjhmUNWrCmzKAMaRj78CTH3Rj4znKYuEpMOfxCrsWCOJwihzWRCWOiJkiiE3eSv-nvXwIYM-DFTrkb_YBgFFZd-JDdR/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 = 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="avatar-top-commentators" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+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+'">'+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="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;
  });
  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('<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>

Step 4: Click the SAVE button and visit your blog to view your new Top Commentators gadget.

Widget Settings

var maxTopCommenters = 10; 

• The default number of users displayed by default is 10. Just change the number to any number you want.

var excludeUsers = ["Anonymous","devidmark","Hieronymus Franck","Humaun Kabir","Janny Simon","Murali Rajesh","OtherUserNameToExclude"]; 

• To hide your own name or the other username just replace the "OtherUserNameToExclude". You can add more username to exclude by using this format " ", See the example above "Anonymous","devidmark","Hieronymus Franck".

var sizeAvatar = 33;

• You can change the size of the commenter' avatar by changing the 33 to whatever number you want

Final Words

This gadget will include some uniqueness in your blog!. Fill me in as to whether your blog remarks were increment in the wake of including the Top Commentators Widget by composing a remark beneath. On the off chance that you have additionally inquiries with the gadget you can likewise ask me in the remark region. Continue going by folks for all the more new updates, that is all bless your heart!