Latest: Download Microsoft All Product Activator | Hot: Active IDM in 1 Click | Blogger Gadget
  • Posts
  • Comments
  • Pageviews

Top-commenter widget in blogger 2013

8 comments
Hi my friend i want to tell u now about how u can add a top commenter widget in your blog. It is very stylish widget for your blog. You can fully satisfied to view top commenter of your blog.

How to add this widget in your blog?

1st step: log in your blog account & then go to Layout
2nd step: then Add A Gadget




3rd step: Then add a HTML/JavaScript



4th step: Then copy bellowing code & paste it HTML/JavaScript



<div id="topkoment">
<style type="text/css">
.top-commenter-line {margin: 0px;border-bottom: 1px solid #ccc;background-color: rgba(206, 206, 206, 0);padding: 5px 3px;}
.top-commenter-avatar {display:inline-block;vertical-align:middle;}
#topkoment {width: 300px;border: 1px solid #ccc;}
#topkoment a {color: #B10C0C;margin-left: 10px;}
.profile-name-link {padding-left: 2px;}
</style>
<script type="text/javascript">
// Top Commentators gadget with avatars, By http://tech-everyday.blogspot.com 2013.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// http://www.blogshear.com/2013/06/stylish-top-commentators-widget-blogger.html
// CONFIG:

var maxTopCommenters   = 10,  // How much?
    minComments        = 1,  // How many comments must top commentator have at least
    numDays            = 0,  // From how many days (ex. 30), or 0 from "all the time"
    excludeMe          = true,  // true: exclude my own comments
    excludeUsers       = ["Anonymous", "someothertoexclude"],  // Exclude these usernames
    maxUserNameLength  = 42,  // 0: don't cut, >4: cut usernames
    txtTopLine         = '<div style="font-weight:bold;display:inline-block;width:2em;text-align:right;"><b>[#].</b></div> [image] [user] ([count])',  // List number
    txtNoTopCommenters = 'No top commentators at this time.',
    txtAnonymous       = '',  // Empty, or Anonymous user name localized if you want to localize
    sizeAvatar         = 32,  // Avatar size
    cropAvatar         = true,
    urlNoAvatar        = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi_M97pv09GZPudc4mLXibabSIguQtdNA0WkDODeHJTsbWCZ5AZDwEsrV699f3rnh72kyHNGFO9l-kfaFdCD2TEdFqIOEmytzzKEPZNRS5-zDeynUk4qq4RQ442i00B7x5VqVGaFuzV50/' + sizeAvatar + '/avatar_blue_m_96.png',  // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
    urlAnoAvatar       = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar,
    urlMyProfile       = '',  // Set if you have no profile gadget on page
    urlMyAvatar        = '';  // Can be empty (then it is fetched) or url to image
// END CONFIG
// 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+'" 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="profile-name-link" 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); // 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>
</div>

You can customize that widget

Do you like this post? Please link back to this article by copying one of the codes below.

URL: HTML link code: BB link code:

8 comments:

  1. Thanks Admin. I am searching that widget for my blog... Thanks again

    ReplyDelete
  2. nice info....thanks for sharing.. very useful for me i will bookmark this for my future needs. Thanks.


    Adobe Dreamweaver CS6 Serial key free download

    ReplyDelete
  3. This article helps me to get bird eye view. This is the gist of all. DigitEMB

    ReplyDelete
  4. Wow this is an awesome post. I just hope it works on my blog Naijcrackgist

    ReplyDelete
  5. Now this post is really a good guide for newbies and even those who are planning to migrate from other platforms to WP. Mine is hosted under WP and I deifnitely agree that WP is one of the best so far and convenient too.
    Joseph Donahue

    ReplyDelete
  6. Now this post is really a good guide for newbies and even those who are planning to migrate from other platforms to WP. Mine is hosted under WP and I deifnitely agree that WP is one of the best so far and convenient too!
    Kelly Hubbard

    ReplyDelete
  7. I actually started another blog in wordpress and I highly recommend it because of its graphics and visuals. I am having trouble though with domain and hosting because I can’t afford maintenance, yet being a student. But I will surely come back to this once I get my own website done. This is really helpful for me!
    Holly Hooper

    ReplyDelete

Recent Comments

ALEXA RANK

Copyright © 2013-2014 Tech-Everyday