Cara Membuat Widget Most Commented Posts Blogger

Cara Membuat Widget Top Most Commented Pages Blogger

Widget Top Most Commented Pages digunakan untuk menampilkan posting Blogger yang memperoleh jumlah komentar paling banyak. Bagi pengunjung, widget seperti ini dapat menjadi jalan pintas untuk menemukan artikel yang ramai dibicarakan. Bagi pemilik blog, daftar tersebut juga memberi gambaran sederhana tentang konten mana yang berhasil memancing percakapan.

Pada artikel versi lama, widget mengambil data dari feed posting Blogger kemudian mengurutkannya berdasarkan jumlah komentar. Konsep tersebut masih menarik, tetapi tampilan dan script-nya dapat dibuat lebih modern. Versi baru di bawah ini menggunakan JavaScript native, tidak membutuhkan jQuery, responsif untuk sidebar, dan menampilkan posting teratas sebagai featured item.

COMMUNITY DISCOVERY Temukan posting yang paling banyak dibicarakan

Jumlah komentar bukan ukuran mutlak kualitas artikel, tetapi dapat menjadi sinyal bahwa sebuah topik berhasil mengundang respons dari pembaca.

Apa Itu Widget Top Most Commented Blogger?

Secara sederhana, widget ini membaca daftar posting dari feed Blogger, mengambil jumlah komentar setiap posting, kemudian mengurutkannya dari jumlah komentar tertinggi. Hasilnya dapat ditempatkan di sidebar, footer, atau area lain sebagai daftar artikel yang sedang atau pernah ramai didiskusikan.

CATATAN ISTILAH Lebih tepat disebut “Most Commented Posts” Kode lama menggunakan feed /feeds/posts/default, sehingga yang diurutkan sebenarnya adalah posting blog, bukan halaman statis Blogger. Nama “Top Most Commented Pages” tetap dipertahankan karena sudah dikenal dari artikel lama.

Mengapa Widget Ini Menarik Digunakan?

Menemukan Diskusi AktifPengunjung dapat melihat artikel yang mendapatkan respons paling banyak dari komunitas.

Discovery KontenMemberikan jalur tambahan untuk menjelajahi artikel selain recent posts atau popular posts.

Community SignalJumlah komentar dapat memberikan gambaran bahwa sebuah topik pernah mengundang percakapan.

Internal NavigationMembantu menghubungkan pengunjung ke posting lain di dalam blog.

Ramai komentar tidak selalu berarti artikel terbaikTopik kontroversial, giveaway, pertanyaan terbuka, atau artikel lama dapat memperoleh banyak komentar. Karena itu gunakan widget sebagai alat discovery, bukan sebagai peringkat kualitas konten.

Live Preview Widget Most Commented Posts

Preview berikut mengambil feed dari blog tempat artikel ini dipasang. Posting dengan komentar terbanyak akan tampil sebagai featured item, sedangkan posting berikutnya ditampilkan sebagai daftar ringkas.

Generator Widget

Gunakan generator sederhana berikut untuk menentukan jumlah posting yang ingin ditampilkan. Setelah memilih jumlah item, kode lengkap akan diperbarui secara otomatis dan dapat langsung disalin ke gadget HTML/JavaScript Blogger.

WIDGET GENERATORMost Commented PostsAtur jumlah item lalu salin kode lengkap.

Jumlah posting

Untuk sidebar sempit, 5–6 item biasanya sudah cukup agar widget tetap ringkas.

READY TO USEKode Lengkap Widget

<div id="cfTopCommentedWidget">Loading...</div>

