Cara Membuat Widget Komentar Terbaru di Blogger

Adam Muiz

Diperbarui: 23 Apr, 2025 • 0 • menit membaca

Daftar Isi

Halo teman-teman! Di artikel ini aku mau berbagi tips sederhana tapi cukup penting buat mempercantik blog kamu, yaitu cara membuat widget komentar terbaru di Blogger manual 🗿.

Seperti yang kita tahu, Blogger sayangnya belum menyediakan widget bawaan untuk menampilkan komentar terbaru. Karena itu, aku mencoba membuat sendiri dengan sedikit bantuan JavaScript dan CSS. Yuk langsung kita mulai!

Kenapa Perlu Widget Komentar Terbaru?

Menampilkan komentar terbaru di blogspot itu banyak manfaatnya. Selain membuat blog terlihat lebih hidup, pengunjung juga jadi tahu aktivitas terbaru di blog kita. Ini bisa meningkatkan interaksi, lho!

Tahapan Cara Membuat Gadget Komentar Terbaru di Blogspot

Kamu bisa HTML/Text sehingga bisa menempatkan kode HTML, CSS, JavaScript ini di blogspot yang digunakan. Nantinya script tersebut akan bekerja dan aktif secara otomatis.

Langkah 1: Siapkan Struktur HTML

Pertama, kita buat dulu tempat untuk menampung komentar-komentar yang akan ditampilkan. Tempelkan kode berikut di area widget Blogger kamu (pakai mode HTML ya):

<div id="comments-section">
  <div class="comments-title">💬 Komentar Terbaru</div>
  <div id="comments-list"></div>
</div>

Langkah 2: Tambahkan Script JavaScript

Setelah HTML siap, sekarang kita buat fungsinya supaya komentar terbaru bisa ditampilkan otomatis. Tempelkan kode berikut di bawah HTML tadi:

<script>
const blogUrl = 'https://www.adammuiz.com'; // Ganti dengan URL blog kamu
const maxComments = 5; // Mau tampilkan berapa komentar

fetch(`${blogUrl}/feeds/comments/default?alt=atom&orderby=published&max-results=${maxComments}`)
  .then(response => response.text())
  .then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
  .then(data => {
    const entries = data.getElementsByTagName('entry');
    const commentsList = document.getElementById('comments-list');

    if (entries.length === 0) {
      commentsList.innerHTML = '<p>Belum ada komentar.</p>';
      return;
    }

    let html = '';
    for (let i = 0; i < entries.length; i++) {
      const entry = entries[i];
      const author = entry.getElementsByTagName('author')[0].getElementsByTagName('name')[0].textContent;
      const content = entry.getElementsByTagName('summary')[0].textContent;
      html += `<div class="comment-item"><strong>${author}:</strong> ${content}</div>`;
    }

    commentsList.innerHTML = html;
  })
  .catch(error => {
    console.error('Gagal memuat komentar:', error);
    document.getElementById('comments-list').innerHTML = '<p>Gagal memuat komentar.</p>';
  });
</script>

Catatan: Jangan lupa ganti https://www.adammuiz.com dengan alamat blog kamu sendiri, ya!

Langkah 3: Percantik dengan CSS

Supaya tampilannya lebih rapi dan enak dilihat, tambahkan CSS berikut di bagian <style> blog kamu atau di dalam widget HTML tadi:

<style>
#comments-section {
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 10px;
  margin-top: 20px;
}

.comments-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
  color: #555;
}

.comment-item {
  padding: 8px;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
}

.comment-item:last-child {
  border-bottom: none;
}
</style>

Hasil Akhir

Kalau sudah mengikuti langkah-langkah di atas, sekarang blog kamu akan punya widget keren yang menampilkan komentar terbaru secara otomatis!

Penutup

Membuat widget komentar terbaru ini sebenarnya cukup sederhana, tapi hasilnya bisa membuat blog kamu lebih interaktif dan menarik. Kalau ada pertanyaan atau mau request tutorial lainnya, jangan sungkan buat komentar ya!

Adam Blog