Accordion FAQ di Blogger adalah solusi buat kamu yang pengin bikin bagian FAQ kece seperti di website profesional. Kalau kamu sempat bingung karena pakai Blogger yang katanya terbatas… tenang! Sekarang kamu bisa bikin tampilannya tetap keren dan fungsional tanpa perlu ribet.
Kali ini saya akan kasih tutorial step-by-step bikin accordion FAQ super keren, cukup pakai HTML dan CSS, langsung bisa kamu tempelin di postingan blog atau halaman statis.
Apa Itu Accordion FAQ di Blogger?
Accordion adalah elemen yang bisa membuka-tutup bagian konten, biasanya dipakai untuk FAQ atau informasi bertingkat. Fungsinya biar halaman tetap rapi dan user nggak kewalahan lihat info yang terlalu panjang.
Kenapa Harus Punya Accordion FAQ di Blogger?
Karena:
- Bikin blog kamu terlihat lebih rapi dan profesional
- Menghemat ruang di halaman
- Pengunjung bisa klik bagian yang mereka butuhkan aja
Langkah memasang Accordion FAQ di Blogger
Langkah 1: Masuk ke Blogger
- Login ke akun Blogger kamu.
- Pilih “Halaman” atau “Postingan Baru”.
- Klik “Tampilan HTML” (jangan pakai tampilan “Compose”).
Langkah 2: Tempelkan Kode HTML + CSS Ini
Copy seluruh kode di bawah ini dan tempelkan di editor HTML kamu.
<style>
/* Accordion FAQ Section */
.FAQ-container{margin:1.7em 0;font-size:19px;font-family:system-ui;line-height:1.7em; color: black;}
details.FAQ-Question{padding:18px 0;border-bottom:1px solid black;}
details.FAQ-Question:first-child{border-top:1px solid black;}
details.FAQ-Question summary{font-weight:700;cursor:pointer; display:flex;align-items:baseline}
details.FAQ-Question summary:hover{color:#dd277b;}
details.FAQ-Question summary::before{content:'\203A'; flex:0 0 25px;display:flex;align-items:center;justify-content:flex-start;padding:0 5px; font-weight:400;font-size:1.33rem;color:inherit}
details.FAQ-Question[open] summary{color:#dd277b;}
details.FAQ-Question:not(.alt)[open] summary::before{transform:rotate(90deg);padding:0 0 0 5px;justify-content:center}
details.FAQ-Question.alt summary::before{content:'\002B'; padding:0 2px}
details.FAQ-Question.alt[open] summary::before{content:'\2212'}
details.FAQ-Question .FAQ-Answer{padding:0 25px;opacity:.9}
</style>
<div class='FAQ-container'>
<!--[ Accordion line 1 ]-->
<details class='FAQ-Question'>
<summary>Dengan apa saya merancang website anda</summary>
<div class='FAQ-Answer'>
<p>Saya profesional merancang website dengan wordpress khusus dengan Elementor, Generate Press, dan tema kostum sesuai kebutuhan anda.</p>
</div>
</details>
<!--[ Accordion line 2 ]-->
<details class='FAQ-Question'>
<summary>Apa kelebihan saya?</summary>
<div class='FAQ-Answer'>
<p>Saya tidak hanya merancang website, tapi juga membangun karya, jadi saya sangat detail.</p>
</div>
</details>
<!--[ Accordion line 3 ]-->
<details class='FAQ-Question'>
<summary>Bagaimana saya jika ingin memesan layanan ini?</summary>
<div class='FAQ-Answer'>
<p>Kamu bisa mengunjungi tautan selengkapnya pada artikel pada pos pertama blog ini, kamu akan dialihkan pada website saya bloggerkalteng.com.</p>
</div>
</details>
<!--[ Accordion line 4 ]-->
<details class='FAQ-Question'>
<summary>Berapa banyak pelanggan yang sudah anda layani?</summary>
<div class='FAQ-Answer'>
<p>Sami sekarang telah melayani sekitar 50+ pelanggan hingga sekarang. Saya dengan senang hati membantu Anda membuat website sebagai karya anda dan karya usaha anda.</p>
</div>
</details>
</div>Ganti teksnya dengan teks yang kamu inginkan.
Layanan Blogger Kalteng
Blogger, Web Design, Content Creator, Graphic Designer, Personal Branding, Review Article, Content Placement.
Satu pemikiran pada “Kode HTML Membuat Accordion FAQ di Blogger”