Memasang widget top komentator atau member aktif ini adalah cara kita mengapresiasi pengunjung blog yang sudah "susah payah" mengunjungi dan berkomentar di blog kita. yuk kita lihat penampakannya

cara membuat widget top komentator

Demo
click to view

Nah apakah kalian tertarik dengan  Cara Membuat Widget Member Aktif/Top Komentator seperti di Blog ini? Jika iya maka silakan simak tutorial berikut :)

1. Buka akun blogger kalian
2.Widget ini bisa di gunakan pada halaman statis atau pun sebagai widget di  blog anda
3. Digunakan sebagai :
-Masuk ke bagian Tata Letak ->> Pilih Add Gadget
-Copy pastekan kode berikut di HTML Box nya


 <style type="text/css">



.cm-person{margin:3px;position:relative;float:left;width:80px;height:100px;font:10px/10px Lora,Verdana,Arial,Sans-Serif;text-align:center;line-height:10px;padding:10px; border: 1px solid #F6CEE3; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;color:#000;background-color:#fff;box-shadow:inset 0 0 1px black}



.cm-person a.profile-name-link{display:block;width:80px;height:80px;position:absolute;top:10px;left:10px;background-color:#999;color:white;text-decoration:none;font:bold 30px/80px Ubuntu,Tahoma,Verdana,Arial,Sans-Serif;margin:0 0;padding:0 0;display:none}



.cm-person a.profile-name-link.item1{background-color:#BC0000}



.cm-person a.profile-name-link.item2{background-color:#1A00CE}



.cm-person a.profile-name-link.item3{background-color:#39A003}



.cm-person a.profile-name-link.item4{background-color:#8B039D}



.cm-person a.profile-name-link.item5{background-color:#F0C100}



.cm-person a.profile-name-link.item6{background-color:#00D1CB}



.cm-person a.profile-name-link.item7{background-color:#FFEA03}



.post .post-body .cm-person img{background-color:#666;display:block;width:80px;height:80px;padding:0 0;margin:0 0 10px;border:none}



.cm-person:hover{color: #FFF;background-color:#111}



.cm-person:hover a.profile-name-link{display:block}



.comments {display: none;}



</style> 


 <script type="text/javascript">



//<![CDATA[



var homepage = 'http://www.maseyudha.blogspot.com/',



  maxTopCommenters = 77,



  minComments = 1,



  numDays = 0,



  excludeMe = true,



  excludeUsers = ["Anonymous", "Admin"],



  maxUserNameLength = 42,



  txtTopLine = '[image] [user]',



  txtNoTopCommenters = 'No top commentators at this time.',



  txtAnonymous = '',



  sizeAvatar = 80,



  cropAvatar = true,



  urlNoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKUuhdxWnM_-Hl5NwEwWSIe-9ZX7q_LAIEB2S6qdova3yLas_l-_D5186M0_HQ5c8zr64ih2-V9LDzEgR-8LkdIgWMOv6BeimpEJyVDTA_GU6Aan8kMo7pzkAD35ILH3BslWx-deDSZyY/' + sizeAvatar + '/avatar_blue_m_96.png',



  urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar,



  urlMyProfile = '',



  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 = '<div class="cm-person"><img class="top-commenter-avatar" height="' + sizeAvatar + '" width="' + sizeAvatar + '" 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 item' + position + '" href="' + authorUri + '" title="' + position + '. ' + authorName + '">' + item.count + '</a>' + authorName.substring(0, 14) + '</div>';



  text = text.replace('[user]', authorcode);



  text = text.replace('[image]', imgcode);



  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);



      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.feed.entry.length > 200) {



    ndxbase += 200;



    document.write('<script type="text/javascript" src="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&start-index=' + ndxbase + '&alt=json-in-script&callback=showTopCommenters"></' + 'script>');



    return



  }



  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(replaceTopCmtVars(txtTopLine, item, realcount + 1));



    realcount++



  }



  if (!realcount) document.write(txtNoTopCommenters)



}



document.write('<script type="text/javascript" src="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></' + 'script>');



//]]>



</script>  

-Ganti dengan URL Blog anda. Klik Save jika sudah selesai

4.Sebagai
-Klik blog yang akan kalian pasangi widget member aktif ini
-Setelah itu buat halaman baru dengan cara pilih Laman -> Laman Kosong
-Gunakan metode HTML bukannya Compose
-Dan pastekan kode diatas lalu Publish

Mudah sekali bukan Cara Membuat Widget Member Aktif/Top Komentator KEREN di Blog sampai jumpa di postingan berikutnya :)

27 komentar:

  1. ini widget menarik banget, makasih triknya mas...
    salam

    BalasHapus
    Balasan
    1. bener banget gan,,bisa menambah banyak temen juga
      salam kenal gan :)

      Hapus
    2. sam wong....!!
      saya cari2 ternyata ada disini toh,suruh balik dulu,dirumah banyak tamu

      Hapus
  2. waduh ada foto saya tuh mas ^_^

    BalasHapus
  3. wahh,, keren nih sob,, izin nyoba ya,,
    thanks infonya

    BalasHapus
  4. Makasih triknya mas :)
    Blog saya akhirnya ada widget ginian :D

    BalasHapus
    Balasan
    1. sip gan Ricki :-bd
      bisa mempublish semua member blog kita juga

      Hapus
  5. keren juga nih widget komentatornya mas,perlu diterapkan diblog sebagai bentuk penghargaan kepada temen2 yg aktif berkomentar.
    tp kenapa adminnya tidak diilangin tuh mas,jadinya top komentatornya jadi admin sendiri dong hehehe

    oya mas,kayaknya kunjungan perdana nih,salam kenal

    BalasHapus
    Balasan
    1. weleh..akhirnya sang master mampir juga ke gubuk ane ini :-bd
      salam kenal juga mas yanto..
      oke mas makasih masukannya ntar ane ilangin :)

      Hapus
    2. master apa mas,kita mah masih newbie koq

      Hapus
  6. Mantap tips nya gan,,dengan ini mungkin saya bisa melihat sahabat sahabat blogger,yang paling sering melihat blog kita :D

    BalasHapus
    Balasan
    1. bener banget mas,,dan bisa menambah banyak temen sesama blogger :-bd

      Hapus
  7. nongol ah , biar ngetre lagi :D

    BalasHapus
    Balasan
    1. walah ada artis baru nih :siul

      Hapus
    2. artis kurang biaya bgini mas , maklum :cantik

      Hapus
    3. kurang make up nya juga gan :D

      Hapus
    4. nanti aja make up nya kalo udah pengen shooting :D

      Hapus
  8. balik lagi kesini mas,menyimak lagi widget member aktifnya
    eh blog mas yudha yg aktif mana sih mas
    saya kan mau follow ternyata banyak banget blognya

    BalasHapus
    Balasan
    1. Blog utama ane yang GoGling Studio mas,,ini blog ke dua,,tapi tenang aja 2 blog ini Aktif 24jam 6hari seminggu 30hari sebulan Full Nonstop :D,,kalo blog yang lain cuma blog dummy
      oke mas yanto akan saya pasang disini widgetnya..

      Hapus

 
Top