Cara Membuat Top Komentator Widget dengan Avatar

Be a top commentator

Top Komentator Widget, secara tidak langsung merupakan satu penghargaan admin blog untuk pengunjung blog, akan siapa saja sahabat kita yang paling rajin memberikan komentarnya di blog.

Top Komentator Widget mampu juga memberikan kemudahan untuk memberikan award misalanya, pada sahabat kita karena dalam Top Komentator terdapat nilai atau rangking tertinggi/terbanyak pada komentatornya. Maka dengan adanya Top Commentator pada blog kita secara tidak langsung akan mengerakan kompetisi pada pengunjung untuk mendapat posisi 1 agar mudah dikenal oleh orang lain.

Pada Top Komentator Widget dengan Avatar ini, sobat dapat mengkonfigurasi jumlah maksimum komentator, dan jumlah minimum komentar. Sobat juga dapat menyingkirkan 1 komentar jika ingin, misalnya Nick sendiri dan daftar nick lain misalnya "Anonim". Ok kita langsung ke Cara Pembuatanya :

Caranya :

1. Login ke Akun Blogger sobat

2. Menu Layout - Add a Gadget - Cari HTML/JavaScript

3. Lalu copy kode yang ada dalam Teks Area dibawah ini dan letakkan didalamnya

<style type="text/css"> .top-commenter-line {margin: 3px 0;} .top-commenter-line .profile-name-link {padding-left:0;} .top-commenter-avatar {vertical-align:middle;} </style><br /><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://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.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", "someotherusertoexclude"]; // 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 = 16; var cropAvatar = true; // var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMXYVmyYCdElSBseoHdZ_R_imAngSWkbGma70TpvrXPhB0B0E3ZZdJYeSMSsXQ6KCFjUSgZS-PxJyzHWO08LzVkHDb_1zu6S9lwIPn7mKbG_qNczd5mwGIfCEvbmYJEbBfUqnApiAqDmM/"+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><a href="http://evawangi.blogspot.com/2012/08/top-komentator-widget-dengan-avatar.html" target="blank"><font color="red">[Get This]<font></font></font></a>

4. Save Widget.

Catatan dari hasil translate : Ada dua definisi CSS pada awalnya, yang dapat diubah sesuai dengan keinginan sobat. Berikut adalah daftar dari variabel dan penjelasan singkatnya.

maxTopCommenters: seberapa besar daftar adalah maksimum

minComments: berapa banyak komentar komentator atas harus memiliki minimal

numDays: dari berapa hari (ex. 30), atau 0 dari "sepanjang waktu" (maks 500 komentar)

excludeMe: true, jika komentar sendiri dikecualikan

excludeUsers: ganti "Anonymous" dengan nama pengguna profil sobat untuk mengecualikan

maxUserNameLength: jika 0, tidak memotong, jika> 4, username lenghty dipotong

txtTopLine: menentukan kernel, apa yang ditampilkan pada setiap baris. Teks ini dapat memiliki variabel sederhana, yaitu: [#], [image], [user], dan [count]. [#] Diganti dengan posisi pada daftar, [image] dengan gambar avatar komentator, [user] dengan nama komentator dan [jumlah] dengan jumlah komentar. Teks juga dapat berisi html.

txtNoTopCommenters: apa yang akan ditampilkan, jika daftar kosong

txtAnonymous: "Anonim" username lokal, atau kosong jika teks Inggris "Anonim" yang akan digunakan  

getTitles: jika benar, mengambil judul dari feed posting, jika palsu, judul dihasilkan dari url blogger favico [B]

urlMyAvatar: terutama jika trueAvatars = false, set disini url untuk gambar avatar Anda

urlMyProfile: jika Anda tidak memiliki gadget profil di halaman, masukkan url profil Anda di sini!  

urlAnoAvatar: avatar anonim, Anda dapat berubah dari pria misterius ke yang kustom, jika Anda inginkan, mungkin ini.

urlNoAvatar: pakan komentar menawarkan ikon (Blogger logo) bagi mereka Blogger yang belum mengatur gambar profilnya. Anda dapat mengganti icon tersebut dengan setelan (default:).

cropAvatar: Tanaman avatar untuk persegi (benar) atau peregangan (palsu) untuk persegi.

sizeAvatar: ukuran avatar di x dan arah y, piksel.

Jika sobat memiliki komentar yang sangat banyak (ribuan komentar), saya menyarankan sobat untuk men-setting Top Komentator Widget dengan Avatar ini dalam setingan "komentator atas 30 hari" (set numDays variabel ke 30), sehingga tidak akan memakan waktu terlalu lama untuk memuat dan menghitung semua komentar.

Sumber:

http://evawangi.blogspot.com/2012/08/top-komentator-widget-dengan-avatar.html
 http://wpmu.org/wp-content/uploads/2011/11/Top-commenters-widget-plugin-Wordpress.jpg