Santri Indigo adalah Komunitas Santri Berbudaya Teknologi yang merupakan kerjasama program CSR PT Telkom Indonesia Tbk dengan HU Republika.
Twitter Facebook Feedburner Google +1 youtube
www.santri-indigo.com
Selamat Datang di Portal Santri Indigo Cilacap
Home » , , , » Cara Menampilkan Top Diskusi Blogger

Cara Menampilkan Top Diskusi Blogger

Penulis : ZHANtech | Kamis, 13 Maret 2014

Santri-Indigo.Com - Seperti biasa pagi ini saya akan berbagi tutorial untuk pengguna blogger dengan judul yang saya angkat diatas Cara Menampilkan Top Diskusi Blogger.

Sebelumnya saya akan menerangkan dahulu maksud dari Top Diskusi, Top diskusi disini berfungsi untuk mengelompokkan komentar di blogger anda yang menggunakan akun yang sama dan diurutkan sesuai dengan banyaknya komentar yang telah dibuat di blog anda.

Supaya anda tidak penasaran saya kasih screenshotnya

Contoh Top Diskusi

Nah sudah ada gambaran kan, untuk itu mari coba praktekan cara pembuatannya.

Cara Menampilkan Top Diskusi Blogger :
  • Pertama - tama buka / login akun blogger anda terlebih dahulu..
  • Setelah itu buka Tata Letak
  • Kemudian Tambahkan Gadget

  • Pilih Html/Java Script
  •  Masukkan code html dibawah ini :
<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">
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://www.santri-indigo.com/2014/03/cara-menampilkan-top-diskusi-blogger.html
//
// CONFIG:
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 = ["Anonymous", "Muhammad Rifai Aziz"];     // exclude these usernames
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
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/AVvXsEjNU208iOu03oK_DdW-mG5EZ6SctI2BcFJBI08C9QG2UAh4TCPykpx8wAcZ5x7H9Lh6S-N5IYfUlnJN-HpLiQgNgMJotBGjuKxRPu8Xv4A3ds4xq8vWV20i1lkck2T0o-E6DyLWcEU_NRs/"+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>
  • Ganti yang saya tandai dengan warna merah dengan nama akun anda.
  • Terakhir Jangan Lupa di Save 
Seperti biasa saya buka sesi Tanya Jawab di kolom komentar jika anda belum berhasil dalam mempraktekan tutorial tersebut


Share this article with your friends

6 komentar

Download Software dan Game 13 Maret 2014 pukul 09.28

saya suka templatenya, keren gan.... :)

ZHANtech 13 Maret 2014 pukul 10.00

Terima kasih :)

Unknown 11 Mei 2014 pukul 22.31

Mantap banget....terima kasih

ZHANtech 11 Mei 2014 pukul 22.58

Sama - Sama ^_^

Unknown 19 Agustus 2014 pukul 17.17

:-d

ZHANtech 19 Agustus 2014 pukul 20.15

Makasih sudah berkunjung,..
Jangan Kapok ya mampir disini :)

Posting Komentar

Jangan berkunjung tanpa meninggalkan jejak.
- No Spam - No Phising - No Live Link
Salam Blogger Indonesia, Silakan Tinggalkan Pesan Agan disini... !!!

Tukar Link



Copy Paste - Copyright by SIC
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.santri-indigo.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://2.bp.blogspot.com/--N-4ALq7hlQ/UzmVq36j58I/AAAAAAAABVI/p-zTAcA9xsI/s150/SI.png" /></a></div>

Bagi yang sudah pasang silahkan tinggalkan komentar