Tutorial Pasang Widget Top Commentator Blogger & Custom Design

Salah satu cara paling berkesan untuk meningkatkan engagement blog ialah dengan memberi penghargaan kepada pembaca yang rajin meninggalkan komen. Antara widget yang masih relevan sehingga hari ini ialah Top Commentator Widget.

Dengan widget ini:

• Pembaca lebih terdorong untuk komen
• Nama mereka dipaparkan sebagai “Top Commentator”
• Blog nampak lebih aktif & hidup

Dalam artikel ini, aku akan tunjukkan:

• Cara pasang kod asal Top Commentator
• Kod CSS penting sahaja untuk custom design
• Beberapa contoh design siap copy–paste

Script asal tidak diubah, kita cuma custom melalui CSS.

Cara Pasang Widget Top Commentator

1. Login Blogger

2. Pilih Layout → Add a Gadget → HTML/JavaScript

3. Copy and paste kod di bawah ini, dan SAVE.

<style type="text/css">
#bcd-140504-widget-top-commentator .avatar {
float: left;
margin: 0 8px 0 0;
display: block;
}
#bcd-140504-widget-top-commentator .avatar img {
min-width: 32px!important;
max-width: 32px!important;
min-height: 32px!important;
max-height: 32px!important;
border-radius: 100px;
}
#bcd-140504-widget-top-commentator .content a {
font-weight: bold;
}
#bcd-140504-widget-top-commentator .content span {
display: block;
color: #999;
font-size: 10px;
font-style: italic;
}
#bcd-140504-widget-top-commentator .item {
margin: 10px 0;
}
#bcd-140504-widget-top-commentator .order-number {
font-size: 30px;
color: #999;
font-style: italic;
float: left;
margin: 0 10px 0 0;
}
</style>


<script type="text/JavaScript">
var _140504_Day_Number = 60;
var _140504_Name_Number = 5;
var _140504_Lang_comments = 'comments';
var _140504_Show_Thumbnail = true;
var _140504_Show_Order_Number = true;
var host = 'https://www.yourblog.com/';
</script>
<script src="https://www.yourblog.com/feeds/comments/summary?alt=json-in-script&callback=_fKlD"></script>

📌 Nota penting

✔ Jangan ubah function atau script panjang
✔ Kod ini hanya dipasang sekali sahaja.

✔ Ubah URL HIGHLIGHT dengan url blog korang

TAMBAH KOD CSS CUSTOM (COPY–PASTE)

1. Login Blogger

2. Pilih Theme → Customize → Advanced → Add CSS

3. Pilih mana-mana custom design di bawah. Hanya boleh guna SATU KOD sahaja. Kemudian SAVE.

🎨 DESIGN 1 — Minimal Clean

#bcd-140504-widget-top-commentator {

  background:#fff;

  padding:10px;

  border-radius:8px;

}

#bcd-140504-widget-top-commentator .item {

  padding:6px 0;

  border-bottom:1px dashed #eee;

}

#bcd-140504-widget-top-commentator .item-0 {

  background:#f9f9f9;

  padding:8px;

  border-radius:6px;

}

🏆 DESIGN 2 — Trophy Top Commentator

#bcd-140504-widget-top-commentator .item-0 {

  background:#fff6d8;

  border:1px solid #f2c94c;

  padding:10px;

  border-radius:8px;

  position:relative;

}

#bcd-140504-widget-top-commentator .item-0::before {

  content:"🏆 TOP COMMENTATOR";

  position:absolute;

  top:-10px;

  right:10px;

  font-size:11px;

}

🌸 DESIGN 3 — Soft Pastel

#bcd-140504-widget-top-commentator {
background:#fff0f5;
padding:12px;
border-radius:10px;
}
#bcd-140504-widget-top-commentator .item {
background:#fff;
margin:6px 0;
padding:8px;
border-radius:8px;
}

⚫ DESIGN 4 — Dark Elegant

#bcd-140504-widget-top-commentator {
background:#1e1e1e;
padding:12px;
border-radius:8px;
}
#bcd-140504-widget-top-commentator a {
color:#f1f1f1;
}
#bcd-140504-widget-top-commentator .item-0 {
border-left:4px solid gold;
}

📦 DESIGN 5 — Card Stack

#bcd-140504-widget-top-commentator .item {
background:#fff;
border:1px solid #eee;
padding:8px;
margin-bottom:8px;
border-radius:6px;
}
#bcd-140504-widget-top-commentator .item-0 {
border-color:#f2c94c;
}

CARA NAK UBAH KOD ASAL

Cari kod ini dalam script asal:

<script type="text/JavaScript">
var _140504_Day_Number = 60;
var _140504_Name_Number = 5;
var _140504_Lang_comments = 'comments';
var _140504_Show_Thumbnail = true;
var _140504_Show_Order_Number = true;
var host = 'https://www.yourblog.com/';
</script>

Kod	Fungsi	Contoh Ubah
_140504_Day_Number	Tempoh komen dikira (dalam hari)	30 = 30 hari
_140504_Name_Number	Bilangan Top Commentator dipaparkan	10 = Top 10
_140504_Lang_comments	Teks jumlah komen	"komen"
_140504_Show_Thumbnail	Papar atau buang avatar	false = buang avatar
_140504_Show_Order_Number	Papar nombor ranking	false = buang nombor

CARA UBAH WARNA & FONT (KOD CSS)

1. Warna Background Widget

#bcd-140504-widget-top-commentator {

  background:#fffaf0;

}

2. Warna Top #1 Sahaja

#bcd-140504-widget-top-commentator .item-0 {

  background:#fff3cd;

}

3. Font Seluruh Widget

#bcd-140504-widget-top-commentator {
font-family:'Poppins', sans-serif;
}

4. Font Nama Sahaja

#bcd-140504-widget-top-commentator .content a {
font-family:'Montserrat', sans-serif;
font-weight:600;
}

KESIMPULAN

✔ Pasang kod asal sekali sahaja
✔ Custom design hanya guna CSS
✔ Tak perlu sentuh script rumit
✔ Boleh tukar-tukar design bila-bila masa

Dengan sedikit sentuhan CSS, widget Top Commentator boleh nampak jauh lebih kemas, moden dan menarik — sekali gus meningkatkan interaksi pembaca di blog korang.

Selamat mencuba!