Cara Membuat Tombol Show/Hide Komentar di Blogspot

Table of Contents

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 (tetap alami, tanpa merombak gaya Blogger):

<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;
  // deteksi kasar jumlah komentar item (sesuaikan selector jika perlu)
  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,i){
    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 “Terbuka/Tertutup” 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 touch* berikut (tambahkan ke <style> template; sesuaikan warna jika perlu):

/* 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}

Blok di atas tidak mengubah tata letak, hanya mengadaptasi warna agar selaras ketika dark mode aktif.

Best Practice SEO & Aksesibilitas

• Konten tetap di DOM: Gunakan display:none atau details agar komentar tetap ada di HTML. Ini membantu crawler untuk tetap membaca komentar.
• Gunakan atribut ARIA: Tambahkan aria-controls dan aria-expanded pada tombol untuk aksesibilitas pembaca layar.
• Hindari memindahkan elemen terlalu jauh: Sisipkan tombol di sekitar area komentar agar konteksnya jelas.
• Mobile-first: Pastikan tombol mudah diklik (target ~44px) 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 ada juga yang memakai wrapper lain. Sesuaikan selector pada skrip.
• Dua tombol (open/close) tampil berbeda gaya.
  Pastikan kedua kelas berbagi aturan gaya yang sama, atau gunakan satu kelas bersama lalu bedakan hanya teksnya (lihat Varian 1).
• Warna tidak ikut berubah saat night mode.
  Pastikan aturan CSS dark mode ditargetkan ke body.Night dan selector turunannya (#comments, .comment, .comment-form, dll.). Tambahkan !important jika perlu, tetapi gunakan secukupnya.
• Konflik dengan CSS tema.
  Jika tema memaksa warna latar/teks, tambahkan aturan yang sedikit lebih spesifik namun tetap ringan. Hindari menimpa semua gaya bawaan Blogger.

Contoh Ringkas yang Siap Tempel (Single Toggle)

Ini versi paling ringkas yang 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. Justru halaman terasa lebih cepat dan rapi.

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 penyesuaian warna ringan agar komentar selaras saat dark mode aktif.

Apakah perlu CSS tombol?

Tidak wajib. Contoh di atas sengaja membiarkan gaya tombol mengikuti bawaan Blogger agar konsisten. Jika ingin mempercantik, tambahkan sedikit 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 yang ringkas, dua tombol jika ingin kontrol terpisah, auto-hide untuk blog dengan komentar ramai, atau bahkan <details> jika ingin solusi tanpa JavaScript.

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