Cara Membuat FAQ Buka Tutup di Blogger dengan HTML

FAQ buka tutup di Blogger dapat dibuat memakai elemen HTML details dan summary, tanpa menambahkan JavaScript. Pertanyaan menjadi label yang dapat diaktifkan, sedangkan jawaban berada di dalam kotak yang dibuka pembaca. Mulailah dari isi draf dan periksa hasilnya sebelum digunakan pada artikel.

Contoh dalam panduan ini ditampilkan sebagai teks kode, bukan FAQ aktif. Anda dapat menyalinnya sebagai satu komponen isi postingan. Pertanyaan dan jawabannya bersifat ilustratif; sesuaikan dengan kebutuhan pembaca, tanpa menyalin klaim produk atau layanan yang belum diperiksa.

Tentukan pertanyaan yang memang membantu pembaca

Pilih pertanyaan yang jawabannya melengkapi pembahasan. Misalnya, tutorial pemasangan dapat menjelaskan apa yang perlu dicadangkan atau bagaimana memeriksa hasil. Jangan mengubah seluruh artikel menjadi rangkaian kotak hanya agar halaman tampak pendek.

Pertahankan informasi inti pada alur utama. Pembaca sebaiknya tetap memahami tujuan, langkah penting, dan batas panduan tanpa harus membuka setiap jawaban. Gunakan FAQ untuk penjelasan tambahan yang masuk akal dipilih sesuai kebutuhan.

Tulis pertanyaan dengan kata yang jelas, bukan label seragam seperti “Baca di sini”. Jawaban perlu langsung menjawab pertanyaan tersebut. Jika isinya sudah menjadi satu bagian panjang yang berdiri sendiri, pertimbangkan mempertahankannya sebagai bagian artikel biasa.

Sebelum menyunting postingan penting, simpan salinan isinya. Panduan backup Blogger membantu menyiapkan catatan cadangan yang lebih luas. Untuk latihan komponen ini, gunakan salinan draf agar perubahan mudah ditinjau.

Kenali fungsi details dan summary

Dokumentasi details MDN menjelaskan elemen ini sebagai kotak pengungkapan yang dapat dibuka dan ditutup. Atribut open menentukan keadaan awal: tanpa atribut itu kotak tertutup, sedangkan keberadaannya membuat isi terbuka.

Open adalah atribut boolean. Menulis open="false" tetap membuatnya terbuka; untuk keadaan awal tertutup, hapus atribut open seluruhnya. Contoh memakai dua kotak terpisah sehingga pembaca dapat membuka lebih dari satu jawaban sekaligus.

Dokumentasi summary MDN menjelaskan bahwa summary menjadi label dan harus ditempatkan sebagai anak pertama details. Gunakan pertanyaan dalam teks biasa di dalamnya. Letakkan paragraf jawaban setelah summary, lalu tutup elemen details sebelum memulai pasangan berikutnya.

Contoh mempertahankan penanda buka tutup bawaan browser. Tidak ada tombol tambahan, atribut status ARIA buatan, atau aturan CSS global yang perlu ditempel ke tema. Gaya inline hanya memberi jarak dan batas pada komponen.

Salin contoh ke isi draf melalui Tampilan HTML

Buka draf yang akan dipakai, lalu pilih Tampilan HTML pada editor postingan. Tempel contoh setelah paragraf yang sudah ditutup. Jangan memasukkannya ke judul, deskripsi penelusuran, atau kode tema. Jika ragu, mulai dari draf percobaan yang tidak berisi materi penting.

<div style="max-width:100%;margin:1rem 0;">
  <details style="margin:0 0 0.75rem;padding:0.75rem;border:1px solid #94a3b8;border-radius:0.5rem;">
    <summary style="font-weight:600;cursor:pointer;">Di mana kode FAQ ditempatkan?</summary>
    <p>Tempelkan kode pada Tampilan HTML isi draf, lalu periksa melalui Pratinjau.</p>
  </details>
  <details style="margin:0 0 0.75rem;padding:0.75rem;border:1px solid #94a3b8;border-radius:0.5rem;">
    <summary style="font-weight:600;cursor:pointer;">Bagaimana mengubah pertanyaan?</summary>
    <p>Sunting teks pertanyaan dan sesuaikan jawaban di bawahnya dengan isi artikel.</p>
  </details>
