Cara Memasang Widget Top Komentator di Blog
Cara Memasang Widget Top Komentator di Blog Salah satu cara untuk memberikan apresiasi kepada komentator blog/web kita adalah dengan cara memasukkan widget komentator terbanyak kedalam blog website. Dengan begitu maka, kita akan tahu siapa saja yang telah berkomentar di blog kita dengan jumlah yang banyak. Bisa dipastikan para komentator tersebut akan merasa senang, karena nama dan fotonya bisa ada di blog kita. Selain itu juga secara tidak langsung mereka sudah mempromosikan blog nya di blog kita. Dan bukan tidak mungkin akan meningkatkan trafik blog mereka.
Kita, sebagai pengelola blog, sangat berterimakasih kepada mereka (komentator) yang sudah berjasa meluangkan waktunya untuk berkomentar di blog kita. Karena dengan adanya komentar dari mereka tersebut, maka ada beragam manfaat yang bisa diperoleh. Antara lain adalah (i) sharing pengalaman tentang hal yang bermanfaat, (ii) menjalin persahabatan yang harmonis, (iii) menginspirasi kita sehingga berbuah munculnya artikel/tulisan, (iv) menyumbang keyword di mesin pencari dan pada akhirnya dapat meningkatkan trafik web/blog kita, dan masih banyak lagi manfaatnya.
Setelah sebelumnya saya share tentang Cara Memasang Widget Histats di Blogspot. Dalam kesempatan kali ini saya akan menjelaskan tentang cara memanambahkan widget keren top komentator di blogger blogspot. Silahkan anda simak baik tutorial berikut ini.
Cara Memasang Widget Top Komentator di Blog
1. Silahkan sign in ke akun Blogger anda
2. Masuk ke Dashboard > pilih menu Tata Letak > klik Tambah Gadget > pilih HTML/JavaScript
3. Silahkan copy script berikut ini dan paste-kan ke dalam HTML/JavaScript dan kemudian klik Save.
<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);
}
.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.
//
// CONFIG:
var maxTopCommenters = 10; // berapa banyak senarai top commentator
var minComments = 1; // minimum komen
var numDays = 0; // komen sejak bila (ex. 30), atau 0 sejak dari mula
var excludeMe = true; // true: tidak masukkan komen sendiri
var excludeUsers = ["Anonymous", "Wahyu Eka Prasetiyarini"]; // jangan masukkan username ini, tukar NickNameAdminBlog kpd nickname anda
var maxUserNameLength = 42; // 0: don't cut, 42: cut till 42 usernames characters
//
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/AVvXsEggIt5Oap-GSxMD4XPW0ckYdeFQi3m_i17TnIEjIS_7pkx12XmGY1uotTrkVfqDIZgKKGk-afKjRUEHodOCjf6Iw5N6WwBxfHXenEktIS-ZB2s2Xq1-uJD_L0dh3WLg38CHTJoR3SnewdY/"+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><div style="text-align: center;">
<span style="font-size:11px;"><a href="https://cara-ririn.blogspot.com/" target="_blank">:: Dapatkan Widget Ini ::</a></span></div>
Keterangan:
Kode var maxTopCommenters = 10 adalah jumlah komentator yang dimunculkan
Kode Wahyu Eka Prasetiyarini silahkan diganti dengan Nama Profil Blogger anda. Tujuannya adalah agar nama anda tidak muncul pada widget Top Komentator tersebut
Demikian informasi yang dapat saya sampaikan untuk anda tentang Cara Memasang Widget Top Komentator di Blog. Semoga dapat bermanfaat. Jangan lupa baca juga postingan yang lainnya di blog saya tentang Cara Pasang Widget Recent Post di Blog. Terimakasih atas perhatiannya.
Categories:
Blogging
44 komentar:
dulu saya pernah memasang yang mirip seperti ini komen recent, tapi sekarang susah template saya udah padat, sulit untuk menata ulang yang baik. Loading blog pun mempengaruhi bila ada perubahan.
kalau ada top komen bisa membuat pengunjung untuk lebih rajin lagi dalam memberikan komentarnya ya mbak hehe... :)
iya mbak bagus buat ngadain program guest this week.
Dari top komentator ini sangat asyik sekali, jadi bisa keliatan MANA yang paling produktif dan paling banyak memberikan komentar. Saya sudah merencanakan akan memberikan semacam gift atau cindermata yang kecil mungil buat pemberi komentar terbanyak setiap bulannya. Ini masih rencana, Mau liat SPONSOR hadiah apa yang layak buat mereka hiehiehiee. Lebay
ini artikel lama mbak ??,
seingat saya sudah pernah saya baca
wah sidebar template saya sudah penuh jadi gak bisa masang deh. ^_^
kakak sih enak bnyak yg komentar
kmi ini apalah :)
dulu ane pernah pasang widget ini, sekarang sudah ane hapus, gak ada tempat lagi soalnya =D
tak coba kapan2 LAH mba.... nice post
Wah,, lumayan nih.
Cuman itu berat ngga ya buat diterapin di blog?
dulu saya pernah memasangnya.. sudah dibuang kerana loading blog menjadi berat..
Terimaksih atas tipsnya..
Salah satu fitur menarik yang bisa ditampilkan di blog. Akan lebih interaktif dan komunikatif. Terima kasih tutorialnya. Salam cemerlang!
b0leh di coba.... izin save mb
wow...
idea yang sangat menarik nih...
boleh lah kita coba ya...
Boleh dicoba ni, sbg bentuk penghargaan, apresiasi dan rasa terima kasih pemilik blog kepada para komentatornya, dan sepertinya saya familiar juga dengan wajah2 top comment diatas mbak :)
Keren mbak infonya,,, top komentator sangat penting utk membuat blog lebih semarak,,,
Tapi sayangnya diblog saya gak bisa diterapkan komentator yg disertai thumbnail.
Hmmm... sayang sekali :)
Blog mbak Eka pasangin tombol balas komentar donk mbak,,, biar saya bisa ikutan menyahut di komentar2 lainnya. Blog saya uda saya pasangin tombol Reply.
Selain itu mbak Eka nantinya gak perlu absenin satu persatu setiap kali balas koment, hehehe :)
Terimakasih mbk tutornya :)
Wahhh Keren Nih Mbakkk tutorialnya Tapi kira" Bakal Memberatkan Proses Loading Di Blog Kita kagak?? hehe
Dengan memasang widget top komentator jadi lebih senang buat teman-teman untuk meninggalkan komentar atau blogwalking.
berhubung blog saya menggunakan platform wordpress jadi untuk widget top comentar blog saya pakai plugin saja, soalnya saya cari yang tanpa plugin belum ketemu.
#Rizkyzone.com
saya kemarin pernah lihat di blog sebelah.. TOP COMMENT ini di letakkan di postingan,, jadi saya rasa tidak harus di sidebar bagi yang sudah penuh.
cukup kasih link di menu bar dan beres,,, :D loading blog pun tidak terpengaruh.
dengan demikian secara tidak langsung dapat memberikan sebuah persembahan yang spesial untuk para komentator ya mbak
Dan dengan ada nya widget komentar ini..bisa jd referensi juga..di mana ketika akan memilih dan memberikan Award ke pd para sahabat blogger ya mbak Rin... :)
Udah lama nih...ndak ada yg posting Award ya...hehe :)
Lanjut..mbak Rin
Selamat Hari Raya Idul Adha 1343 H..
Mohon maaf lahir bathin ya mbak :)
selamat malam Mba Ririn...widget Top Komentarnya tidak membuat Blog Loding kan Mba...? memasang Widget Top komentator pada blog menurut saya merupakan hal yang positif karena bisa memotivasi pengunjung blog untuk memberikan Komentar
kunjungan malam mba', Selamat Hari Raya Idul Adha 1434H, semoga dilancarkan rezeki,,,
mau nyoba mba' tapi widget udah penuh,,, hehe
asik memang mbak ya kalo ada widget top comment bisa tau komentar terbanyak, jadi bisa lebih mudah mengenali siapa yang paling sering berkomentar.
oh iya mbak, itu pada <style type="text/css"> bisa ditambahin scoped="scoped" sehingga menjadi <style type="text/css" scoped="scoped"> agar tidak error pada <style> saat validasi HTML5 :)
pengen juga sih pasang top komen di blog, cuma udah kebanyakan widget sementara ditunda dulu mbak, makasih tutorialnya sangat bermanfaat :)
yang punya blog lagi mudik nih kayaknya...
Selamat Hari Raya Idul Adha Mbak...Maaf Lahir Batin :)
ternyata begitu ya izin praktek ya master
Mas Warim, seratus untuk mas warim hehehe :D
Mas Intan, silahkan dipikir-pikir lagi mas apabila ingin tambah widget lagi karena loading yang ringan ada sebuah prioritas :)
Kang Ucup, mungkin bisa begitu kang. Apalagi jika widget nya dipasang disidebar, pasti komentator bakalan berlomba-lomba untuk menjadi nomor 1 hehe :D
Mbak Elsa, sepertinya ide yang bagus itu mbak. Tapi saya belum begitu paham soal Guest This Week hehe :D
Pak Asep, mudah-mudahan saja ide nya pak asep bisa segera direalisasikan :)
Mas Daniel, ini artikel baru mas. Dulu artikel ini belum pernah terbit kok di blog ini. Mungkin dulu anda pernah berkomentar tentang Top Komentator di blog ini saat widget ini saya pasang di sidebar blog hehe :D
Mas Fadly, nggak apa-apa master. Saya nggak maksa harus pasang widget ini kok wkwkwk :D
Mas Zacky, wkwkwkwk saya kira banyak sedikitnya yang kasih komentar di blog, itu tidak berpengaruh terhadap widget ini kok :D
Mas Arriyadh, mungkin bisa dipasang di tempat lain mas. Nggak harus diletakkan di sidebar/footer blog. Bisa juga dipasang di dalam postingan blog kok :)
Mas Zaelani, silahkan mas. Nggak dicoba juga nggak apa-apa kok. Soalnya nggak wajib pasang widget ini kok hehe :D
Mas Ilham, lumayan mas hehe :D Silahkan dipikir-pikir dulu ya apabila ingin memasang widget ini di blog, soalnya cukup mempengaruhi loading blog. Tapi kalau suka dengan widget ini sih nggak masalah :)
Mizz Aiza, kasihan banget ya mizz kok widget nya di buang hehe :D Mending di lepas aja daripada di buang hehe :D
Mas Senyum, you're welcome :)
Pak Herdoni, seratus untuk Pak Herdoni hehe :)
Mbak Maya, silahkan di save mbak maya. Tapi jangan sering-sering nge-save ya mbak, soalnya ntar kulkas nya penuh lho hehe :)
Mas Maju, silahkan dicoba master kalau tertarik dengan widget ini. Kalau nggak dicoba juga nggak apa-apa kok. Saya nggak maksa hehe :D
Mas Aditya, hehehe wajah-wajah dalam screenshot diatas memang sangat familiar mas. Namanya juga Top Komentator hehe :D
Mbak Indri, terimakasih mbak atas saran dan masukannya. Saya sudah pernah pasang Thread Comment di blog ini. Alhamdulillah sudah berhasil dipasang. Hanya saja tombol reply/balas tidak berfungsi. Link nya kalau di klik tidak bisa. Sehingga saya lepas lagi script tersebut. Begitu mbak ceritanya. hehe :)
Mas SEO, sama-sama mas bro :)
Mas Ainul, tergantung koneksi internet yang digunakan untuk mengakses blog yang dipasang widget ini. Kalau koneksinya ngebut, pasti loading nya nggak berat. Begitu juga sebaliknya hehe :D
Mas Abed, seratus untuk Mas Abed hehe :D
Mas Rizky, saya kebetulan nggak tahu mas tentang widget Top Komentator untuk platform WordPress. Jadi saya nggak bisa berbicara banyak hehe :D
Mas Hekos, ide yang bagus itu mas. Jadi apabila blog kita tidak ingin berat loading nya dan atau jika blog kita sudah penuh dengan widget-widget yang lain, kita bisa pasang widget ini di dalam postingan atau halaman/page statis ya mas. Jadi lebih kelihatan Ok. Thanks mas hekos. Tumben ide nya bagus hehe :D
Mas Andria, ini orang aneh banget. Tiba-tiba melet-melet sendiri. Apa sudah kehabisa obat ya mas? wkwkwkwk Just kidding :D
Mas Arie, seratus untuk mas arie. Itu salah satu manfaat dan kegunaan widget ini ya mas apabila di pasang di web/blog kita :)
Mas Budi, seratus untuk mas budi hehe :D Saya malah nggak tahu soal awads mas. Maklum masih pemula di dunia blogging hehe :) Selamat idul adha juga mas bud :)
Mas Warim, wkwkwk tau aja nich mas warim :D
Mas Hayardin, betul itu mas. Jadi para komentator blog akan berlomba-lomba untuk berkomentar di blog kita jika blog kita dipasang widget ini. Jadi ini sebuah trik untuk memancing para komentator agar bisa antusias untuk memberikan komentar di blog kita. Istilahnya sebagai motivasi ya mas :)
Mas Awhnymous, nggak dicoba juga nggak apa-apa kok mas. Nggak wajib soalnya hehe :D
Mas Andes, terimakasih banyak mas atas tambahannya. Nanti akan segera diperbaiki agar widget ini valid HTML5 :)
Mas Anthonie, nggak dipasang juga nggak apa-apa kok mas. Soalnya blog saya juga nggak pasang widget Top Comment ini hehe :D
Kang Ucup, wkwkwk perhatian banget kang ucup :D Thanks ya kang sudah ikut meramaikan blog saya :)
Mang Yono, nggak izin juga nggak apa-apa master wkwkwk :D
bagus juga sih mbak buat nambah ilmu banyak yang saya dapat dari blog ini, makasih buat tutorialnya :)
Saya juga banyak mendapat ilmu kesehatan dari blog nya Mas Anthonie, Rahasia Hidup Sehat :)
Sebelumnya saya mo ngucapin Met Hari Raya Idul Adha buat mba' Ririn, Mohon maaf lahir & bathin ya mba'...semoga aja blom basi nie kalo dah basi ya tolong diangetin aja ya mba' hehehe :D
Untuk tutorialnya ta' bungkus dulu mba' seperti biasa mo coba praktekin, thanks banget udah berbagi ilmunya :)
Met idul adha juga ya mas. Silahkan dicoba mas untuk memasang widget ini di blog anda. Nanti akan ketahuan siapa saja yang sering dan paling banyak yang berkomentar di blog anda :)
Bagus Mbak Top Comments nya Cantik dan menarik
Ijin simak dan belajar, trik artikel Mbak Rin ini
Terima kasih atas artikel nya
Thanks ya mas karis sudah singgah di blog saya :)
Yah Mbak Rin.. Artikel dengan Adminya sami cantik nya
Sukses terus berkaya yah Mbak...
macak cih? hehe :)
artikel yang menarik, saya bookmark dulu laman nya mana tau saya tertarik pasang nya
thanks ya
Silahkan mas gusti. Terimakasih sudah singgah di blog saya :)
Tes ijin gabung ...
Mau nanya nich ...apakah script tersebut di atas
bisa dipakai pada blog wordpress ... ?
Tnk's !
Post a Comment