Membuat Accordion Menu Responsive di Blog Menggunakan CSS dan Bootstrap

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.

Cara Membuat Widget Accordion di Blog Menggunakan Bootstrap

Masuk ke dashboard blogger kamu
Masuk ke menu Theme ➤ Edit HTML

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">

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>

Kalau sudah klik simpan dan kembali lagi ke dashboard blogger
Buat atau masu ke postingan atau halaman yang ingin kamu pasang widget accordion ini

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.

Result Accordion :

Accordion Menu 1

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Accordion Menu 2

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Accordion Menu 3

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Accordion Menu Last

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

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

Buka dashboard blogger kamu
Masuk ke menu Theme ➤ Edit HTML

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}

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>

Kalau sudah klik simpan
Selanjutnya tinggal buat struktur HTML widget accordion ini di halaman atau postingan blog kamu

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhirh5I9jYqvMlF9Rjato3jrvT4OvgQ7p4EeMo9Pg25B52oizY0Z-aogPDFL0E9Y8dm-Ahc7Z4aTke5CV-W1XPAWtg8PNIm1qgtlufbDkKFSEn89bQDrMt22CfXpS5syXoDyg68VfAaVfs/s400/material+design+ui.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>

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 ] -->

Selesai

Result Accordion :

Whats Is UnPlug?

UnPlug is a site where you can store all of one's personal projects in the programming world, for example, such as widgets created for blogs or other purposes.

How to Us Accordion?

This accordion menu serves to hide a paragraph of blog content before any user clicks. By installing and using this accounting in every blog post, then the structure of the content writing will look more neat and professional.

How to make this accordion?

If you are interested in installing and using this accordion menu feature on your blog, you can follow the guide described above.

Nah, itu dia tutorial cara membuat accordion menu material design responsif di blog. Semoga bisa bermanfaat dan membantu.

Bokban.my.id

Membuat Accordion Menu Responsive di Blog Menggunakan CSS dan Bootstrap

Cara Membuat Widget Accordion di Blog Menggunakan Bootstrap

Cara Membuat Widget Accordion Material Design Responsif di Blog

Post a Comment for "Membuat Accordion Menu Responsive di Blog Menggunakan CSS dan Bootstrap"