Beranda
Blogger

Cara Membuat Tombol Show/Hide Komentar di Blogspot

Panduan lengkap membuat tombol Show/Hide komentar di Blogspot. Pilih varian single toggle, dua tombol, auto-hide, collapse reply
NgasalBlog
Ilustrasi Membuat Tombol Show/Hide Komentar di Blogspot

Ingin halaman Blogspot lebih rapi, cepat, dan enak dibaca? Solusi paling sederhana adalah menambahkan tombol Show/Hide Comments (buka/tutup komentar). Dengan begitu, pembaca fokus pada konten utama terlebih dulu, sementara komentar tetap tersedia saat dibutuhkan.

Tutorial ini menyajikan beberapa varian implementasi—dari yang paling sederhana sampai yang kaya fitur—semuanya tetap ramah SEO, aksesibel, dan kompatibel dengan dark mode tema kamu.

Manfaat Show/Hide Komentar

  • UX lebih baik: konten utama tidak “ketiban” komentar panjang.
  • Performa: persepsi kecepatan meningkat karena elemen panjang tidak langsung memenuhi viewport.
  • SEO aman: komentar tetap ada di HTML, sehingga tetap bisa diindeks crawler.
  • Rapi di mobile: pengguna gawai tak perlu scroll terlalu jauh.

Struktur Dasar Komentar Blogger

Umumnya, area komentar di template Blogger punya kontainer bernama #comments. Pastikan ID/kelasnya benar di template kamu. Jika berbeda, ganti selector di skrip sesuai kebutuhan.

<!-- Contoh struktur minimal (sudah ada di template) -->
<div id="comments">
  <!-- isi komentar -->
</div>

Varian 1 — Single Toggle (Satu Tombol, Teks Berubah)

Varian ini paling populer: hanya satu tombol yang berganti label antara “Tampilkan Komentar” dan “Sembunyikan Komentar”. Ringkas, bersih, dan mudah.

Langkah:

  1. Letakkan skrip di bawah, sebelum tag </body>.
  2. Jika ID komentar bukan #comments, ganti di baris selector.
<script>
document.addEventListener("DOMContentLoaded",function(){
  var comments = document.getElementById("comments");
  if(!comments) return;
  // disembunyikan di awal
  comments.style.display = "none";
  // buat tombol
  var btn = document.createElement("a");
  btn.href = "javascript:void(0)";
  btn.className = "toggle-comments-btn";
  btn.setAttribute("role","button");
  btn.setAttribute("aria-controls","comments");
  btn.setAttribute("aria-expanded","false");
  btn.textContent = "Tampilkan Komentar";
  // sisipkan tombol di atas komentar
  comments.parentNode.insertBefore(btn, comments);
  // aksi klik
  btn.addEventListener("click", function(){
    var hidden = comments.style.display === "none";
    comments.style.display = hidden ? "block" : "none";
    btn.textContent = hidden ? "Sembunyikan Komentar" : "Tampilkan Komentar";
    btn.setAttribute("aria-expanded", hidden ? "true" : "false");
  });
});
</script>

Opsional: kalau kamu ingin dark mode menyentuh area komentar sesuai tema kamu yang menggunakan body.Night, tambahkan penyesuaian warna ringan berikut:

<style>
/* Penyesuaian halus untuk area komentar saat dark mode aktif (body.Night) */
body.Night #comments{background:#1e1e1e;color:#ddd}
body.Night #comments a{color:#9ecbff}
body.Night #comments .comment,
body.Night #comments .comment-form,
body.Night #comments .comments-content .comment-thread{background:#222;border-color:#333}
body.Night #comments .datetime,
body.Night #comments .comment .comment-footer .comment-timestamp a{color:#aaa}
</style>

Varian 2 — Dua Tombol (Open dan Close Terpisah)

Cocok jika kamu ingin tombol “Buka Komentar” dan “Tutup Komentar” tampil sebagai elemen terpisah (misalnya demi konsistensi ikon). Secara fungsional sama, hanya berbeda UX.

