Cara Membuat Halaman FAQ dengan Menu Accordion dari Bootstrap

Pernahkan teman-teman mendengar istilah halaman FAQ? Atau malah belum pernah mendengar tapi barangkali justru pernah menggunakannya? Dan boleh jadi istilah FAQ yang teman-teman temui sudah diadaptasi dengan bahasa kita yang merupakan terjemah dari singkatan Frequently Asked Questions.

Saya pikir semua website yang menyediakan layanan produk biasanya memiliki halaman ini. Entah dengan istilah FAQ atau Q&A (Questions And Answers). Contoh langsung yang bisa dilihat misalnya di rumahweb, prakerja, jagoanhosting dan yang lainnya.

Dari contoh tersebut terlihat ada yang menampilkannya dalam sebuah halaman (page) seperti Prakerja. Namun ada juga yang menampilkannya di beranda (home) seperti Rumah Web. Dan inti dari semua hal itu pada dasarnya sama saja cuma beda penempatannya.

Nah, terkait ini adakah teman-teman yang tertarik untuk membuat halaman FAQ sendiri? Berikut ini akan kami contohkan penerapannya menggunakan Bootstrap pada sebuah postingan blogspot. Dan seperti inilah hasil awal yang terlihat yang bisa dikembangkan lagi.

Cara Membuat Halaman FAQ dengan Menu Accordion dari Bootstrap

Halaman FAQ atau Tanya Jawab bisa dibuat dengan Menu Accordion. Agar lebih mudah kita akan menggunakan theme blogger yang dibangun dengan Bootstrap. Selanjutnya tempatkan kode ini pada "Theme" jika ingin menampilkannya di beranda (homepage).

Namun jika ingin menampilkannya seperti contoh di Prakerja. Berarti kode accordion halaman FAQ nanti diletakan melalui "tampilan HTML" saat membuat "Page". Sedangkan pada contoh di bawah ini kita akan membuat menu accordion pada sebuah postingan blog.

1. Login ke dashboard Blogger.

2. Pilih salah satu blog jika Anda memiliki banyak blog dalam satu akun.

3. Klik "Tema" atau "Theme".

4. Klik icon "▼" di sebelah tulisan SESUAIKAN.

5. Klik "Edit HTML".

6. Catatan bagi teman-teman yang belum menggunakan theme blogger berbasis Bootstrap. Masukan link CDN yang mengarah ke CSS Bootstrap versi terbaru, misalnya kode di bawah ini yang diletakan setelah tag <head> dan sebelum tag penutup </head> dan <b:skin><![CDATA[.

7. Selanjutnya, letakan link berikut yang mengarah ke JavaScript bawaan Bootstrap server CDN; jsdelivr atau penyedia CDN Bootstrap lainnya. Kode di bawah ini diletakan sebelum tag penutup </body>.

8. Letakan kode accordion yang sudah dibuat pada bagian yang diinginkan setelah tag <body> dan sebelum tag penutup </body>. Ini jika teman-teman menginginkan menu accordionnya akan tampil di halaman depan (root).

9. Simpan template.

10. Sedangkan bagi teman-teman yang sudah menggunakan theme blogger berdasarkan Bootstrap; Sebardi Blog adalah salah satu contohnya. Maka langkah-langkah di atas diabaikan saja kecuali ingin menempatkan kode accordion melalui theme sebagaimana disinggung pada langkah no. 8.

11. Selanjutnya bagi teman-teman yang ingin menempatkan kode accordion melalui "Page" silahkan buat sebuah halaman baru.

12. Sedangkan bagi teman-teman yang ingin menempatkan kode accordion melalui "Post" silahkan buat sebuah postingan baru.

13. Klik icon pena kemudian pilih mode "Tampilan HTML".

14. Sisipkan baris kode accordion berikut ini:

<div class="accordion accordion-flush" id="accordionFlushExample"> <div class="accordion-item"> <h2 class="accordion-header"> <button aria-controls="flush-collapseOne" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#flush-collapseOne" data-bs-toggle="collapse" type="button"> Apa itu Sebardi Blog? </button> </h2> <div class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample" id="flush-collapseOne"> <div class="accordion-body">Sebardi Blog adalah sebuah blog pribadi yang didirikan oleh seorang <code>Wong Reang</code>. Dan ini adalah salah satu artikelnya yang membahas tentang accordion berdasarkan library milik Bootstrap</div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button aria-controls="flush-collapseTwo" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#flush-collapseTwo" data-bs-toggle="collapse" type="button"> Apa itu Wong Reang? </button> </h2> <div class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample" id="flush-collapseTwo"> <div class="accordion-body">Wong Reang berasal dari bahasa Dermayu yang terdiri dari kata "Wong" (Orang) dan "Reang" (Kata ganti orang pertama laki-laki). Sehingga istilah <code>Wong reang</code> maknanya adalah "Orang yang biasa mengungkapkan dirinya sendiri dengan kata reang" alias "Wong Dermayu".</div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button aria-controls="flush-collapseThree" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#flush-collapseThree" data-bs-toggle="collapse" type="button"> Apa itu Dermayu? </button> </h2> <div class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample" id="flush-collapseThree"> <div class="accordion-body">Dermayu adalah sebutan asal untuk kata Indramayu. Sebuah kabupaten di Jawa Barat yang memiliki penduduk tidak hanya berbahasa Jawa. Melainkan terdapat didalamnya beberapa kelompok warga yang berbahasa Sunda. Salah satunya ada yang disebut dengan <code>Sunda Parean</code>. Sebuah komunitas orang Sunda dengan langgamnya sendiri yang berada di kabupaten Kandanghaur yang didominasi penduduk dengan bahasa Jawa Dermayu.</div> </div> </div> </div>

15. Klik "Publikasikan".

16. Hasilnya akan terlihat seperti pada gambar tangkapan layar di bawah ini.

17. Penjelasan resmi bisa kunjungi dokumentasi bootstrap tentang accordion.

Sekian artikel kali ini tentang cara penggunaan menu accordion menggunakan library Bootstrap pada theme blogger. Sebuah komponen web yang biasa digunakan untuk membuat halaman tanya jawab atau halaman pertanyaan yang sering diajukan pada sebuah website.

Selamat mencoba.

Cara Membuat Halaman FAQ dengan Menu Accordion dari Bootstrap

Cara Membuat Halaman FAQ dengan Menu Accordion dari Bootstrap

Tidak ada komentar:

Posting Komentar

Memuat...

Yusuf