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

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!