Cara Membuat Widget Member Aktif/Top Komentator KEREN di Blog

Cara Membuat Widget Member Aktif/Top Komentator di Blog-
Memasang widget top komentator atau member aktif ini adalah cara kita mengapresiasi pengunjung blog yang sudah "susah payah" mengunjungi dan berkomentar di blog kita. Cara Membuat Widget Member Aktif/Top Komentator di Blog
 Ini SS nya

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

1. Buka akun blogger kalian
2.Widget ini bisa kalian masukkan di halaman pribadi atau kalian gunakan sebagai widget di Homepage blog anda
3. Digunakan sebagai widget :
-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.newbanie.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/AVvXsEiaweET89Viad6vc31pMijGZiS5qoQzybdqsb4lUh124DBkgVXpaYImcpXCSf4wmR70GHOqNNXGX8qOjrWbjFPdyBSjMnb6W82w5qZJ2n12w2BNzgXZNpcqqf2eqBRF9OTy5dG67F_lqdk/' + 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 newbanie.blogspot.com dengan URL Blog anda. Klik Save jika sudah selesai

4.Sebagai Halaman Pribadi
-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
- Maka hasilnya akan seperti berikut ini

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

Tweet