🔔 Aktifkan notifikasi disini Google News

Cara Membuat Accordion Menu Pada Template Median UI

Cara Membuat Accordion Menu Pada Template Median UI
Saifulah.id
 - Accordion Menu adalah menu yang dapat digunakan untuk menyembunyikan konten yang berisi teks atau gambar. Untuk menampilkan konten yang disembunyikan, kita hanya perlu menekan atau meng-klik judul menu tersebut.


Fungsi Accordion Menu

Ada 3 fungsi khusus yang sering digunakan para blogger dengan Menu Akordion, diantaranya:
  1. Saran Pencarian
    Google sendiri menggunakan Accordion Menu untuk memberikan saran Pencarian di mesin penelusurannya.
  2. Untuk Halaman FAQ
    FAQ (Frequently Asked Question) adalah halaman yang dipakai untuk menampilkan pertanyaan-pertanyaan yang sering ditanyakan oleh pengunjung. Biasanya halaman FAQ membutuhkan Accordion Menu untuk mempersingkat tampilan dan mempermudah pengunjung mencari pertanyaan yang mereka ingin tanyakan tanpa scroll halaman ke bawah terlalu dalam.
  3. Untuk Halaman Belanja
    Varian produk, Ukuran, dan Deskripsi produk di dalam template belanja bisa menggunakan Accordion Menu untuk mempersingkat tampilan. Supaya pelanggan mudah mencari apa yang mereka butuhkan. Kita tahu sendiri khususnya orang Indonesia, budaya bacanya sangat minim (alias malas baca)

Cara Membuat Accordian Menu Median UI

Template Median UI sebetulnya sudah dilengkapi CSS yang bisa dipanggil agar berfungsi sebagai Accordion Menu. Tapi banyak pemakai Median UI tidak tahu cara penggunaan Acordion Menu di templatenya sendiri. Oleh sebab itu, simak tutorial berikut.
  1. Buka Dashboard Blogger
  2. Klik + Postingan Baru
  3. Tekan icon Pensil 🖋 (Tampilan Menulis)
  4. Ubah menjadi Kode < > (Tampilan HTML)
  5. Copy-Paste kode HTML berikut ke dalam postingan
    <ul class="accordion">
     <li>
     <div class="accorContent">
     <input
     class="accorMenu hidden"
     id="offaccor-menu1"
     name="accordion-menu"
     type="radio"
     />
     <label class="accorTitle" for="offaccor-menu1">
     <i class="accorIcon"></i>
     <span>Judul_1</span>
     </label>
     <div class="content">Paragraf_1</div>
     </div>
     </li>
     <li>
     <div class="accorContent">
     <input
     class="accorMenu hidden"
     id="offaccor-menu2"
     name="accordion-menu"
     type="radio"
     />
     <label class="accorTitle" for="offaccor-menu2">
     <i class="accorIcon"></i>
     <span>Judul_2</span>
     </label>
     <div class="content">Paragraf_2</div>
     </div>
     </li>
  6. Ganti teks warna kuning dengan judul.
  7. Ganti teks warna biru dengan isi teks / paragraf
  8. Jumlah widget accordion yang bisa kamu tambahkan tidak terbatas, cukup salin kode ini dan letakkan di bawahnya.
     <label class="accorTitle" for="offaccor-menu2">
     <i class="accorIcon"></i>
     <span>Judul_3</span>
     </label>
     <div class="content">Paragraf_3</div>
     </div>
     </li>
  9. Setelah itu tekan Publikasikan

DEMO

  • Paragraf_1
  • Paragraf_2

Mau donasi lewat mana?

SeaBank - Saifullah (9016-9529-0071)

BRI - Saifullah (05680-10003-81533)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.
Selanjutnya kalian mau dibuatkan artikel tentang apalagi? Tuliskan pada kolom komentar di bawah ini

7 komentar

Berkomunikasi adalah salah satu cara untuk saling memahami, yuk tinggalkan komentar :)
Popular Emoji
😊😁😅🤣🤩🥰😘😜😔😥😪😭😱🤭😇🤲🙏👈👉👆👇👌👍❤🤦‍♂️❌✅⭐
Centang Beri Tahu Saya untuk mendapatkan notifikasi ketika komentar kamu sudah di jawab.
Parse:

Gambar Quote Pre Kode
  1. bang reques cara mengubah tampilan list postingan median ui v1.5
  2. ijin bang, bahas di luar postingan.🙏

    jujur saja sebenarnya sy mau membagikan tutorial cara pindahkan posisi label pada halaman depan, di mana posisi label yang berada tepat di bawah gambar postingan yang menurut saya sangat mengganggu, dan bukan cuman menggangu saja, yg lebih buruknya menurunkan skor audit, tetapi setelah membaca² di blog belanja bang saifullah, niat saya langsung sekita hilang.

    Cuman pindahkan label dari atas ke bawah saja, harus lembur sampai 1 minggu.😅

    Apalagi dapat pengunjung yg cuman copas, langsung hilang tanpa jejak, trus bikin tutorial di blognya, seakan² dia yg buat.

    thanks bang, dari blog abang, sy dapat motivasi untuk bagaimna cra merubah tampilan median ui.
    1. Sama-sama bang 😊
  3. Bang maaf OOT. Template median ui ini lagi error atau gmna, ngga bisa komentar. Stiap ada komen baru tidak tampil. Pdhal tidak dimoderasi.
  4. Apa komentar blog ini error?
    Beberapa temaku tidak bisa menampilkan komentar.
  5. Ada pembaruan dari Google yang mempengaruhi kolom komentar di template Median UI. Di template lain masih normal.
  6. Untuk sementara waktu, ganti komentar Blogger ke Disqus atau Facebook sampai ada perbaikan kode komentar.

Daftar isi



  • Home


  • Follow


  • MENU


  • Share


  • Comment
Oops!
Sepertinya ada yang salah dengan koneksi internet Anda. Harap sambungkan ke internet dan mulai menjelajah lagi.
AdBlock Detected!
Kakak pakai plugin pemblokir iklan ya? Tolong kecualikan website ini dalam pemblokiran ya. Karena kami butuh penghasilan dari iklan untuk terus mengelola website ini agar bisa update artikel bermanfaat. Makasih ya 😊
Site is Blocked
Sorry! This site is not available in your country.