Hello sobat iCloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat menu Accordian di blogger
Info: Oke sobat iCloudzer jika sudah penasaran dengan pembahasan kita kai ini yuk langsung aja kita bahas bersama sama
Menu Accordian
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 Accordian pastinya akan memiliki perbedaan sesuai class CSS yang digunakan
Fungsi Accordian
Seperti yang sudah admin jelaskan sebelumnya bahwa menu Accordian berfungsi untuk menampilkan beberapa text ataupun tampilan di dalam suatu text lainnya, biasanya menu ataupun tombol Accordian di gunakan untuk menampilkan text FAQ atau tanya jawab seputar produk ataupun merek tertentu
Menggunakan CSS
Untuk membuat menu Accordian 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 ICloudzer penasaran nih mengenai Accordian, silahkan periksa contoh tampilan dari menu Accordian 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 Accordian 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 tombol menu Accordian 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