<script>
document.addEventListener("DOMContentLoaded",function(){
  var comments = document.getElementById("comments");
  if(!comments) return;
  comments.style.display = "none";
  var openBtn = document.createElement("a");
  openBtn.href = "javascript:void(0)";
  openBtn.className = "toggle-comments-open";
  openBtn.setAttribute("role","button");
  openBtn.setAttribute("aria-controls","comments");
  openBtn.setAttribute("aria-expanded","false");
  openBtn.textContent = "Tampilkan Komentar";
  var closeBtn = document.createElement("a");
  closeBtn.href = "javascript:void(0)";
  closeBtn.className = "toggle-comments-close";
  closeBtn.setAttribute("role","button");
  closeBtn.setAttribute("aria-controls","comments");
  closeBtn.setAttribute("aria-expanded","true");
  closeBtn.textContent = "Sembunyikan Komentar";
  closeBtn.style.display = "none";
  comments.parentNode.insertBefore(openBtn, comments);
  comments.parentNode.insertBefore(closeBtn, comments);
  openBtn.addEventListener("click", function(){
    comments.style.display = "block";
    openBtn.style.display = "none";
    closeBtn.style.display = "block";
    openBtn.setAttribute("aria-expanded","true");
    closeBtn.setAttribute("aria-expanded","true");
  });
  closeBtn.addEventListener("click", function(){
    comments.style.display = "none";
    closeBtn.style.display = "none";
    openBtn.style.display = "block";
    openBtn.setAttribute("aria-expanded","false");
    closeBtn.setAttribute("aria-expanded","false");
  });
});
</script>

Varian 3 — Auto-Hide Jika Komentar > X

Kalau komentarnya sedikit, biarkan tampil. Kalau banyak (misal > 10), otomatis disembunyikan dan tombol disediakan.

<script>
document.addEventListener("DOMContentLoaded",function(){
  var comments = document.getElementById("comments");
  if(!comments) return;
  var items = comments.querySelectorAll(".comment");
  var threshold = 10;
  if(items.length > threshold){
    comments.style.display = "none";
    var btn = document.createElement("a");
    btn.href="javascript:void(0)";
    btn.className="toggle-comments-btn";
    btn.setAttribute("role","button");
    btn.setAttribute("aria-controls","comments");
    btn.setAttribute("aria-expanded","false");
    btn.textContent="Tampilkan Komentar ("+ items.length +")";
    comments.parentNode.insertBefore(btn, comments);
    btn.addEventListener("click", function(){
      var hidden = comments.style.display === "none";
      comments.style.display = hidden ? "block" : "none";
      btn.textContent = hidden ? "Sembunyikan Komentar" : "Tampilkan Komentar ("+ items.length +")";
      btn.setAttribute("aria-expanded", hidden ? "true" : "false");
    });
  }
});
</script>

Varian 4 — Collapse Reply Saja

Pada diskusi panjang, kamu bisa biarkan komentar utama terbuka dan hanya “balasan (reply)” yang dilipat.

<script>
document.addEventListener("DOMContentLoaded",function(){
  var replies = document.querySelectorAll("#comments .comment-replies");
  if(!replies.length) return;
  replies.forEach(function(group){
    group.style.display = "none";
    var holder = group.parentNode; // .comment
    var btn = document.createElement("a");
    btn.href="javascript:void(0)";
    btn.className="toggle-reply-btn";
    btn.textContent="Tampilkan Balasan";
    btn.setAttribute("aria-expanded","false");
    holder.insertBefore(btn, group);
    btn.addEventListener("click",function(){
      var hidden = group.style.display === "none";
      group.style.display = hidden ? "block" : "none";
      btn.textContent = hidden ? "Sembunyikan Balasan" : "Tampilkan Balasan";
      btn.setAttribute("aria-expanded", hidden ? "true" : "false");
    });
  });
});
</script>

Varian 5 — Tanpa JavaScript (Menggunakan <details>)

Jika kamu menyukai solusi paling ringan dan bawaan browser, gunakan <details> dan <summary>. Kekurangannya, kontrol atas transisi terbatas. Kelebihannya, no-JS dan aksesibel secara default.

<!-- Bungkus #comments dengan details/summary di template (area post) -->
<details>
  <summary>Tampilkan Komentar</summary>
  <div id="comments"><!-- isi komentar --></div>
</details>

