Cara Membuat Widget Member Aktif Di Blog

Ingin memberikan apresiasi kepada pengunjung? atau sekedar mengetahui info pengunjung yang aktif memberikan komentar di blog anda secara eksklusif? Banyak cara mewujudkannya, bisa dengan memberikan mereka kenangan sebagai hadiah pada ajang acara yang anda buat, atau memberikan back link kepada mereka dengan memasang widget top komentator, atau widget member aktif berikut inipun bisa menjadi sebuah alternatif lain bagi anda. Sebenarnya widget ini masih menggunakan script yang sama dari widget top komentator, hanya saja style widget dimodifikasi dengan tampilan berbeda dan kalimat komentar tidak ditampilkan.

Fitur:

• Menampilkan nama dan link komentator.
• Menampilkan Avatar komentator.
• Avatar dengan polaraid style.
• Efek hover pada Avatar menampilkan jumlah komentar.

Bersih dan elegant, untuk mendapatkan ide yang jelas tentang widget ini silahkan lihat member aktif monozcore terlebih dahulu.

MonozCore Active Member

Cara Pemasangan:
Ada 2 cara untuk memasang fitur blog active member ini, yaitu:

1. Membuat link eksternal.

• Download html page berikut ini. Download
• Edit html tersebut dengan teks editor ataupun html editor.
• Ganti alamat url yang terdapat dalam kode html tersebut dengan link url anda.
  - homepage = 'http://monozcore.blogspot.com/'
  - maxTopCommenters = 100
  - excludeUsers = ["Anonymous", "Admin", "Monoz Core", "MonozCore"]

2. Memasang di widget blog.

• Copy paste saja code berikut pada HTML editor posts atau halaman tersendiri di blog anda.

• <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.monozcore.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/AVvXsEhIByhsSCePAdu4bKW8cqMu5FKDDf5c_0NHbbO9Zw45D97YoMBdAUi0wzmkgApSQqLSz71kCg25t051soS8r2cHjt9mLIN1_fdApQxyRsqUjTQKKz1gzawGLFDt9Xc2M0-NB2sbe9erfK4/' + 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>

• Jangan lupa untuk merubah link url pada kode diatas.
• Simpan dan lihat hasilnya.

.: Semoga Bermanfaat :.