For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Membuat tombol menu accordion di blogger

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



About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.