Cara Membuat Widget Accordion Untuk Halaman dan Postingan

 Hai kawan, kali ini saya akan membagikan sebuah tips sederhana yang dapat digunakan untuk seluruh platform blogspot maupun wordpress. 

Tentu saja sobat sudah tidak asing dengan yang satu ini yaitu Widget Accordion yang dapat memunculkan dan menyembunyikan suatu konten tertentu dapat berupa teks, gambar dan lainnya.

Biasanya widget ini digunakan untuk halaman FAQ atau  Landing page Blog yang berguna untuk memunculkan penjelasan suatu pertanyaan mendasar dari customer dan pengunjung dan saat pertanyaan diklik akan memunculkan jawabannya. 

Desain yang saya sediakan pada tips ini sangat sederhana agar kompeten untuk seluruh jenis blog yang sobat gunakan.

Widget ini berguna bagi sobat yang mempunyai blog dengan tema jasa jual beli dan jasa lainya ataupun blog yang membutuhkan konten show hide gambar/video maupun konten lainnya.

Langkah Awal Pastikan Kalian Sudah Memiliki Hal Berikut Pada Template Blog Kalian 

1. Font Awesome Versi 5
2. Jquery

Silahkan Masuk Ke Blogspot > Tema > Edit Html

Letakan Kode Css Berikut Diatas Kode  ]]<>b:skin>

/* 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}

Selanjutnya , letakan kode script berikut diatas kode </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>

Simpan Selanjutnya Kalian Masuk Ke Postingan , Editor Mode HTML.

Jika Sudah , Pastikan Kalian Sudah Menandai posisi untuk penempatan kode accordion tersebut.

Berikut Ini Adalah Code Accordion nya :

<div id='accordion'>
<!-- CARD START -->
<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 Blogger?</h4></button>
</div>
<div aria-labelledby='heading1' class='collapse' data-parent='#accordion' id='collapse1'>
<div class='card-body'>Blogger is an American blog-publishing service that allows multi-user blogs with time-stamped entries. It was developed by Pyra Labs, which was bought by Google in 2003. The blogs are hosted by Google and generally accessed from a subdomain of blogspot.com. Blogs can also be served from a custom domain owned by the user (like www.example.com) by using DNS facilities to direct a domain to Google's servers.</div>
</div>
</div>
<!-- CARD END -->
<!-- CARD START -->
<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>This product have a guarantee?</h4></button>
</div>
<div aria-labelledby='heading2' class='collapse' data-parent='#accordion' id='collapse2'>
<div class='card-body'>In hac habitasse platea dictumst. Vivamus eget elementum nibh. Mauris ultrices, arcu et sollicitudin volutpat, massa nisl aliquet leo, non ornare nulla libero in metus. Integer et enim a lacus convallis dapibus.<center><img alt="Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7xzLBYuM3eGVxURFEqFn3cnN9ksw6DqPEWCBwuFsgabiRxarL8lYcLd6_pZ52M4GmKAcCF8ICqmZ19AeVZcDj8gATQOBLyMXt-8e5DwWCBpBQdVcIqOvtWxGlOR5l37MswafHZp0X6cE/s400/material+design+ui.png"/></center></div>
</div>
</div>
<!-- CARD END -->
<!-- CARD START -->
<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 about the Documentation?</h4></button>
</div>
<div aria-labelledby='heading3' class='collapse' data-parent='#accordion' id='collapse3'>
<div class='card-body'>Maecenas pulvinar tincidunt ex. Sed ullamcorper suscipit nisi a semper. Ut sed egestas leo. Quisque at ex magna. Sed mollis faucibus mollis. Nunc sed aliquet lectus. Aenean massa neque, iaculis a augue nec, pretium mattis massa.</div>
</div>
</div>
<!-- CARD END -->
</div>

Sc:IDBLANTER

Sudah saya Tandai Bagian bagian dengan <!-- CARD START --> untuk awalan dan <!-- CARD END --> untuk akhir.

Jika ingin menambah kotak, pastikan Kalian merubah angka pada card tersebut:

Terima Kasih