Catatan: Teks summary otomatis berubah sesuai status, namun tidak otomatis mengganti label. Kamu bisa menambah CSS kecil untuk mempercantik, tapi tetap biarkan gaya default agar menyatu dengan tema Blogger.

Dark Mode: Menyatu dengan body.Night

Template kamu menggunakan kelas body.Night untuk mode gelap. Agar tampilan komentar ikut gelap namun tetap “native Blogger”, gunakan pendekatan minimal berikut:

/* Dark mode halus mengikuti tema (body.Night) */
body.Night #comments{background:#1e1e1e;color:#ddd}
body.Night #comments .comment,
body.Night #comments .comment-form{background:#2a2a2a;border:1px solid #333}
body.Night #comments a{color:#9ecbff}
body.Night #comments .datetime{color:#aaa}
body.Night #comments input[type="text"],
body.Night #comments textarea{background:#2a2a2a;color:#ddd;border:1px solid #444}
body.Night #comments input[type="submit"]{background:#444;color:#fff;border:1px solid #555}
body.Night #comments input[type="submit"]:hover{background:#555}

Best Practice SEO & Aksesibilitas

  • Konten tetap di DOM: Gunakan display:none atau <details> agar komentar tetap ada di HTML.
  • Gunakan atribut ARIA: Tambahkan aria-controls dan aria-expanded pada tombol.
  • Hindari memindahkan elemen terlalu jauh: Sisipkan tombol di sekitar area komentar.
  • Mobile-first: Pastikan tombol mudah diklik dan label jelas.
  • Performa: Jika komentar > ratusan, pertimbangkan threshold (Varian 3) atau gunakan pagination komentar Blogger.

Masalah Umum & Solusinya

  • Tidak ada yang terjadi saat tombol diklik.
    Periksa ID kontainer komentar. Banyak template menggunakan #comments, tapi bisa berbeda.
  • Dua tombol (open/close) tampil berbeda gaya.
    Gunakan kelas yang konsisten atau satu tombol toggle.
  • Warna tidak ikut berubah saat night mode.
    Pastikan CSS dark mode ditargetkan ke body.Night.
  • Konflik dengan CSS tema.
    Jika tema memaksa gaya tertentu, tambahkan aturan spesifik secukupnya.

Contoh Ringkas yang Siap Tempel (Single Toggle)

Versi paling ringkas dan aman dipakai di hampir semua template:

<script>
document.addEventListener("DOMContentLoaded",function(){
  var el=document.getElementById("comments");
  if(!el) return;
  el.style.display="none";
  var a=document.createElement("a");
  a.href="javascript:void(0)";
  a.setAttribute("role","button");
  a.setAttribute("aria-controls","comments");
  a.setAttribute("aria-expanded","false");
  a.textContent="Tampilkan Komentar";
  el.parentNode.insertBefore(a,el);
  a.addEventListener("click",function(){
    var h=el.style.display==="none";
    el.style.display=h?"block":"none";
    a.textContent=h?"Sembunyikan Komentar":"Tampilkan Komentar";
    a.setAttribute("aria-expanded", h?"true":"false");
  });
});
</script>

FAQ

Apakah fitur Show/Hide ini berdampak pada SEO?

Tidak negatif. Komentar tetap berada di HTML sehingga tetap bisa diindeks.

Bisakah dipakai di semua template?

Bisa. Pastikan selector yang dituju benar (#comments atau sesuai struktur tema kamu).

Bagaimana dengan dark mode?

Jika tema memakai body.Night, tambahkan CSS kecil agar selaras.

Apakah perlu CSS tombol?

Tidak wajib. Secara default tombol mengikuti gaya Blogger. Jika ingin, tambahkan CSS sesuai selera.

Kesimpulan

Menambahkan tombol Show/Hide komentar di Blogspot adalah optimasi sederhana yang berdampak besar pada kenyamanan baca, tampilan, dan persepsi performa.

Pilih varian yang paling cocok: single toggle untuk ringkas, dua tombol untuk kontrol terpisah, auto-hide untuk komentar ramai, atau <details> untuk solusi tanpa JavaScript.

Pastikan tetap ramah SEO dan aksesibel dengan menjaga komentar di DOM serta menambahkan atribut ARIA.

Posting Komentar

Santai aja, ☕️ komentar apa pun asal nggak keluar jalur 😎