How To Exhibit Meridian Commenter Inwards Blogger

In the past, nosotros induce got already showed yous how to display virtually recent comments inward blogger. However, 1 of our users contacted us bespeak how to display locomote past times commenters inward the sidebar of his blogger site. Comments are the handiest agency of engaging users on your content. You mightiness induce got already noticed such widgets on diverse pop blogs, equally it’s the best agency to characteristic your virtually loyal reader thence that it could motivate novel users to comment as well as hit the same luxury. In this article, nosotros volition demonstrate yous how to demonstrate locomote past times commenter inward blogger.

The really showtime affair yous demand to produce is to login to your blogger trouble organization human relationship past times visiting blogger.com. Once yous are logged in, choose the weblog you’ll similar to add together the locomote past times comment widget. Go to Template >> Edit HTML >> Search for ]]></b:skin> and just higher upwards it glue this code:

.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;
}

Now acquire to Layout >> Add a Gadget >> from the listing of widgets choose Add HTML/JavaScript as well as proceed to the side past times side step.

Now inward the text expanse of the widget, glue the next JavaScript code. This code would locomote responsible for digging, finding as well as displaying the locomote past times commenters of your blog. You tin flaming too fill upwards the tile of the widget i.e. Our Top Commenter or etc according to your needs.


<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 Recent commentators at this time.';
var txtAnonymous = '';
//
var sizeAvatar = 33;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTKUAXmBBgxfi7elTlrypR6p_E1VRhm3Acd0Qtl-vvAqA0IUrwXWikfFouDkNZ209LnVQmLsSc6RZAd63KF5qY8XZM3kVrV6sNBAFVERv1fIv42NlSSjTzoI4IDh4WAON1svOfYmACvLnv/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcNJDuSWIyiQGZYvYAc3_SZh4XxQCDof6lvEKkFpvzftOXce0rRJv90651hOpjlovJN0O-QWLUdjLuZ_Dwg87oLtUr_TQUkV2XJowLInKksAo3WCpjKXY043Aa3n2C8ficXAlmTn2aiwj-/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) furnish i;
  furnish -1;
}}
constituent replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) furnish text;
  var writer = 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="How to Show Top Commenter inward Blogger " src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
  if(maxUserNameLength > three && 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);
  furnish text;
}
var topcommenters = {};
var ndxbase = 1;
constituent showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = novel 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 = novel 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 = novel 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 primal inward topcommenters) tuplear.push([key, topcommenters[key]]);
  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        furnish b[1].count-a[1].count;
    furnish (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 especial = 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>


Once everything is done, relieve the widget past times pressing orangish “Save” clit located towards the bottom as well as the widget volition start appearing at your blog.  Now, it is upwards to yous where yous precisely desire the widget to seem either inward the sidebar or footer. In Layout area, but choose as well as drag the widget to a novel set as well as press “Save Arrangement button”.

We promise this tutorial may induce got helped yous inward learning how to display locomote past times commenters inward blogger sidebar. If yous liked this widget then, produce induce got a await at our Blogger Widgets Inventory. Share this article amongst your friends on Google+, Facebook or twitter.