Cara Membuat Accordion/Collapsible Panel Pada Blogger

Saat merancang sebuah website yang menarik dan interaktif, penting untuk mempertimbangkan bagaimana menyajikan konten yang kompleks secara intuitif dan menarik bagi pengguna. Salah satu alat yang sangat berguna untuk mencapai tujuan ini adalah accordion. Dalam artikel ini, kita akan menjelajahi keunikan dan kegunaan accordion dalam pengembangan website, serta memberikan beberapa tips praktis untuk mengintegrasikannya dengan cerdik dalam desain Anda. Siapkan diri Anda untuk menemukan cara baru untuk membawa harmoni visual ke website Anda!

Apa itu Accordion dan Mengapa itu Penting?

Accordion adalah elemen interaktif yang memungkinkan pengguna untuk memperluas atau mengurangi konten dengan mengklik atau menyentuh judul atau tombol yang sesuai. Ini memungkinkan presentasi hierarkis yang rapi dan menghemat ruang pada tampilan utama website. Dengan menggunakan accordion, kita dapat mengatur informasi yang terkait secara terstruktur, memudahkan pengguna dalam menavigasi dan menemukan konten yang mereka cari.

Memanfaatkan Keunikan Accordion:

- Pengaturan Konten yang Rapi: Accordion memungkinkan penyajian konten dalam tata letak yang teratur dan terorganisir. Pengguna dapat dengan mudah memperluas dan mengakses informasi yang mereka minati, sambil mempertahankan tampilan website yang bersih dan teratur.

- Penggunaan Ruang yang Efisien: Keterbatasan ruang pada tampilan utama website seringkali menjadi tantangan dalam desain. Accordion memungkinkan kita untuk menampilkan lebih banyak konten dalam ruang yang terbatas. Dengan menempatkan informasi dalam panel yang dapat diperluas, kita dapat mempertahankan keseimbangan antara kekayaan konten dan pengalaman pengguna yang mudah.

- Interaksi yang Menarik: Accordion memberikan elemen interaktif yang menyenangkan bagi pengguna. Dengan memberikan pengguna kendali atas apa yang mereka ingin lihat dan membuka kemampuan mereka untuk menjelajahi konten, Anda dapat menciptakan pengalaman yang lebih menyenangkan dan menarik bagi pengunjung website Anda.

Cara Membuat Accordion/Collapsible Panel Pada Blogger:

1. Silahkan masuk ke blogger dan edit tema.

2. Salin kode di bawah ini lalu tempelkan di atas 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}

3. Jika sudah, silahkan salin kode di bawah ini dan tempelkan di atas 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>

4. Buat postingan baru dan ubah ke mode HTML.

5. Salin kode di bawah ini dan tempelkan pada mode HTML.

<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/AVvXsEhRBaQfi_bARmhxYI4gmuOcAB6gFwViWU-P2kcUlwJkiPYdh5ZbBUYXgeXjThF8dNi5tzCiZAEyI5R3KNF7fg4kgh_Okf0WbFkUfM5jWbrvuyboi2RRtfMjYcGt34YroJQANmnD_77ho04/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>

6. Jika Anda ingin menambahkan kotak, silahkan ubah kodingan yang sudah saya tandai menjadi angka selanjutnya.

Contoh Jika terdapat angka 1 maka ubah menjadi angka 2 untuk menambahkan kotak.

Kesimpulan:

Pastikan tema yang di pakai bisa cocok dengan desain accordion Anda agar terlihat responsif dan baik di berbagai perangkat. Penggunaan media query dalam CSS akan memastikan tampilan yang optimal pada desktop, tablet, dan ponsel pintar.