<script>
//<![CDATA[
(function(){
"use strict";

var root=document.getElementById("cfTopCommentedWidget");
if(!root)return;

var LIMIT=5;
var MAX_FETCH=150;

function esc(v){
return String(v==null?"":v)
.replace(/&/g,"&amp;")
.replace(/</g,"&lt;")
.replace(/>/g,"&gt;")
.replace(/"/g,"&quot;")
.replace(/'/g,"&#39;");
}

function altLink(entry){
var links=entry.link||[];
for(var i=0;i<links.length;i++){
if(links[i].rel==="alternate"){
return links[i].href||"#";
}
}
return "#";
}

function commentCount(entry){
if(entry["thr$total"] && entry["thr$total"].$t!=null){
var n=parseInt(entry["thr$total"].$t,10);
return isNaN(n)?0:n;
}

var links=entry.link||[];

for(var i=0;i<links.length;i++){
if(links[i].rel==="replies" && links[i].type==="text/html"){
var title=String(links[i].title||"");
var match=title.match(/\d+/);
return match?parseInt(match[0],10):0;
}
}

return 0;
}

function formatDate(value){
if(!value)return "";
var d=new Date(value);
if(isNaN(d.getTime()))return "";
return d.toLocaleDateString("id-ID",{
day:"2-digit",
month:"short",
year:"numeric"
});
}

function itemFromEntry(entry){
return {
title:entry.title && entry.title.$t ? entry.title.$t : "Tanpa Judul",
url:altLink(entry),
comments:commentCount(entry),
date:formatDate(entry.published && entry.published.$t)
};
}

function render(items){

if(!items.length){
root.innerHTML='<div class="cfTmcEmpty"><i class="fa fa-comment-o"></i> Data posting belum tersedia.</div>';
return;
}

var first=items[0];
var out='';

out+='<div class="cfTmcCard">';

out+='<div class="cfTmcHead">';
out+='<div><small>COMMUNITY SIGNAL</small><strong>Most Commented Posts</strong></div>';
out+='<span><i class="fa fa-comments"></i> TOP '+items.length+'</span>';
out+='</div>';

out+='<a class="cfTmcFeatured" href="'+esc(first.url)+'">';
out+='<div class="cfTmcFeaturedCount"><b>'+first.comments+'</b><small>COMMENTS</small></div>';
out+='<div class="cfTmcFeaturedBody">';
out+='<div class="cfTmcFeaturedLabel"><i class="fa fa-comments"></i><small>TOP DISCUSSION</small></div>';
out+='<strong>'+esc(first.title)+'</strong>';
if(first.date){
out+='<span><i class="fa fa-clock-o"></i> '+esc(first.date)+'</span>';
}
out+='</div>';
out+='<i class="fa fa-angle-right cfTmcArrow"></i>';
out+='</a>';

if(items.length>1){

out+='<div class="cfTmcList">';

items.slice(1).forEach(function(item,index){

out+='<a class="cfTmcItem" href="'+esc(item.url)+'">';
out+='<span class="cfTmcRank">'+String(index+2).padStart(2,"0")+'</span>';
out+='<div class="cfTmcItemBody">';
out+='<strong>'+esc(item.title)+'</strong>';
if(item.date){
out+='<small>'+esc(item.date)+'</small>';
}
out+='</div>';
out+='<span class="cfTmcComment"><i class="fa fa-comment"></i> '+item.comments+'</span>';
out+='</a>';

});

out+='</div>';
}

out+='<div class="cfTmcFoot">Powered by <a href="https://codeflare.net" target="_blank" rel="noopener">CodeFlare</a></div>';
out+='</div>';

root.innerHTML=out;
}

fetch(
location.origin+
"/feeds/posts/default?alt=json&max-results="+
MAX_FETCH,
{credentials:"same-origin",cache:"no-store"}
)
.then(function(res){
if(!res.ok)throw new Error("HTTP "+res.status);
return res.json();
})
.then(function(data){

var entries=
data &&
data.feed &&
Array.isArray(data.feed.entry)
? data.feed.entry
: [];

var items=entries
.map(itemFromEntry)
.sort(function(a,b){
return b.comments-a.comments;
})
.slice(0,LIMIT);

render(items);

})
.catch(function(){
root.innerHTML='<div class="cfTmcEmpty"><i class="fa fa-exclamation-circle"></i> Widget belum dapat memuat feed Blogger.</div>';
});

})();
//]]>
</script>

<style>
#cfTopCommentedWidget,
#cfTopCommentedWidget *{
box-sizing:border-box;
}

#cfTopCommentedWidget{
width:100%;
min-width:0;
font-family:Arial,sans-serif;
font-size:12px;
}

