Cara Membuat Top Commentator JSON di Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Cara Membuat Top Commentator JSON di Blog

  Sudah tahukah anda apakah Top Commentator ? Atau yang biasa disebut Komentar Terbanyak, Terbaik, atau apalah terserah para Blogger mau menyebutnya apa. Bagi yang bingung untuk memasang Widget Komentator ini, saya menyediakannya. 

  Penggunaan Widget ini bisa pada Halaman Statis, Postingan, Atau Sidebar, Tergantung anda ingin memasangnya dimana. 

Note :   Jika anda ingin memanggil widgetnya kapan saja dan dimana saja, pasang CSSnya diatas ]]></b:skin> lalu hilangkan kode yang berwarna cokelat, jadi tinggal memasang script dimanapun anda ingin menaruhnya.  

Menaruh CSS dalam ]]></b:skin>.

<b:skin>

....

CSS disini (jangan lupa hilangkan <style type="text/css"> dan </style>)

....

]]></b:skin>

Tidak usah takut memberatkan loading blog anda, ini adalah script JSON.

  Tetapi, jika anda ingin membuat Widget ini dalam postingan, halaman statis, atau sidebar, tinggal pasang Script dibawah CSS ini.

CSS

<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

<script type="text/javascript">

//

// Top Commentators gadget with avatars, by Blitarian4rt.

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

// See http://www.blitarian4rt.com/2013/06/cara-membuat-top-commentator-json-di.html

//

// CONFIG:

var maxTopCommenters = 10;   // 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", "Ahmad Ghulam Azkiya"];     // 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/AVvXsEgCiuXOZZ4h1FWPKENbife-U7ZpE26RdJD5CNviZtCH3E5n0zqiRl5Htosql35PqAzoZkuHgTHaJ_eVWg9puTqwRSApOS2mWNeEE1FOc9KguvTvWvxvdCDNXmt7YdhBXJmdoa5nJwFmFQU/"+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>

Note : Jika anda ingin mengubah jumlah komentar ganti angka pada var maxTopCommenters = 10 dengan jumlah komentar yang ingin anda tampilkan, teks yang berwarna merah, adalah nama yang tidak dimasukkan dalam Top Commentator tersebut.

  Jika anda masih bingung Silahkan berkomentar. Terima Kasih, Salam Blogger !

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Judul :Cara Membuat Top Commentator JSON di Blog
Dipublikasikan oleh:Unknown
Dipublikasian pada :2013-06-01T12:17:00+07:00
Rating : 4.9
Direview oleh : 3765 Orang
Terima Kasih sudah mau membaca artikel saya yang berjudul Cara Membuat Top Commentator JSON di Blog. Copy Paste tidak dilarang kok ! Asal mencantumkan link sumbernya ^_^, sudah 3 Blog saya laporkan dan terhapus lho gara-gara copy paste lho, jadi mohon hati-hati ya.....

Suka Dengan Artikel ini ? Klik tombol dibawah ini, terutama yang Plus One ya !