Cara Membuat Widget Top Commentator Blogger yang Modern

---

Interaksi dan partisipasi pembaca merupakan bagian menarik dari sebuah blog. Salah satu cara sederhana untuk memberikan apresiasi kepada pembaca yang aktif adalah melalui widget Top Commentator atau Top Users, yaitu daftar nama komentator yang paling sering berpartisipasi dalam percakapan di blog.

Widget ini membaca feed komentar Blogger, mengelompokkan komentar berdasarkan identitas penulis, menghitung jumlah kontribusinya, kemudian menampilkan beberapa komentator teratas. Selain menjadi elemen komunitas, daftar tersebut dapat membuat sidebar terasa lebih hidup karena menampilkan orang-orang yang benar-benar ikut berdiskusi.

COMMUNITY RECOGNITIONBerikan ruang untuk pembaca yang aktif berdiskusi

Top Commentator bukan kompetisi SEO. Fungsi utamanya adalah menampilkan aktivitas komunitas dan memberikan apresiasi visual kepada pembaca yang sering berkomentar.

Apa Itu Widget Top Commentator?

Top Commentator adalah widget yang menghitung berapa kali seorang pengguna muncul sebagai penulis komentar pada feed komentar Blogger. Setelah data terkumpul, pengguna diurutkan berdasarkan jumlah komentar dan beberapa nama teratas ditampilkan bersama avatar serta jumlah kontribusinya.

CARA KERJAFeed komentar → identitas pengguna → jumlah komentar → rankingHasil widget mengikuti data yang tersedia pada sistem komentar Blogger. Jika blog menggunakan sistem komentar eksternal, data tersebut belum tentu tersedia pada feed Blogger.

Mengapa Top Commentator Menarik untuk Blog?

Apresiasi PembacaMemberikan pengakuan sederhana kepada pembaca yang sering ikut berdiskusi.

Mendorong PercakapanDaftar pengguna aktif dapat membuat komunitas komentar terasa lebih terlihat.

Community IdentityPengunjung dapat mengenali nama-nama yang sering hadir di ruang komentar.

Melihat AktivitasPemilik blog memperoleh gambaran sederhana mengenai siapa yang aktif berpartisipasi.

Utamakan kualitas komentarRanking sebaiknya tidak mendorong pembaca mengirim komentar pendek atau spam hanya untuk mengejar posisi. Moderasi dan kualitas diskusi tetap lebih penting daripada angka.

Live Preview Top Commentator

Preview berikut membaca komentar dari blog tempat artikel dipasang. Pengguna dengan kontribusi terbanyak ditempatkan di posisi pertama dengan penanda khusus, sementara pengguna berikutnya disusun sebagai community list.

Loading...

Generator Widget Top Commentator

Pilih jumlah pengguna yang ingin ditampilkan. Generator akan mengubah nilai LIMIT pada kode widget tanpa menyimpan tag script sebagai string JavaScript, sehingga lebih aman ketika artikel diedit melalui HTML Blogger.

WIDGET GENERATORTop Commentator BloggerAtur jumlah pengguna lalu copy kode lengkap.

Jumlah Top Users

5

READY TO USEKode Lengkap Widget