.cfTmcCard{
overflow:hidden;
border:1px solid rgba(0,131,218,.18);
border-radius:12px;
background:linear-gradient(145deg,rgba(0,131,218,.035),rgba(95,73,185,.022));
}

.cfTmcHead{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:9px 10px;
border-bottom:1px solid rgba(0,131,218,.12);
}

.cfTmcHead small,
.cfTmcHead strong{
display:block;
}

.cfTmcHead small{
font-size:10px;
font-weight:700;
letter-spacing:.6px;
color:#0083da;
}

.cfTmcHead strong{
font-size:13px;
line-height:1.35;
}

.cfTmcHead>span{
padding:4px 6px;
border-radius:5px;
background:#2b6384;
color:#fff;
font-size:10px;
font-weight:700;
white-space:nowrap;
}

.cfTmcHead>span i{
color:#fff;
}

.cfTmcFeatured{
display:grid;
grid-template-columns:58px minmax(0,1fr) 16px;
gap:9px;
align-items:center;
padding:10px;
background:linear-gradient(135deg,rgba(0,131,218,.07),rgba(94,72,180,.035));
text-decoration:none!important;
}

.cfTmcFeaturedCount{
height:58px;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
border-radius:10px;
background:linear-gradient(145deg,#087fc6,#075d98);
color:#fff;
box-shadow:0 5px 13px rgba(0,83,140,.15);
}


.cfTmcFeaturedCount b{
font-size:18px;
line-height:1.05;
color:#fff;
}

.cfTmcFeaturedCount small{
font-size:8px;
font-weight:700;
color:#fff;
}

.cfTmcFeaturedBody{
min-width:0;
}

.cfTmcFeaturedBody small,
.cfTmcFeaturedBody strong,
.cfTmcFeaturedBody span{
display:block;
}

.cfTmcFeaturedLabel{
display:flex;
align-items:center;
gap:5px;
margin-bottom:2px;
}

.cfTmcFeaturedLabel i{
font-size:11px;
color:#0083da;
}

.cfTmcFeaturedLabel small{
font-size:9px;
font-weight:700;
letter-spacing:.5px;
color:#0083da;
}

.cfTmcFeaturedBody strong{
font-size:12px;
line-height:1.42;
overflow-wrap:anywhere;
}

.cfTmcFeaturedBody span{
margin-top:3px;
font-size:10px;
opacity:.68;
}

.cfTmcArrow{
color:#0083da;
}

.cfTmcList{
padding:4px 9px 6px;
}

.cfTmcItem{
display:grid;
grid-template-columns:27px minmax(0,1fr) auto;
gap:7px;
align-items:center;
padding:7px 1px;
border-bottom:1px dashed rgba(127,145,155,.24);
text-decoration:none!important;
}

.cfTmcItem:last-child{
border-bottom:0;
}

.cfTmcRank{
width:25px;
height:25px;
display:flex;
align-items:center;
justify-content:center;
border-radius:6px;
background:rgba(0,131,218,.09);
color:#0083da;
font-size:10px;
font-weight:700;
}

.cfTmcItemBody{
min-width:0;
}

.cfTmcItemBody strong,
.cfTmcItemBody small{
display:block;
}

.cfTmcItemBody strong{
font-size:11px;
line-height:1.4;
overflow-wrap:anywhere;
}

.cfTmcItemBody small{
margin-top:2px;
font-size:9px;
opacity:.62;
}

.cfTmcComment{
padding:4px 5px;
border-radius:5px;
background:#2f667f;
color:#fff;
font-size:10px;
font-weight:700;
white-space:nowrap;
}

.cfTmcComment i{
color:#fff;
}

.cfTmcFoot{
padding:6px 8px;
border-top:1px solid rgba(0,131,218,.10);
font-size:9px;
text-align:center;
opacity:.70;
}

.cfTmcFoot a{
color:#0083da;
text-decoration:none;
}

.cfTmcEmpty{
padding:11px;
border:1px solid rgba(0,131,218,.16);
border-radius:9px;
font-size:11px;
text-align:center;
}

.cfTmcEmpty i{
color:#0083da;
}

@media(max-width:240px){

.cfTmcFeatured{
grid-template-columns:50px minmax(0,1fr);
}

.cfTmcFeaturedCount{
height:50px;
}

.cfTmcArrow{
display:none;
}

.cfTmcItem{
grid-template-columns:25px minmax(0,1fr);
}

.cfTmcComment{
grid-column:2;
justify-self:start;
}

}
</style>

Cara Memasang Widget di Blogger

Buka Tata Letak Blogger

Masuk ke dashboard Blogger kemudian pilih menu Tata Letak.

Pilih Area Widget

Tentukan sidebar, footer, atau area gadget lain yang ingin digunakan.

Tambahkan HTML/JavaScript

Pilih gadget HTML/JavaScript tanpa menambahkan resource jQuery tambahan.

Paste Kode Generator

Salin kode lengkap dari generator lalu tempel ke kotak konten gadget.

Simpan dan Uji

Buka blog pada desktop dan mobile untuk memastikan widget bekerja dan tampil proporsional.

Bagaimana Widget Menghitung Komentar?

Versi baru membaca feed posting Blogger dari domain tempat widget dipasang. Setiap entry diperiksa untuk menemukan jumlah komentar, lalu data diurutkan dari nilai tertinggi. Widget hanya membaca sejumlah posting terbaru sesuai batas feed internal, sehingga prosesnya tetap lebih ringan dibanding meminta ribuan posting sekaligus.

Feed BloggerAmbil daftar posting.

Comment CountBaca jumlah komentar tiap entry.

SortUrutkan terbesar ke terkecil.

RenderTampilkan featured + list.

WARNING

Widget bergantung pada feed Blogger dan data jumlah komentar yang tersedia pada entry. Jika feed dinonaktifkan, struktur Blogger berubah, atau sistem komentar eksternal digunakan tanpa sinkronisasi ke komentar Blogger, jumlah komentar yang tampil dapat berbeda dari sistem komentar lain.

Versi Sebelumnya

Kode berikut adalah versi lama dari artikel ini. Saya tetap menyimpannya sebagai referensi bagi pengguna yang masih memakai tampilan lama. Versi tersebut menggunakan JSONP feed dan jQuery untuk menulis hasil ke elemen widget.

<div id="most-comments"><div style="text-align:center;padding:5px;">Loading...</div></div>
<style scoped='' type='text/css'>
#most-comments{background:#fff;}
#most-comments li,#most-comments ul,#most-comments ul li{margin:0;list-style:none;color:#444;font-family:inherit;font-size:inherit}
#most-comments ul li{position:relative;overflow:hidden;background:inherit;margin:3.5px 0;padding:7px 10px 7px 50px;white-space:nowrap;text-overflow:ellipsis;box-shadow:inset 0 0 #0b4c81;border:1px solid #e6e6e6;transition:all .6s}
#most-comments ul li:hover{box-shadow:inset 300px 0 #0083da;background:#0083da;}
#most-comments ul li a{color:#444;font-weight:700;text-decoration:none;transition:all .3s}
#most-comments ul li a:hover,#most-comments ul li:hover a{color:#fff}
.count-most{position:absolute;left:0;top:0;width:40px;height:100%;margin:0;padding:7px 0;background-color:#0083da;color:#fff!important;text-align:center;transition:all .3s}
#most-comments ul li:hover .count-most{background-color:#0b4c81}
</style>
<script type='text/javascript'>
//<![CDATA[
var numPosts=5;
var postTitlear=new Array();
var postUrlar=new Array();
var postCommentar=new Array();
var totalpost;

function mostComment(j){var a=j.feed.entry.length;totalpost=a;
for(var f=0;f<a;f++){
var h=j.feed.entry[f];
var c=h.title.$t;var b;
var g;if(f==j.feed.entry.length){break}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];}};
postTitlear.push(c);
postUrlar.push(g);
postCommentar.push(b)}sortPosts();
var e='';
for(var f=0;f<numPosts;f++){e +='<li><span class="count-most">'+postCommentar[f]+'</span><a href="'+postUrlar[f]+'" title="'+postTitlear[f]+'" target="_blank">'+postTitlear[f]+'</a></li>';}
$('#most-comments').html('<ul>'+e+'</ul>');
}
function sortPosts(){function c(d,f){var e=postTitlear[d];
postTitlear[d]=postTitlear[f];
postTitlear[f]=e;
var e=postUrlar[d];
postUrlar[d]=postUrlar[f];
postUrlar[f]=e;
var e=postCommentar[d];
postCommentar[d]=postCommentar[f];
postCommentar[f]=e}
for(var b=0;b<postTitlear.length-1;b++){
for(var a=b+1;a<postTitlear.length;a++){
if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}
var script=document.createElement('script');
script.type='text/javascript';
script.src='https://'+window.location.hostname+'/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment';
document.body.appendChild(script);
//]]>
</script>

Gunakan versi lama hanya jika memang diperlukanUntuk instalasi baru, versi modern di atas lebih disarankan karena tidak membutuhkan jQuery dan tampilan sudah disesuaikan untuk sidebar modern serta layar mobile.

Tips Agar Widget Tetap Nyaman Digunakan

Batasi jumlah itemTerlalu banyak posting akan membuat sidebar menjadi panjang.

Gunakan font compactJudul tetap harus terbaca tanpa mendominasi widget lain.

Periksa mobileJumlah komentar dan judul harus tetap tersusun pada layar sempit.

Uji setelah perubahan templatePastikan selector dan feed tetap bekerja setelah template Blogger diperbarui.

Widget Most Commented Posts cocok digunakan sebagai pelengkap Popular Posts karena keduanya membaca sinyal yang berbeda. Popular Posts menonjolkan artikel berdasarkan popularitas versi Blogger, sedangkan widget ini secara khusus mengurutkan posting berdasarkan aktivitas komentar yang tersedia pada feed.

CODEFLARE DEVELOPMENT Butuh Widget Blogger dengan Tampilan Custom?

CodeFlare dapat membantu membuat widget feed, popular posts, recent comments, related posts, generator, dan komponen Blogger lain yang responsif.

Custom WidgetBlogger FeedJavaScriptResponsive UI

HUBUNGI CODEFLARE

No comments

💬 Share Your Thoughts & Join the Hall of Fame!

Punya pendapat atau tips tentang artikel ini? Tuliskan komentar kamu sekarang! 🚀

💎 Komentar yang bermanfaat, relevan, dan positif berkesempatan tampil di CodeFlare Hall of Fame dan masuk ke Top Commentators Widget.

👉 Comment now. Share your ideas. Get noticed on codeflare.net

Main Settings

Header Ads

Cara Membuat Widget Most Commented Posts Blogger

Apa Itu Widget Top Most Commented Blogger?

Mengapa Widget Ini Menarik Digunakan?

Live Preview Widget Most Commented Posts

Generator Widget

Cara Memasang Widget di Blogger

Bagaimana Widget Menghitung Komentar?

Versi Sebelumnya

Tips Agar Widget Tetap Nyaman Digunakan

No comments

Post Top Ad

Author Details

Post Bottom Ad

Comments

Top Users

Top Pages

Formulir Kontak

Subscribe

Category