Thursday, 4 July 2013

Cara Membuat Widget Top Komentator Di Blog

Cara Memasang Widget Top Komentator Di Blog. Ada banyak widget widget yang bisa di pasang di side bar blog. Ada yang bersifat menguntungkan, ada juga yang hanya dipasang untuk hiasan. Pada postingan ini, saya akan memberikan informasi tentang cara memasang widget top komentator di blog yang di pasang untuk hiasan. Selain sebagai hiasan, widget komentar teman ini berfungsi untuk menarik minat pembaca blog untuk berkomentar pada setiap postingan agar namanya dapat dipajang di widget ini.


Seperti gambar diatas, adalah gambar widget di blog ini. Tampilannya saya poloskan agar tidak membuat berat blog. Ketika ada pengunjung dengan komentar terbanyak, langsung akan masuk ke list tanpa harus diedit lagi. Atau bisa dibilang otomatis.

Cara Membuat Widget Top Komentator Di Blog

1. Login ke akun blogger anda 
2. Pada dashboard, cari menu Tata Letak, setelah itu klik tambah gadget
3. Cari widget yang bernama HTML/Javascript
4. Paste kode dibawah ini di kolom konten, secara berurutan



<style type="text/css">
.top-commenter-line img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
margin-left:5px;margin-right:5px;
}
.top-commenter-line {margin: 5px 0;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">
var maxTopCommenters = 30;
var minComments = 1;
var numDays = 0;
var excludeMe = true;
var excludeUsers = ["Nama Yang Tidak Ingin Di Cantum"];
var maxUserNameLength = 42;
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';
//
var sizeAvatar = 56;
var cropAvatar = true;
//
var urlNoAvatar = "http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s"+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 = 'http://jonarendra.blogspot.com/p/tentang-saya.html';
var 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 = '<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;
});
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>

Keterangan:
Silahkan kustomisasikan kode CSS dan javascript seperti:
  • var maxTopCommenters = jumlah maximal komentar
  • var minComments = jumlah minimal komentar
  • var excludeMe = true untuk menampilkan komentar author, false untuk tidak
  • var excludeUsers = nama orang yang tidak ingin dipasang
  • var maxUserNameLength = jumlah maximal karakter pada nama
  • var txtNoTopCommenters = teks yang tampil apabila tidak ada orang yang berkomentar
  • var sizeAvatar = ukuran gambar foto
  • var cropAvatar = true untuk mengizinkan memotong foto, false untuk tidak
  • var urlNoAvatar = URL Gambar jika tidak ada foto
    5. Jika sudah di edit seperti pada keterangan diatas, klik simpan/save

    Bagaimana? apakah anda sudah berhasil memasang widget kotak komentar teman sesuai keinginan anda? Sekian dulu postingan Blogger saya yang berjudul Cara Memasang Widget Top Komentator Di Blog, semoga bermanfaat untuk anda.

    Jika ada masalah saat penerapan tutorial diatas, berikan pertanyaan mengenai masalah dengan cara membuat komentar pada kolom dibawah.

    KATEGORI:
    arrow_back
    arrow_forward

    6 komentar

    wah keren nih, bisa mengetahui komemtator terbayk di blog kita

    iya, itu salah satu kegunaannya

    Ini cocok juga mas buat para komentar supaya semangat dalam berkomentar karena adanya tampilan widget top komentator ini.

    itulah kenapa saya pakai widget ini
    pengunjung bakalan berlomba lomba untuk jadi yang pertama :D

    Berkomentarlah dengan baik dan benar, dilarang SPAM!
    Tata Tertib Berkomentar
    EmoticonEmoticon