» » » » » 2 Widget Top Commentators Keren untuk Blog Anda

2 Widget Top Commentators Keren untuk Blog Anda

Seperti pada rubrik olahraga yang ada di media-media berita sering tersedia kolom top commentator. Pada kolom tersebut terdapat komentar-komentar pemirsanya. Dengan sering muncul di media sebagai komentator maka boleh jadi orang tersebut akan senang. Contoh lainnya yaitu ketika musim Pilkada saya pernah memberikan komentar-komentar pada sebuah grup media sosial milik media cetak di kota tempat saya tinggal. Mungkin karena komentar saya dianggap bagus jadi mereka meletakkan komentar saya di atas rubrik kolom tentang Pilkada tersebut. Efeknya, saya jadi semakin senang memberikan komentar di sana dan menjadi sering membeli media cetaknya. Begitu juga blog yang sedang Anda kelola, bisa saja ada komentator yang sering meninggalkan komentar di blog Anda akan menjadi pelanggan setia yang selalu mengunjungi dan meninggalkan komentar pada setiap artikel baru Anda.

Komentar yang terletak di pinggir atau di atas kolom rubrik tersebut saya ibaratkan sebagai widget pada blog. Komentar tersebut bisa muncul pada halaman depan atau pada halaman artikel. Jadi akan muncul sebagai top commentator. Apa bisa membuat widget seperti itu? Sangat bisa dan kelebihannya top commentator ini bekerja secara otomatis menghitung berapa komentar yang dikirimkan oleh pemberi komentar pada blog Anda. Anda tidak usah repot-repot menghitung dan membuka halaman-demi halaman. Berikut ini ada beberapagambar penampakan top commentator keren untuk blog Anda.
Top Commentator
Keren-keren bukan widgetnya? Cara memasangnya seperti biasa, Anda harus menyiapkan widget java scriptnya terlebih dahulu lalu meletakkan kode-kodenya ke dalamnya. Baca Panduan Memasang Widget Java Script. Berikut ini kode-kode yang harus Anda pasang pada blog untuk memunculkan top commentators.

1. Simple Top Commentators Code
<style type="text/css">
.top-commentators { margin:8px 0; font:14px arial; border:1px dotted #ccc; padding:8px; -moz-border-radius:5px; -webkit-border-radius:5px; background:#fff; }
.avatar-top-commentators { vertical-align:middle; border-radius:30px; }
.top-commentators .commenter-link-name { padding-left:0; }
</style>
<script type="text/javascript">
var maxTopCommenters = 6;
var minComments = 1;  
var numDays = 0;      
var excludeMe = true;  
var excludeUsers = ["Anonymous", "someotherusertoexclude"];
var maxUserNameLength = 42;
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';
//
var sizeAvatar = 33;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnQB-Zz8MphAbBBux6_tyBXfjDbSMKPF8nA-RgsCsMKmTxUmosjv-AM74F_pYj8wk_TazwZ17Dxlw4-ZxkwHK18V2FBvV_4XxgurWbJlJd6nEnI7b4Yz6E5awBn3tOK7XvLGiSnVzNafy/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixDNIn8z8mMb6srq7VfWuGZYNHnZ_USAjgSjlNvq2ZmD_3fK5estxY5b-uMQPVIyQ8ZM0_SoF-nu0aHaPz1kC75zQVcIJ2J1Tb3TX6l4OKzRE37043xP1wy0lGGoC9y_QZnXOMxvEQGiSV/s1600/avatar1.png' + sizeAvatar;
var urlMyProfile = '';
var urlMyAvatar = '';
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="avatar-top-commentators" 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="commenter-link-name" 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);
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
 
      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;
  });
  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-commentators">');
    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="font-size: 60%; text-align: right;"><small><a href="bit.ly/28JNH8z" target="_blank" title="widget recent comment">Get This Widget</a></small></div>


2. Rainbow Top Commentators Code
<style type="text/css">
.top-commentators { margin:8px 0; font:bold 14px arial; border:2px solid #111; padding:8px; -moz-border-radius:5px; -webkit-border-radius:5px; background:#333; }
.top-commentators:nth-child(1n+0) {background: #F49A9A;}
.top-commentators:nth-child(2n+0) {background: #FCD092;}
.top-commentators:nth-child(3n+0) {background: #FFF59E;}
.top-commentators:nth-child(4n+0) {background: #E1EFA0;}
.top-commentators:nth-child(5n+0) {background: #B1DAEF;}
.avatar-top-commentators { vertical-align:middle; border-radius:30px;border:2px solid #111; }
.top-commentators .commenter-link-name { padding-left:0; }
</style>
<script type="text/javascript">
var maxTopCommenters = 6;
var minComments = 1;
var numDays = 0;    
var excludeMe = true;
var excludeUsers = ["Anonymous", "someotherusertoexclude"];
var maxUserNameLength = 42;
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';
//
var sizeAvatar = 33;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnQB-Zz8MphAbBBux6_tyBXfjDbSMKPF8nA-RgsCsMKmTxUmosjv-AM74F_pYj8wk_TazwZ17Dxlw4-ZxkwHK18V2FBvV_4XxgurWbJlJd6nEnI7b4Yz6E5awBn3tOK7XvLGiSnVzNafy/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixDNIn8z8mMb6srq7VfWuGZYNHnZ_USAjgSjlNvq2ZmD_3fK5estxY5b-uMQPVIyQ8ZM0_SoF-nu0aHaPz1kC75zQVcIJ2J1Tb3TX6l4OKzRE37043xP1wy0lGGoC9y_QZnXOMxvEQGiSV/s1600/avatar1.png' + sizeAvatar;
var urlMyProfile = '';
var urlMyAvatar = '';
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="avatar-top-commentators" 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="commenter-link-name" 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);
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

      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;
  });
  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-commentators">');
    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="font-size: 60%; text-align: right;"><small><a href="bit.ly/28JNH8z" target="_blank" title="widget recent comment">Get This Widget</a></small></div>

Cara setting top commentators
Fokus pada kode yang berwarna merah.  
var maxTopCommenters = 6; (ubah jumlah top commentators yang Anda inginkan)
var minComments = 1;  
var numDays = 0;      
var excludeMe = true;  
var excludeUsers = ["Anonymous", "someotherusertoexclude"];
var maxUserNameLength = 42;
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';
//
var sizeAvatar = 33; (ubah ukuran gambar commentator)


Demikian Top Commentators keren yang saya bagikan kali ini, semoga bermanfaat. Apabila kurang memahami, silakan berikan komentar di bawah artikel ini. Barangkali saja Anda yang menjadi top commentatornya hehe. Terimakasih ^_^

0 Response to "2 Widget Top Commentators Keren untuk Blog Anda"

Post a Comment

Subscribe to: Post Comments (Atom)