√ Cara Buat FAQ Accordion Menggunakan HTML CSS dan JavaScript di Blogger
Best Koding.com | Cara Buat FAQ Accordion Menggunakan HTML CSS dan JavaScript di Blogger - Accordion adalah dokumen satu halaman yang berisi banyak bagian, di mana pada setiap tingkat salah satu bagian ditampilkan dan yang lainnya dimusnahkan. Ini berguna untuk menampilkan potongan besar informasi dalam ruang yang padat atau untuk menangani pertanyaan yang sangat panjang di mana Anda hanya perlu menampilkan paruh pertama teks pertanyaan di sisi tautan "buka lebih banyak" untuk sisanya.
Bagian Faq Accordion berguna untuk hampir semua jenis konten bentuk panjang, termasuk tutorial, panduan, dan FAQ. Tutorial ini akan memandu Anda melalui proses pembuatan bagian Faq dengan Blogger. Anda dapat menggunakannya sebagaimana adanya atau menyesuaikan ini di blog Anda sendiri.
FAQs Accordion juga berguna untuk menentukan skema FAQs di blogger dengan mudah.
Artikel ini membahas pengembangan akordeon FAQ untuk artikel di blog yang menggunakan CSS dan HTML, atas dasar membahas pro dan kontra dari keputusan tersebut. Asumsinya ada pada fitur-fitur seperti pemeliharaan, aksesibilitas, keterbacaan kode, dan lainnya.
Jadi Mari Mulai lakukan.
|
| Cara Buat FAQ Accordion Menggunakan HTML CSS dan JavaScript di Blogger |
Apa itu Accordion
Accordion adalah fitur yang populer di kalangan blogger, terutama di blog pribadi atau usaha kecil. Teknik pengaturan konten ini mudah dibuat dan digunakan di situs web Anda.
Cara Buat FAQ Accordion Menggunakan HTML CSS dan JavaScript di Blogger
3 Langkah untuk membuat Faqs Accordion di blogger
- Langkah1) Buka Dasbor akun Blogger
- Langkah 2) Di Dasbor Blogger, buka bagian tema >> Sesuaikan >> Edit HTML
-
Langkah3) Sekarang Di Edit tag <head> Pencarian HTML dan Sisipkan
tautan stylesheet ini di antara tag <head> dan </head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"> -
Langkah4) Sekarang Cari tag
]]></b:skin>
& Letakkan kode CSS ini sebelum tag ]]></b:skin>
.containerwidth { width: 100%; } .wrapper { background-color: #ffffff; padding: 10px 20px; margin-bottom: 20px; border-radius: 5px; -webkit-box-shadow: 0 15px 25px rgba(0, 0, 50, 0.2); box-shadow: 0 15px 25px rgba(0, 0, 50, 0.2); } .toggle, .content { font-family: "Poppins", sans-serif; } .toggle { width: 100%; background-color: transparent; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-size: 16px; color: #111130; font-weight: 600; border: none; outline: none; cursor: pointer; padding: 10px 0; } .content { position: relative; font-size: 14px; text-align: justify; line-height: 30px; height: 0; overflow: hidden; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; } -
Langkah5) Sekarang Cari tag </body> & Tempel kode JAVASCRIPT ini
sebelum tag </body> .
<script> //<![CDATA[ let toggles = document.getElementsByClassName("toggle"); let contentDiv = document.getElementsByClassName("content"); let icons = document.getElementsByClassName("icon"); for (let i = 0; i < toggles.length; i++) { toggles[i].addEventListener("click", () => { if (parseInt(contentDiv[i].style.height) != contentDiv[i].scrollHeight) { contentDiv[i].style.height = contentDiv[i].scrollHeight + "px"; toggles[i].style.color = "#0084e9"; icons[i].classList.remove("fa-plus"); icons[i].classList.add("fa-minus"); } else { contentDiv[i].style.height = "0px"; toggles[i].style.color = "#111130"; icons[i].classList.remove("fa-minus"); icons[i].classList.add("fa-plus"); } for (let j = 0; j < contentDiv.length; j++) { if (j !== i) { contentDiv[j].style.height = 0; toggles[j].style.color = "#111130"; icons[j].classList.remove("fa-minus"); icons[j].classList.add("fa-plus"); } } }); } //]]> </script> -
Langkah6) Sekarang buat Posting Baru & Tempel Kode HTML ini di mana
Anda ingin Menampilkan Akordeon Faq Anda di posting blogger.
<div class="boxaccordion"> <div class="containerwidth"> <div class="wrapper"> <button class="toggle">How FAQs Accordion help us to rank our website?<i class="fas fa-plus icon"></i></button> <div class="content"> <p>FAQs accordion is a great way to help you build authority and trust, and at the same time bestow a bit of personality on the website. It also helps you answer frequently asked questions, produce additional content quickly, and reduce bounce rates.</p> </div> </div> <div class="wrapper"> <button class="toggle">What is the benefits of FAQs Accordion in blogger?<i class="fas fa-plus icon"></i></button> <div class="content"> <p>Benefit of FAQs accordion for blogger is that it helps your blog visitors to find what they are looking for in less time.</p> </div> </div> <div class="wrapper"> <button class="toggle">Does FAQs Scheme Help Us to Rank our Site in Top Position?<i class="fas fa-plus icon"></i></button> <div class="content"> <p> Yes, Frequently Asked Questions scheme will make your website more popular and increase your search engine ranking position.</p> </div> </div> </div> </div>
Post a Comment