How to Add Top Commentors Widget to Blogger

Well, its your blog reader and commentors who kept your post alive on the web. Commenting and replying on discussions gives more activity on the blog posts. So it is necessary to know who leaves more comment on your blog I have used JavaScript to do the task. 

The  widget will be displayed like this:-

This Widget displays the Avtar of the Commentors and it is done with JavaScript.

How to Add Top Commentors Widget to Blogger

Step1: Login to Your Blogger Account, Go to Dash Board.

Step2: Navigate to Layout > Add a Gadget > Add HTML/JavaScript Widget.

Step3: Paste the Following code to HTML/JavaScript Box.

<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 = 8;
var minComments = 1;
var numDays = 0;
var excludeMe = true;
var excludeUsers = ["Anonymous", "someotherusertoexclude"];
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/AVvXsEhCTLg1oac1Fzzdy04OmXhYbuqkr52AaA__RS-TwUYXPgp3Ssf6vcSmsgZKldWJKYQ-BRKofago8S0bO_NvRSK4TkVoEcwye2WQ3tH290FIkepl7mEFx_6szMF_6H9UBHSVFQnUmuw8eUpS/s1600/avatar_blue_m_96.png" + sizeAvatar;var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC6c-hPwNsvIwH48lY4jPosFwhj70HDT4WO0o8k8J5Id4EJr0SmwD-VGzgaEQZX0NSNYXxYoF-mpZMRnKdM_PjxBAPn-gjV9_PBa4yvF1Y3S1v6znqCjliCI2FUdbdgjbuKV_p2qT3fjhu/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 tuplesvar 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>

Step4: Click on Save > Save Arrangements. That's all.

Configuring the Widget 

Change Number of Commentors  Displayed: - In this Script, we have set 8 Nos. commentators to be displayed. But if you want to change the number look for  var maxTopCommenters = 8 change this 8 with the number of commentators displayed.

Change the Avtar Size: -To change the avatar size of the commenters, look for var sizeAvatar = 33; and change number with the number of pixels you want.To hide your name or some other username, replace the someotherusertoexclude text between the quotes (to add more, add another comma after the text in red, then type the username you want to exclude between the quotes)