Membuat menu accordion di blogger

Hello sobat Bloggermuda kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat Menu Accordion di blogger

Info: Oke sobat Bloggermuda jika sudah penasaran dengan pembahasan kita kai ini yuk langsung aja kita bahas bersama sama

Menu Accordion

Apakah Accordian itu? pengertian Accordian mirip mirip dengan pengertian tombol spoiler, yakni sama sama memiliki fungsi untuk menampilkan beberapa text dalam suatu baris ataupun tampilan, setiap jenis Menu Accordion pastinya akan memiliki perbedaan sesuai class CSS yang digunakan

Fungsi Accordian

Seperti yang sudah admin jelaskan sebelumnya bahwa Menu Accordion berfungsi untuk menampilkan beberapa text ataupun tampilan di dalam suatu text lainnya, biasanya menu ataupun Menu Accordion di gunakan untuk menampilkan text FAQ atau tanya jawab seputar produk ataupun merek tertentu

Menggunakan CSS

Untuk membuat Menu Accordion cukup menggunakan kode CSS saja tanpa ada unsur pembuatan kode javascript di dalamnya, sehingga tidak membuat website ataupun blog anda menjadi lambat, ringan dan juga responsif tentunya

Contoh Tampilan

Jika sobat Bloggermuda penasaran nih mengenai Accordian, silahkan periksa contoh tampilan dari Menu Accordion menggunakan tombol di bawah ini oke

Info: Bagaimana sibat dengan contoh tampilan nya keren sekali yak, pastilah keren 🥰

Cara pembuatan

Baiklah sekarang saatnya admin bakalan menjabarkan mebgenai bagaimana kah caranya membuat dan menampilkan Menu Accordion di blogger ataupun website silahkan dan pelajari artikel ini hingga selesai ok

Kode CSS

Seperti biasanya langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS di bawah ini kemudian letakkan tepat di atas kode ]]></b:skin>

/* Accordian by ICloudice */ 
.rahAcSw{margin:1.7em 0;font-size:.93rem;line-height:1.7em} details.ac{padding:18px 15px;background:#fffdfc;box-shadow:0 5px 35px rgba(0,0,0,.07);margin:20px 0;border-radius:10px} details.ac summary{font-weight:700;cursor:default; display:flex;align-items:baseline; transition:all .1s ease;cursor:pointer} details.ac 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.ac[open] summary{color:#482dff} details.ac:not(.alt)[open] summary::before{transform:rotate(90deg);padding:0 0 0 5px;justify-content:center} details.ac.alt summary::before{content:'\002B'; padding:0 2px} details.ac.alt[open] summary::before{content:'\2212'} details.ac .aC{padding:0 15px;opacity:.9} .drK details.sp, .drK details.ac{background:#252526} .drK details.sp summary::after{background:#1e1e1e}

Info: Atau sobat bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas

Cara penggunaan

Baiklah setelah melakukan tahapan penginstalan kode CSS, langkah selanjutnya untuk menampilkan Menu Accordion tersebut kamu bisa menyalin dan menggunakan kode HTML di bawah ini

<div class="rahAcSw" itemscope="" itemtype="https://schema.org/FAQPage">
<!--[ Accordion line 1 ]-->
<details class="ac" itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Question">
<summary itemprop="name">
Your Question 1
</summary>
<div class="aC" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer">
<p itemprop="text">
Your Answer example, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
</p>
</div>
</details>
<!--[ Accordion line 2 ]-->
<details class="ac" itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Question">
<summary itemprop="name">
Your Question 2
</summary>
<div class="aC" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer">
<p itemprop="text">
Your Answer example, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
</p>
</div>
</details>
<!--[ Accordion line 3 ]-->
<details class="ac" itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Question">
<summary itemprop="name">
Your Question 3
</summary>
<div class="aC" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer">
<p itemprop="text">
Your Answer example, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
</p>
</div>
</details>
<!--[ Accordion line 4 ]-->
<details class="ac" itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Question">
<summary itemprop="name">
Your Question 4
</summary>
<div class="aC" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer">
<p itemprop="text">
Your Answer example, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
</p>
</div>
</details>
</div>
<!--[ Accordion line 5 ]-->
<details class="ac" itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Question">
<summary itemprop="name">
Your Question 5
</summary>
<div class="aC" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer">
<p itemprop="text">
Your Answer example, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
</p>
</div>
</details>
</div>

Info: Kamu bisa mengubah ataupun mengedit text Accordian diatas sesuai keperluan kamu aja