Widget Top Komentator dengan Avatar

     Widget Top Komentator dengan Avatar - Hai semua AiRa LoKa best friend... kali ini saya mau bagi-bagi tutorial tentang Widget Top Komentator dengan Avatar.

     Hai semua... widget top komentator dapat digunakan sebagai apresiasi untuk pengunjung setia anda atau undangan untuk menarik perhatian dan keinginannya agar lebih giat berkomentar diblog anda. Widget ini menampilkan siapa yang paling banyak memberikan komentar pada blog anda, dan juga menampilkan jumlah komentar yang telah mereka berikan. Nah, bagi yang mau pasang, Langsung saja..

Check It Out......

1.  Masuk ke Blogger > Dashboard Blogger > Tata letak > Tambah Gadget > Edit HTML.

2.  Pada kolom konten pastekan script dibawah ini.

<style type="text/css">.top-commenter-line img {-webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);margin-left:5px;margin-right:5px;}.top-commenter-line {margin: 5px 0;border-bottom:1px solid #eee;padding:3px 5px 6px 0px;}.top-commenter-line .profile-name-link {padding-left:0;font-weight:bold;}.top-commenter-avatar {vertical-align:middle;width:30px;height:30px;}</style><script type="text/javascript">//// Top Commentators gadget with avatars, by MS-potilas 2012.// Gets a list of top commentators from all comments, or specified number of days in the past.// See http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html//// CONFIG:var maxTopCommenters = 5;   // how big a list of top commentatorsvar minComments = 1;        // how many comments must top commentator have at leastvar numDays = 0;            // from how many days (ex. 30), or 0 from "all the time"var excludeMe = true;       // true: exclude my own commentsvar excludeUsers = ["Anonymous", "Nama Admin"];     // exclude these usernamesvar maxUserNameLength = 42; // 0: don't cut, >4: cut usernames//var txtTopLine = '<b>[#].</b> [image] [user] ([count])';var txtNoTopCommenters = 'No top commentators at this time.';var txtAnonymous = '';      // empty, or Anonymous user name localized if you want to localize//var sizeAvatar = 56;var cropAvatar = true;//var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbqztS6a7HRPKU9ouURq_g4avFG0L_0Rspp6YqrW5p5p_KH600tgdMMpFbPS4ZXrFMHRJahZhPxW-X7WKBhN7W5GlVaAbrOh3k3YPmsK1NarZ666Dp3WYdkvseKCof2USgq3gksYy7J6Q/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeablevar urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;var urlMyProfile = ''; // set if you have no profile gadget on pagevar urlMyAvatar = '';  // can be empty (then it is fetched) or url to image// config end// 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;      }  }   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.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 style="text-align:right;margin-right:7px;"><a title="Widget Tab View 3 Kolom" style="font:bold 8px Arial,Sans-Serif;color:#666 !important;text-shadow:0px 1px 0px rgba(255,255,255,0.1);opacity:1 !important;visibility:visible !important;display:block !important;" href="http://airaloka.blogspot.com/2013/06/widget-top-komentator-dengan-avatar.html" target="_blank">&#9658;Get this widget</a></div>

3.  Ganti teks yang berwarna biru dengan nama anda.

4.  Simpan.

Selamat mencoba!