Membuat Accordion Menu Responsive di Blog

Hallo selamat datang di Imam DevBlogs. Pada Artikel yang anda baca kali ini berjudul Membuat Accordion Menu Responsive di Blog, telah dipersiapkan dengan baik agar Anda dapat membaca dan menerima informasi yang terdapat pada artikel ini. mudah-mudahan konten Artikel Tutorial, yang kami tulis ini dapat Anda pahami. Oke, selamat membaca.
Cara Membuat Widget Accordion (Menu FAQ) Material Design Responsif di Blog dengan Font Awesome dan Bootstrap - Widget accordion adalah salah satu cara sederhana dan simpel dalam menyembunyikan sebuah konten dalam postingan blog maupun website.

Widget accordion ini biasanya digunakan ketika kita ingin menyembunyikan paragraf konten blog dari user sebelum user melakukan aktifitas klik pada menu atau widget accordion ini.

Selain itu, widget atau menu accordion ini juga biasa digunakan untuk membuat sebuah halaman faq (pertanyaan) sebagai sebuah penjelasan singkat terkait beberapa pertanyaan dasar dari para audiens terkait dengan blog ataupun website tersebut (lebih sering digunakan pada website e-commerce atau ad network). Ketika menu atau widget ini di klik, maka jawaban terkait pertanyaan tersebut akan muncul dibawahnya.

Dengan menggunakan widget atau menu accordion ini, struktur penyusunan konten blog akan terlihat lebih rapih dan juga elegan. Pembuatan widget atau menu accordion sendiri tidak terlalu sulit. Cukup menggunakan CSS, HTML dan JavaScript juga sudah sangat cukup untuk membuat sebuah menu accordion yang sederhana, elegan dan pastinya responsif di seluruh jenis perangkat.

Di artikel kali ini saya akan membagikan beberapa cara sederhana untuk membuat menu atau widget accordion ini dan memasangnya di blog. Ada beberapa style atau tampilan menu accordion yang bisa kamu gunakan di blog kamu.

Cara yang saya berikan ini menggunakan Font Awesome dan juga CSS dari Bootstrap untuk mempercantik tampilannya. Saran saya jika kamu ingin membuat widget ini tanpa ribet, lebih baik kamu membuat accordion ini menggunakan Bootstrap. Berikut ini cara membuat dan memasang accordion menu material design dan responsif di blog menggunakan CSS Bootstrap dan Font Awesome.

Membuat Accordion Menu Responsive di Blog
Gambar oleh: imamdeveloper.my.id

Cara Membuat Widget Accordion di Blog Menggunakan Bootstrap

  1. Masuk ke dashboard blogger kamu
  2. Masuk ke menu Theme ➤ Edit HTML
  3. Kemudian tambahkan CSS Bootstrap berikut ini ke dalam template blog kamu. Taruh script-nya diantara tag <head> dan </head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  4. Kemudian taruh juga script dibawah ini diatas tag </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  5. Kalau sudah klik simpan dan kembali lagi ke dashboard blogger
  6. Buat atau masu ke postingan atau halaman yang ingin kamu pasang widget accordion ini
  7. Setelah itu taruh kode dibawah ini ke dalam postingan atau halaman blog pada tab Mode HTML bukan Compose
    <div class="accordion" id="accordionGroup">
    <div class="card">
    <a class="card-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    <div class="card-header" id="headingOne">
    FAQ / Pertanyaan 1
    </div>
    </a>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionGroup">
    <div class="card-body">
    Jawaban untuk pertanyaan (faq) pertama disini....
    </div>
    </div>
    </div>
    <div class="card">
    <a class="card-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
    <div class="card-header" id="headingTwo">
    FAQ / Pertanyaan 2
    </div>
    </a>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionGroup">
    <div class="card-body">
    Jawaban untuk pertanyaan ke dua disini...
    </div>
    </div>
    </div>
    <div class="card">
    <a class="card-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
    <div class="card-header" id="headingThree">
    FAQ / Pertanyaan 3
    </div>
    </a>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionGroup">
    <div class="card-body">
    Jawaban untuk pertanyaan (faq) ke tiga disini...
    </div>
    </div>
    </div>
    </div>
    Jika jumlahnya kurang, kamu bisa tambahkan saja kodenya sesuai dengan kebutuhan.


Nah, itu dia cara membuat accordion menu di blog menggunakan CSS dari Bootstrap. Gampang, kan? Jika kamu kurang suka dengan cara di atas karena harus menambahkan CSS external ke dalam blog yang bisa memberatkan loading blog, kamu bisa coba membuat accordion menu dengan menggunakan CSS internal dibawah ini.

