Top Commentators Widget with Avatar for Blogger

Top Commentators Widget with Avatar for Blogger

This Top Commentators Widget with Avatar for Blogger will display the name together with the round profile pictures of your blog top commentators. The name of your active comment's links to their Google Plus account. The widget has an option to exclude someone from showing their name in the widget by just adding their name in the code, you will learn this later. Once you install this gadget in your blog sidebar you will see the simplicity  of the widget designs, and I'm sure that you will like it. 

The readers that are commenting in our blog posts is the one who gives life to every blog. Ones they drop a comment, the discussion between the author and the reader will start. That's why this widget will help the author to determine if who is the most active readers of your blog who leave more comments than other. You can determine if someone is your loyal readers or not, once their name shows in the widget, that means they are your loyal readers/visitors that you must give an importance by answering their questions and replying to whatever their comments are. 

When you add this commentators widget in your blogger sidebar, it helps to increase the chance that your readers will write comments in your articles. Just imagine if one of your visitors want a little fame, that visitor will drop many comments in your blog in order his/her name to be displayed in the blog sidebar. The widget will also serve as simple appreciation for those people that are commenting in your blog. 

Related Pots: Add Recent Comments Widget with Avatars to Blogger |Add Simple random Posts Widget To Blogger | Floating Social Media button Widget or Blogger | Simple Recent Posts Widget for Blogger

Are you interested with the widget? if your answer is yes follow my instruction below on how you can add it in your own blog, Don't worry it's very easy to implement 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/AVvXsEjeY_XkjgjN-KeFOI_La8Y2XGxiW_En50n9dD_s5_d0hElCpi_l0BIy88cIGES-iJOv7HBKF21H1ZOyAnbHOo_0hKHv3mkllKvB9jayGOu472Pw1AsR4Jjpw_y9f9pUOtElMdfeUxY6FDRU/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkiljcboVl-T_1ylkVET4fQdQGircZlnNEXeDEQZqgjpItBHG6wl0VZpM2_1n8PlStoHvLKXdN1c03zxFLXl-Ict8-lykw1SCFXp7bz91bSVmYJIzrfnAvVcEvwdnwwEBTthO8u4mUk9tL/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 widget will add some uniqueness in your blog!. Let me know if your blog comments were increase after adding the Top Commentators Widget by writing a comment below. If you have further questions with the widget you can also ask me in the comment area. Keep on visiting guys for more fresh updates, that's all thank you!

Comments

Post a Comment

Popular posts from this blog

Binbox.io Review - Get Paid to Share your Links Online

Image
Binbox.io is a publisher network where you can earn real money by sharing links online, You can share your link in blogs, websites and of course social media like Facebook, Twitter and etc. The first service offered by Binbox.io was like with Pastebin.com but with unique features because you can encrypt your pastes in Binbox. You can share your pastes with password or decrypt key. Decrypt key is the unique characters and numbers that need to be enter before someone can view your paste.  Example of Pastes Without Password:   http://binbox.io/8lTGM#gbKkZfTR   With Password:   http://binbox.io/8lTGM  and this is the password "#gbKkZfTR " After 3 years of success of paying and good feedback from the publisher. Binbox launched their new service it's the URL shortener same with Adf.ly and Shorte.st but instead of putting skip ads and waiting time they replaced it with Captcha to avoid auto click bot. Another beautiful thing with Binbox is they don't have pop-up advertis
Read more

How To Download Spotify Music For Free Using SpotDown

Image
How To Download Spotify Music For Free Using SpotDown Today I will show the method on how you can download Spotify music for free without buying premium account. We all know that Spotify is popular music streaming application. Spotify offers both free and premium subscription. The free subscription is (160kbps) with audio and banner advertisements and Spotify Premium (up to 320kbps) no advertisement at all plus unlimited music download but you need to pay for around $3 a month.  Many of us are music lover everywhere we are music is our scape from reality. The nature of human is to get something without paying. That's why many people are searching on how they can download the songs in Spotify for free, so that they can listen to it even if they are not connected to the internet. If you're one of those people your wish has been granted someone around this planet created a program called SpotDown. SpotDown is a simple portable application that is now available for Windows OS that
Read more

Huge Lists Of Onion Deep Web Links

Image
Huge Lists Of Onion Deep Web Links Here is the  Huge Lists Of Onion Deep Web Links . Remember that some .onion websites can be unstable or non static so appear offline sometimes. I already tested the links below and some of them are working and the others are not working.  If your not familiar with .onions website please read my article about How to Surf The Web Anonymously Using Tor Browser to understand how TOR Brrowser works. And also read my article about What is deep Web And How To Access It . Those two article are connected o each other, and this lists of .onion website below is you need to explore the deep web. All the .onions deep web website below are from  deepweblinks.org  and securityzap.com. Just click the link below to access it. Thousands of Onion websites are added this  2016, all the links are working as of February 2016. HIDDEN SERVICE LISTS AND SEARCH ENGINES  .ONION WEBSITES http://3g2upl4pq6kufc4m.onion/  – DuckDuckGo Search Engine http://xmh57jrzrnw6insl.onio
Read more