Cara Membuat Widget Top Komentator - Top Komentator ? Haha ini sebuah widget yang dibuat dengan tujuan apa saya tidak tahu perrsis , tapi yang jelas hal ini tentu ada untung ruginya . 

Keuntungan


Keuntungan dari memasang widget ini mungkin akan membuat admin atau pengunjung bisa tau sudah ada siapa saja dan sudah berapa saja komentar yang ada di blog tersebut . Dan pengunjung juga bakal tau seberapa ramai blog yang memasang widget komentar ini .

Kerugian


Kerugian ada untuk para blog baru yang belum ada komentar atau baru sedikit yang berkomentar . Kenapa ? Kan gak lucu sekali jika status top komentator dipegang oleh si pemilik blog .

Mungkin ada setting tambahan untuk widget ini yang membuat admin blog tidak muncul dan mungkin akan dibahas dilain kesempatan . karena yang sekarang akan kita bahas adalah cara membuat top komentator widget untuk dipasang di blog . Sebenarnya lebih tepatnya bukan membuat karena sudah jadi melainkan cara memasang nya saja dansaya bukan orang yang ahli menjelaskan mengenai JavaScript yang membentuk widget ini .

So , langsung saja kita pasang .

Cara Memasang Widget Top Komentator


- Buka blog dan temukan layout menu disebelah kiri panel menu
- Klik New Gadget
- HTML/JavaScript masih jadi pilihan
- Paste Script dibawah ini tepat di konten area HTML

<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 Esbepe 2013.

// Gets a list of top commentators from all comments, or specified number of days in the past.

// See http://esbepe-sbp.blogspot.com/2013/07/cara-membuat-widget-top-komentator-di-Blog-Terbaru.html

// Thanks MS-Potilas 2012

//

// 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 Anda"];     // 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 = "http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s"+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>

<br />

<small>See the How to make a <a target="_blank" href="http://goblogination.blogspot.com/2013/07/cara-membuat-widget-top-komentator-di-Blog-Terbaru.html" title="Top Commentator From This Blog">Top Commentator Widget</a></small>

Selanjutnya klik simpan

Note :


Lihat huruf yang saya perbesar itu , ganti kata tersebut dengan nama anda .

That's it dan semoga bermanfaat .