<div id="cfTopUsers">Loading...</div> <script> //<![CDATA[ (function(){ "use strict"; var root=document.getElementById("cfTopUsers"); if(!root)return; var LIMIT=5; var MAX_COMMENTS=200; var EXCLUDE=["Anonymous","Unknown"]; function esc(v){ return String(v==null?"":v) .replace(/&/g,"&amp;").replace(/</g,"&lt;") .replace(/>/g,"&gt;").replace(/"/g,"&quot;") .replace(/'/g,"&#39;"); } function profile(author){ return author && author.uri && author.uri.$t ? author.uri.$t : ""; } function avatar(author){ var fallback="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnumu43ZhSbqZUUyALRvtZZS26CAwoOCJQ9mg5HHnx_gTr8p9CcohFOglUdzHKILsEb2jkaMXcODDbc1uqj-tJ62pZtS263yesxA8vc9V0DccNKfuDeI9DfTWhlQPVJ3ZSsRxrKYUvGlM/s1600/avatar_blue_m_96.png"; var src=author && author["gd$image"] && author["gd$image"].src ? author["gd$image"].src : fallback; return src.replace(/\/s\d+(-c)?\//,"/s64-c/"); } function render(users){ if(!users.length){ root.innerHTML='<div class="cfTuEmpty"><i class="fa fa-comment-o"></i> Belum ada data komentator.</div>'; return; } var out='<div class="cfTuCard">'; out+='<div class="cfTuHead"><div><small>COMMUNITY BOARD</small><strong>Top Commentators</strong></div><span><i class="fa fa-trophy"></i> TOP '+users.length+'</span></div>'; out+='<div class="cfTuList">'; users.forEach(function(u,i){ var href=u.url||"#"; out+='<a class="cfTuItem" href="'+esc(href)+'"'+(u.url?' target="_blank" rel="noopener"':'')+'>'; out+='<span class="cfTuRank">'+String(i+1).padStart(2,"0")+'</span>'; out+='<img class="cfTuAvatar" src="'+esc(u.avatar)+'" alt="'+esc(u.name)+'" loading="lazy" />'; out+='<div class="cfTuUser"><strong>'+esc(u.name)+'</strong><small>'+(i===0?'TOP CONTRIBUTOR':'COMMUNITY MEMBER')+'</small></div>'; out+='<span class="cfTuCount"><b>'+u.count+'</b><small>COMMENTS</small></span>'; out+='</a>'; }); out+='</div>'; out+='<div class="cfTuFoot">Powered by <a href="https://codeflare.net" target="_blank" rel="noopener">CodeFlare</a></div>'; out+='</div>'; root.innerHTML=out; } fetch(location.origin+"/feeds/comments/default?alt=json&max-results="+MAX_COMMENTS,{credentials:"same-origin",cache:"no-store"}) .then(function(r){if(!r.ok)throw new Error("HTTP "+r.status);return r.json();}) .then(function(data){ var entries=data&&data.feed&&Array.isArray(data.feed.entry)?data.feed.entry:[]; var map={}; entries.forEach(function(entry){ var author=entry.author&&entry.author[0]?entry.author[0]:null; if(!author||!author.name)return; var name=author.name.$t||"Anonymous"; if(EXCLUDE.indexOf(name)!==-1)return; var url=profile(author); var key=name+"|"+url; if(!map[key])map[key]={name:name,url:url,avatar:avatar(author),count:0}; map[key].count++; }); var users=Object.keys(map).map(function(k){return map[k];}) .sort(function(a,b){return b.count-a.count||a.name.localeCompare(b.name);}) .slice(0,LIMIT); render(users); }) .catch(function(){ root.innerHTML='<div class="cfTuEmpty"><i class="fa fa-exclamation-circle"></i> Feed komentar belum dapat dimuat.</div>'; }); })(); //]]> </script> <style> #cfTopUsers,#cfTopUsers *{box-sizing:border-box} #cfTopUsers{width:100%;min-width:0;font-family:Arial,sans-serif;font-size:12px} .cfTuCard{overflow:hidden;border:1px solid rgba(0,131,218,.17);border-radius:12px;background:linear-gradient(145deg,rgba(0,131,218,.035),rgba(103,76,180,.025))} .cfTuHead{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:9px 10px;border-bottom:1px solid rgba(0,131,218,.11)} .cfTuHead small,.cfTuHead strong{display:block}.cfTuHead small{font-size:9px;font-weight:700;letter-spacing:.6px;color:#0083da}.cfTuHead strong{font-size:13px} .cfTuHead>span{padding:4px 6px;border-radius:5px;background:#315f80;color:#fff;font-size:9px;font-weight:700;white-space:nowrap}.cfTuHead>span i{color:#fff} .cfTuList{padding:5px 9px} .cfTuItem{display:grid;grid-template-columns:25px 38px minmax(0,1fr) auto;gap:7px;align-items:center;padding:7px 1px;border-bottom:1px dashed rgba(127,145,155,.22);text-decoration:none!important} .cfTuItem:last-child{border-bottom:0}.cfTuItem:first-child{margin:2px 0;padding:8px 6px;border:1px solid rgba(213,142,51,.15);border-radius:8px;background:rgba(213,142,51,.045)} .cfTuRank{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:rgba(0,131,218,.09);color:#0083da;font-size:9px;font-weight:700} .cfTuItem:first-child .cfTuRank{background:#b4772d;color:#fff} .cfTuAvatar{display:block;width:36px;height:36px;object-fit:cover;border:2px solid rgba(0,131,218,.16);border-radius:50%} .cfTuUser{min-width:0}.cfTuUser strong,.cfTuUser small{display:block}.cfTuUser strong{font-size:11px;line-height:1.35;overflow-wrap:anywhere}.cfTuUser small{margin-top:2px;font-size:8px;color:#0083da;font-weight:700} .cfTuCount{min-width:43px;padding:4px 5px;border-radius:6px;background:#315f80;color:#fff;text-align:center}.cfTuCount b,.cfTuCount small{display:block;color:#fff}.cfTuCount b{font-size:13px;line-height:1}.cfTuCount small{font-size:7px} .cfTuFoot{padding:6px 8px;border-top:1px solid rgba(0,131,218,.09);font-size:9px;text-align:center;opacity:.72}.cfTuFoot a{color:#0083da;text-decoration:none;font-weight:700} .cfTuEmpty{padding:10px;border:1px solid rgba(0,131,218,.14);border-radius:8px;text-align:center;font-size:10px}.cfTuEmpty i{color:#0083da} @media(max-width:250px){.cfTuItem{grid-template-columns:24px 34px minmax(0,1fr)}.cfTuAvatar{width:32px;height:32px}.cfTuCount{grid-column:3;justify-self:start}} </style>