</div>

Ganti dua pertanyaan dan jawabannya sambil mempertahankan struktur tag. Jika membutuhkan pertanyaan tambahan, salin satu pasangan details secara lengkap. Tidak ada jumlah FAQ wajib dalam contoh ini; gunakan sebanyak yang diperlukan untuk menjawab kebutuhan yang berbeda.

Kode dari kotak di atas siap ditempatkan pada Tampilan HTML. Tag terlihat sebagai teks pada tutorial ini; pada pratinjau draf percobaan, yang diharapkan tampil adalah dua pertanyaan yang bisa dibuka.

Bantuan pengelolaan postingan Blogger menyediakan langkah menyimpan draf dan membuka Preview. Simpan perubahan, buka Pratinjau, lalu periksa kembali sesudah memuat ulang editor. Nama kontrol dapat mengikuti bahasa antarmuka yang digunakan.

Jika hasil berbeda, periksa terlebih dahulu apakah kode ditempel pada mode yang tepat, seluruh tag tersalin, serta jawabannya berada di dalam details yang sesuai. Hindari memperbaikinya dengan menambahkan skrip yang tidak diperlukan.

Periksa keyboard, fokus, dan tampilan ponsel

Panduan Keyboard W3C WAI menjelaskan pentingnya fungsi yang dapat dioperasikan melalui keyboard. Dalam pratinjau, gunakan Tab untuk mencapai pertanyaan, lalu coba membukanya dengan Space. Pastikan Anda dapat melanjutkan ke pertanyaan berikutnya dan isi setelah FAQ.

Kemampuan membuka dengan Space juga dijelaskan pada dokumentasi details. Uji ulang melalui sentuhan pada ponsel. Periksa apakah pertanyaan panjang tetap membungkus dengan baik dan jawaban tidak membuat halaman melebar.

Panduan Focus Visible W3C WAI menekankan bahwa pengguna keyboard perlu mengetahui elemen yang sedang menerima fokus. Pertahankan indikator fokus yang terlihat. Jangan menghapus outline hanya karena tampilan garisnya terasa kurang sesuai dengan desain.

MDN memperingatkan adanya perbedaan perilaku summary pada browser dan teknologi bantu, terutama ketika label memuat heading. Contoh memakai teks pertanyaan biasa; tetap periksa hasil pada perangkat dan pembaca layar yang tersedia sebelum menganggapnya siap digunakan.

Gunakan checklist pengujian template Blogger untuk meninjau ruang konten, navigasi, dan kenyamanan halaman di sekitar FAQ. Catat browser, perangkat, serta masalah yang ditemukan agar perbaikannya terarah.

Catat hasil untuk empat hal: pertanyaan terbaca, jawaban sesuai, kontrol dapat dioperasikan, dan isi nyaman di layar kecil. Jika ada kegagalan, tuliskan tindakan yang Anda lakukan serta hasil yang muncul. Sertakan pertanyaan mana yang bermasalah dan apakah masalah dapat diulang. Catatan itu lebih berguna bagi peninjau daripada keterangan umum “FAQ tidak jalan”.

Rawat isi FAQ dan pisahkan dari fitur pencarian

Tinjau jawaban ketika prosedur, produk, atau kebijakan yang dibahas berubah. Hapus pertanyaan yang hanya mengulang judul artikel tanpa memberi jawaban baru. Bila jawaban merujuk panduan lain, pastikan tujuannya masih relevan dan dapat dibuka.

Komponen buka tutup ini mengatur penyajian isi untuk pembaca. Ia tidak menambahkan data terstruktur secara otomatis. Pembaruan resmi Google Search menyebut fitur FAQ rich result tidak lagi muncul sejak 7 Mei 2026. Karena itu, jangan menjual pemasangan FAQ sebagai cara memperoleh tampilan khusus tersebut.

Simpan catatan lokasi komponen dan alasan pemilihan pertanyaannya. Saat meninjau draf berikutnya, periksa isi lebih dahulu, kemudian perilaku buka tutup. Contoh HTML ini tidak menjanjikan peringkat, kecepatan pengindeksan, atau hasil pencarian tertentu.