Bagaimana membuat widget top komentator

Bagaimana sih cara membuat widget Top komentar ?? apasih top komentator itu ?? nah itulah beberapa pertanyaan – pertanyaan di atas yang akan saya jawab melalui artikel di bawah ini.
sebelum ke topik akan saya jelaskan dulu apasih widget top komentator ??yaitu sebuah widget untuk blog yang berfungsi menginformasikan siapa yang paling banyak berkomentar di suatu blog kita.Widget top komentator ini di lengkapi dengan avatar yang berkomentar , peringkat komentar dan jumlah komentar yang pastinya menarik untuk diterapkan di blog kita.
Widget ini bisa anda letakan di halaman baru blog anda atau di gadget di sidebar anda,silahkan anda lihat Demonya disini  Bagaimana apakah anda tertarik ?? Nah,jika anda tertarik untuk menerapkannya di blog anda ikutilah langkah langkah di bawah ini.

Step by step

• Seperti biasa Login dulu ke akun Blog anda, kemudian masuk ke menu dashboard
• Jika anda ingin menambahkan widget top komentator ini di halaman/page baru blog anda maka anda perlu masuk ke menu halaman/page kemudian pilih new page/halaman baru dan masukan script di bawah ini didalam mode HTML
• Tapi jika anda ingin memasang widget untuk gadget baik di sidebar maupun di footer maka yang anda lakukan adalah masuk ke menu Tata Letak/Layout,kemudian tambahkan gadget dan pilih HTML/Javascript ,Beri judul pada kolom content sesuka anda dan pastekan script di bawah 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 fendevils & MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://fendevils.blogspot.com//
// CONFIG:
var maxTopCommenters = 5;   // how big a list of top commentators
var minComments = 1;        // how many comments must top commentator have at least
var numDays = 0;            // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true;       // true: exclude my own comments
var excludeUsers = ["Anonymous", "Nama Authore"];     // exclude these usernames
var 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/AVvXsEhtJBkQdKub96K9nYLB05Yw9cR-pdynNUm4lbTehaEz5-8cEB5slS1uvwhCkJaO3dWRj4WNujJhqJImMe4PjlBChZAYCVtxXwgUNH8WnGMiDeJm9Opl4dM4YzeDpgyl0aU9R0nDI8_fFYc/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var 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>

• jika sudah lakukan Pratinjau/Preview terlebih dahulu dan jika berhasil silahkan Save :c:

KET :
Silahkan anda lihat kode yang saya tandai berwarna merah di atas.
var maxTopCommenters = 5 : maksudnya berapa jumlah peringkat top komentar yang ditampilkan.
Nama Authore                          : silahkan di isi dengan nama anda sesuai display name di komentar jika anda tidak ingin menampilkannya di top komentator

Last note

Adapun kegunaan dari widget ini, bisa anda maknai sebagai apresiasi untuk pengunjung setia anda atau undangan untuk menarik perhatian dan keinginannya agar lebih giat berkomentar diblog anda. Sehingga anda telah memberi reward kepada pembaca setian yang rajin berkomentar di blog anda :) mungkin anda juga ingin membaca cara membuat komentar facebook dan blog berdampingan sekian dulu semoga berhasil