Cara Memasang di Blogger

01

Buka Tata LetakMasuk ke dashboard Blogger dan pilih blog yang ingin dipasang widget.

02

Tambah GadgetPilih area sidebar atau footer lalu tambahkan gadget HTML/JavaScript.

03

Copy KodeAtur jumlah pengguna pada generator kemudian tekan Copy Kode Lengkap.

04

Paste dan SimpanTempel seluruh kode ke gadget HTML/JavaScript dan simpan perubahan.

05

Periksa HasilBuka blog pada desktop dan mobile untuk memastikan feed serta layout tampil normal.

Pengaturan Penting pada Kode

var LIMIT=5;Jumlah penggunaMenentukan jumlah Top Commentator yang ditampilkan.

var MAX_COMMENTS=200;Data komentarJumlah komentar terbaru yang dibaca untuk membuat ranking.

var EXCLUDE=[...]Pengecualian namaTambahkan nama yang tidak ingin ikut dihitung, misalnya Anonymous atau nama admin.

WARNING

Ranking dibuat dari komentar yang berhasil dibaca dari feed Blogger, bukan seluruh riwayat tanpa batas. Jika jumlah komentar blog sangat besar, nilai MAX_COMMENTS menentukan seberapa luas data terbaru yang dianalisis.

Tentang Kode Widget Lama

Artikel sebelumnya menggunakan script yang lebih panjang, pagination feed melalui JSONP, manipulasi DOM lama, serta ketergantungan jQuery pada bagian akhir. Versi artikel ini menggunakan pendekatan yang lebih ringkas dan JavaScript native. Karena itu instalasi baru tidak memerlukan jQuery hanya untuk menjalankan widget Top Commentator.

UPDATED IMPLEMENTATIONLebih ringkas untuk penggunaan baruKonsep utama tetap sama: membaca feed komentar, menghitung kontribusi pengguna, mengurutkan ranking, dan menampilkan avatar serta jumlah komentar.

Top Commentator Bukan Faktor Ranking SEO

Widget ini sebaiknya dipandang sebagai fitur komunitas dan navigasi sosial di dalam blog. Banyaknya komentar atau tampilnya nama pengguna di daftar Top Commentator tidak secara otomatis membuat halaman mendapatkan ranking lebih tinggi di mesin pencari. Yang lebih penting adalah apakah percakapan tersebut relevan, membantu pembaca, dan tidak berubah menjadi spam.

Diskusi relevanKomentar berhubungan dengan topik artikel.

Kontribusi nyataPembaca menambahkan pengalaman, pertanyaan, atau informasi.

Bukan perlombaan spamJumlah komentar tidak boleh menjadi alasan mengirim tanggapan tanpa nilai.

Tips Mengelola Community Board

Kecualikan AdminTambahkan nama admin pada EXCLUDE jika ingin ranking hanya berisi pembaca.

Moderasi SpamJangan biarkan ranking menjadi motivasi untuk komentar berulang yang tidak relevan.

Jaga Tetap RingkasLima hingga tujuh pengguna biasanya cukup untuk sidebar.

Periksa MobileAvatar, nama, dan jumlah komentar harus tetap nyaman dibaca pada layar kecil.

CODEFLARE DEVELOPMENTButuh Widget Komunitas Blogger yang Lebih Custom?

CodeFlare dapat membantu membuat recent comments, top users, popular posts, feed widget, generator, atau tampilan sidebar Blogger sesuai karakter blog Anda.

HUBUNGI CODEFLARE