Cara Memasang Widget Top Komentator Di Blog

Tak bisa dipungkiri lagi bahwasanya pengunjung adalah salah satu faktor yang sangat berharga dan penting bagi karrir sebuah blog, tanpa adanya pengunjung rasanya semua yang sudah kita (blogger) lakukan terdiam dan termenung sia-sia tanpa adanya harapan yang akan bermanfaat kepada sesama. Sejak dahulu, optimasi demi optimasi blog mulai dari seo hingga blogwalking secara rutin dan efisien dijalani oleh para blogger-blogger, yang meyakini bahwa hal tersebut adalah faktor utama pendulang kesuksesan sebuah blog. Namun, jika kita telaah dan cermati lebih jauh mengenai itu, pada hakikatnya seo dan monetize blog hanyalah sebagian dari kepuasan para blogger dalam perjalanan karrir blogging-nya, karena pencapaian yang sebenarnya dari yang paling sebenarnya adalah berbagi untuk sesama, tanpa hal itu kita tidak akan merasakan suatu titik kepuasan yang mendalam pada setiap lembaran hari baru yang kita gunakan untuk melakukan aktivitas ini (ngeblog). Mereka (pengunjung yang loyal) adalah hal yang lebih berharga daripada sekedar menghasilkan uang yang hanya bisa kita nikmati hanya sementara, walaupun tidak bisa kita pungkiri lagi bahwa blog adalah salah satu hal potensial yang bisa menunjang kebutuhan finansial hidup kita.

Terkadang sebuah kesetiaan datang dari kecintaan mereka terhadap suatu hal, tak terkecuali pengunjung blog, jika mereka sudah nyaman dengan satu blog yang akan ia jadikan sebagai panutan, tentunya dia akan terus ingat dengan blog tersebut karena sudah membimbingnya dari 0 hingga ia bisa mengerjakan segala persoalanya seorang diri, tetapi demi meraih hal itu kita perlu menyediakan sarana dan prasarana yang lengkap dan tidak bersifat komersil, maka dengan ketulusan dan dedikasi tersebut, sendirinya mereka (pengunjung) akan menyadari bahwa kita adalah orang yang tulus dalam membimbing dan menanggapi segala tingkah laku mereka, kedepanya mereka akan lebih 'setia' dengan blog kita, dan mungkin saja mereka akan 'mengayomi' dan menganggap blog kita sebagai blog ke-2 mereka.

Untuk itu, apresiasi patut kita berikan kepada rekan-rekan pengunjung blog kita yang sudah berbaik hati ingin berkunjung dan berkomentar secara aktif, mungkin kita tidak bisa memberikan suatu penghargaan yang berarti tapi mungkin penghargaan tersebut akan membuat mereka tersenyum karena ada orang yang mengapresiasinya.

Seperti yang sudah saya paparkan tadi, hal ini dapat menjadi salah satu pengapresiasian yang berarti bagi mereka (pengunjung).

Melalui HTML/JavaScript :

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

1. Klik Tata Letak.

2. Klik Tambah Gadget.

3. Pilih Gadget HTML/Javascript.

4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).

Ingat :

Kamu cukup pilih salah satu kode di bawah ini.

» Top Komentator (Tanpa Avatar) :

<script type="text/javascript">
function getYpipe(feed) {
document.write('<ol>');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
if(feed.value.items[i].link == "")
var item ="<li>" + feed.value.items[i].title + "</li>";
else
var item = "<li>" + "<a href="+ href + '" target="_blank">' + feed.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://tutorial-blog-eno.blogspot.com/
&ExcludedNick1=eno sutrisno&ExcludedNick2=eno sutrisno
&ShowHowMany=5
&_callback=getYpipe
&_id=23022d7836bf2dd3c10a329feb9be26a
&_render=json"
type="text/javascript"></script>
<small><a href="http://tutorial-blog-eno.blogspot.com/2014/11/cara-memasang-widget-top-komentator-di-blog.html" target="_blank">Mau Seperti Ini?</a></small>

Keterangan :

• Silahkan kamu ganti http://tutorial-blog-eno.blogspot.com/ dengan URL blog kamu sendiri.
• Warna lime adalah nama profil G+, silahkan kamu ganti dengan nama profil G+ kamu, agar tidak muncul pada list top komentator (khususnya bagi kamu yang sering menjawab komentar pengunjung blog kamu).
• Besar atau Kecilnya (Alphabet) nama profil G+ sangatlah berpengaruh.
• &ShowHowMany=5 adalah jumlah top komentator, silahkan kamu ganti dengan selera yang kamu mau.

» Top Komentator (Dengan Avatar) :

<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">
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 = ["eno sutrisno", "eno sutrisno"];     // exclude these usernames
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'Tidak ada top komentator saat ini.';
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/AVvXsEilZNh5U2Cfd7KRKOcWZ5_rbr-fdjHGyIFTwqQaOSM-sx67Lg5u4oY125FHVEa8xVeHsDNgBheSltGI43eD2vKqmmBWmCngdFquuuK9akF1ENt9-REDpjhbsIWB4Jo50HpOMGBDD7edVBw/"+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><a href="http://tutorial-blog-eno.blogspot.com/2014/11/cara-memasang-widget-top-komentator-di-blog.html" target="_blank">Mau Seperti Ini?</a></small>

Keterangan :

• var maxTopCommenters = 5; adalah jumlah top komentator, silahkan kamu ganti dengan selera yang kamu mau.
• Warna lime adalah nama profil G+, silahkan kamu ganti dengan nama profil G+ kamu, agar tidak muncul pada list top komentator (khususnya bagi kamu yang sering menjawab komentar pengunjung blog kamu).
• Besar atau Kecilnya (Alphabet) nama profil G+ sangatlah berpengaruh.
• Hapus kode ([count]) jika kamu tidak ingin menampilkan jumlah komentar setiap pengunjung pada widget top komentator.
• Warna red adalah teks saat tidak ada top komentator di blog, silahkan kamu ganti dengan selera yang kamu mau.

5. Simpan Pengaturan.

Nah, sekarang blog kamu sudah terpasang Widget Top Komentator sehingga kamu dapat memantau perkembangan komentator pada blog setiap saat atau setiap waktu.

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.

█████████████████████████████████████████████████████████████████

Jangan Lupa Like, Comment & Share Artikel Ini Ya » Terima Kasih Atas Kunjungannya » Salam : Eno Sutrisno

BACA JUGA ARTIKEL TERKAIT DI BAWAH INI :

Di Sini Adalah Inspirasi Untuk Sobat Blogger Semua.

Ditulis Oleh : Tutorial Blog Eno » Di Sini Adalah Inspirasi Untuk Sobat Blogger Semua.

Saat ini kamu sedang membaca artikel tentang Cara Memasang Widget Top Komentator Di Blog. silahkan kamu Copy-Paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link di bawah ini sebagai sumbernya. INGAT : saling menghargai kreatifitas sesama sobat blogger oke. <a href="http://tutorial-blog-eno.blogspot.com/2014/11/cara-memasang-widget-top-komentator-di-blog.html" target="_blank">Cara Memasang Widget Top Komentator Di Blog</a>

[Mau Seperti Ini?]