Anda di sini : Home / Tutorial Blog / Cara Memasang Widget Top User Coment di Blog

Cara Memasang Widget Top User Coment di Blog

Cara Memasang Widget Top User Coment di Blog - Apa itu Widget Top User Coment? Widget ini adalah widget yang secara otomatis akan menampilkan user pengguna internet melalui akun emailnya dengan komentar terbanyak di dalam blog kita. Dengan demikian kita dapat mengetahui pengunjung yang paling aktif menyumbangkan komentarnya.

Setidaknya widget ini bisa memberikan penghargaan kita terhadap mereka. Sebuah Blog-pun akan nampak jauh lebih hidup jika widget ini terpasang di dalam blog. Sebelum anda akan memasang widget Top User Coment ini saya menyarankan anda untuk mencocok kan terlebih dahulu dengan tema artikel yang anda bawakan kenapa demikian? anda tahu sendiri alasannya. Jika widget ini cocok dengan blog atau artikel anda langsung saja kita pasang.

Cara Memasang Widget Top User Coment di Blog

1. Login ke Akun Dasbor Blogger anda.

2. Masuk ke Laman Tata Letak.

3. Pilih tambahkan widget "Add Gadget"

4. Letakkan kode di bawah ini di dalamnya.

<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; }
.user-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 sizeUsers = 33;
var cropUsers = true;
//
var urlNoUsers = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYOKAe4uOqThHEHBSYtfi2aKU5t1WffB08x4FL3D9QwYSFursxMUTD628_wCef3PhJWILRWgdeElyD-wlkYsfwda-wuckxrFdkQYcX0jGLrccWoWV7IzuUhQiZq50-0OrNvouJVYnxFks/s1600/avatar_blue_m_96.png" + sizeUsers;
var urlAnoUsers = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0E_aFa2kbkF3eEyEVef-6Z0oHLlDsdfTFisv4hxodshX2BtWqlIn1oFVHgap5vrMaq04n-uWOLOMFB_hySNJ_atYqmux0GZtSW9AqgEy9vA9TAKxCf566uvXMnCdpbQDKrmkOnXrCMbAV/s1600/avatar1.png' + sizeUsers;
var urlMyProfile = '';
var urlMyUsers = '';
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 = urlAnoUsers;
  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 && urlMyUsers != "")
    avaimg = urlMyUsers;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoUsers != "")
    avaimg = urlNoUsers;
  var newsize="s"+sizeUsers;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(cropUsers) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoUsers)
    authorName = txtAnonymous;
  var imgcode = '<img class="avatar-top-commentators" height="'+sizeUsers+'" width="'+sizeUsers+'" 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>

5. Langkah selanjutnya Simpan setelan Tata Letak dan lihat hasilnya.

Simple kan?

Sekian Tutorial singkat kali ini, jika ada yang ingin ditanyakan silahkan poskan di komentar Mudah-mudahan saya siap membantu.

Unknown

Penulis blog ini merupakan seorang mahasiswa berstatus jomblo yang mengisi kekosongan dengan kegiatan blogging (blogger jomblo). Saya berharap semua konten yang ada di blog ini bisa bermanfaat untuk kita semua.

Apa tanggapan Anda untuk "Cara Memasang Widget Top User Coment di Blog"

Post a Comment

Beri komentar Anda di blog ini dengan cerdas dan etika yang baik :)

Subscribe to: Post Comments (Atom)