Cara Membuat Widget Accordion Material Design Responsif di Blog

  1. Buka dashboard blogger kamu
  2. Masuk ke menu Theme ➤ Edit HTML
  3. Kemudian taruh CSS dibawah ini diatas ]]></b:skin> atau </style>
    /* CSS Accordion */
    .collapse{display:none}#accordion h3{margin:0}.showx .collapse{display:block}
    .collapse .card-body{padding:10px 25px 40px;color:#555}
    button.btn.btn-link{display:block;background:#fff;border:none;outline:none;width:100%;margin:10px 0;padding:10px 25px;cursor:pointer;text-transform:none;text-align:left}
    button.btn.btn-link:before{content:'\f107';font-family:'Font Awesome 5 Free';font-weight:600;font-size:2rem;color:#122949;position:absolute;left:25px;top:15px;opacity:.7;transform:rotate(-90deg);transition:all .3s ease-in-out}
    .showx button.btn.btn-link:before{transform:rotate(0deg)}
    .card{background:#fff;box-shadow:0 2px 2px 0 rgba(0,0,0,0.1);border:1px solid #eee;border-radius:5px;position:relative;overflow:hidden;margin:10px 0;padding:0 0 0 40px}
    .card-header button h4{font-weight:400;color:#122949;font-size:1.1rem;margin:0}
    #accordion .card-body img{margin:20px auto;border-radius:7px}
  4. Setelah itu tambahkan script dibawah tepat diatas tag penutup </body>
    <script>
    //<![CDATA[
    // Accordion FAQ
    $("#accordion .btn").click(function() {
    var get_target = $(this).attr("data-target");
    $(get_target).slideToggle("fast");
    $(this).parent().parent().toggleClass("showx")
    }),
    $(document).ready(function() {
    var get_target;
    "true" == $("#accordion .btn").attr("aria-expanded") && (get_target = $(this).attr("data-target"), $(get_target).slideToggle("fast"))
    });
    //]]>
    </script>
  5. Kalau sudah klik simpan
  6. Selanjutnya tinggal buat struktur HTML widget accordion ini di halaman atau postingan blog kamu
  7. Taruh kode dibawah ini ke dalam postingan atau halaman di mode HTML bukan Compose
    <div id='accordion'>
    <!-- [ ACCORDION 1 MULAI ] -->
    <div class='card showx'>
    <div class='card-header' id='heading1'>
    <button aria-controls='collapse1' aria-expanded='true' class='btn btn-link' data-target='#collapse1' data-toggle='collapse'><h4>What Is Lorem Ipsum?</h4></button>
    </div>
    <div aria-labelledby='heading1' class='collapse' data-parent='#accordion' id='collapse1'>
    <div class='card-body'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </div>
    </div>
    <!-- [ ACCORDION 1 SELESAI ]-->
    <!-- [ ACCORDION 2 MULAI ] -->
    <div class='card'>
    <div class='card-header' id='heading2'>
    <button aria-controls='collapse2' aria-expanded='true' class='btn btn-link' data-target='#collapse2' data-toggle='collapse'><h4>What Is Lorem Ipsum 2?</h4></button>
    </div>
    <div aria-labelledby='heading2' class='collapse' data-parent='#accordion' id='collapse2'>
    <div class='card-body'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum<center><img alt="Image" src="https://2.bp.blogspot.com/-iOFUOKk9bCQ/WV1_zhDERFI/AAAAAAAAGmk/utNJHjqsNu0eILsN2rO4jkpR3knNShlMQCLcBGAs/s400/material%2Bdesign%2Bui.png"/></center></div>
    </div>
    </div>
    <!-- [ ACCORDION 2 SELESAI ] -->
    <!-- [ ACCORDION 3 MULAI ] -->
    <div class='card'>
    <div class='card-header' id='heading3'>
    <button aria-controls='collapse3' aria-expanded='true' class='btn btn-link' data-target='#collapse3' data-toggle='collapse'><h4>How To Us Accordion On Blogger?</h4></button>
    </div>
    <div aria-labelledby='heading3' class='collapse' data-parent='#accordion' id='collapse3'>
    <div class='card-body'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </div>
    </div>
    <!-- [ ACCORDION 3 SELESAI ] -->
    </div>
  8. Jika jumlah menu accordion di atas masih kurang, kamu tinggal tambah saja dengan menambahkan kode berikut
    <!-- [ ACCORDION TAMBAHAN MULAI ] -->
    <div class='card'>
    <div class='card-header' id='heading2'>
    <button aria-controls='collapse2' aria-expanded='true' class='btn btn-link' data-target='#collapse2' data-toggle='collapse'><h4>Apa Yang Kurang?</h4></button>
    </div>
    <div aria-labelledby='heading2' class='collapse' data-parent='#accordion' id='collapse2'>
    <div class='card-body'>Tulis teks yang kurang disini...
    </div>
    </div>
    </div>
    <!-- [ ACCORDION TAMBAHAN SELESAI ] -->
  9. Selesai

Nah, itu dia tutorial cara membuat accordion menu material design responsif di blog.

Demikianlah Artikel Membuat Accordion Menu Responsive di Blog

Sekian artikel Membuat Accordion Menu Responsive di Blog kali ini, semoga bermanfaat untuk semuanya. Oke, sampai jumpa di artikel lainnya.

Anda sekarang membaca artikel Membuat Accordion Menu Responsive di Blog dengan alamat link https://www.imamdeveloper.my.id/2021/11/cara-membuat-menu-responsive-di-blog.html
Next Post Previous Post
TIDAK ADA KOMENTAR
POSTING KOMENTAR
comment url
close
Subscribe