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
Hi saya ganteng ngak
Wah pastinya nyalah admin ganteng sih, bla bla bla bla bla bla bla bla bla bla bla