Sudah cukup basa basinya, kali ini saya akan membahas tentang Cara Membuat Efek Accordion Automatis Di Blog.
Sebelum kita memulainya , kita harus mengetahui dulu apasih Efek Accordion itu? Sobat pasti ada yang tau dan ada juga yang belum mengerti, Benar toh?
Kalo Pengertiannya saya masih belum terlalu mengerti, disebabkan saya juga masih NEWBIE. Tapi kalo menurut saya , jQuery Accordion adalah Suatu efek pada widget tertentu , agar mempunyai efek tata seperti menu Dropdown, cuma kalau jQuery Accordion disini, bila kita Meng-KLIK pada widget tertentu, maka widget yang lainnya akan TerTUTUP dengan sendirinya ( Automatis )
Secara tidak langsung anda mungkin sudah sering melihat jQuery accordion diterapkan di banyak website, umumnya jQuery accordion ini banyak digunakan untuk mempersingkat tampilan berita/produk dimana kita hanya melihat baris-baris judul berita atau nama produknya saja, tapi ketika judul/nama produk tersebut kita sorot nanti ada sebuah elemen yang geser kebawah berisi ringkasan berita. jQuery accordion ini sangat berguna untuk menghemat space halaman website apalagi kalau website kita memiliki content yang sangat banyak. saya sendiri sudah pernah menggunakan jQuery Accordion Effect atau Efek jQuery Accordion. Contoh gambar Seperti ini :
Lalu , Cara untuk Membuatnya :
Login Ke Blogger atau klik Dilink itu => Blogger.com
Pilih Rancangan - EDIT HTML - Cari Kode </Head> :
Dan Simpan Kode Ini Diatasnya ( Diatas kode </head> )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">
$(function() {
$('#sidebar-wrapper .widget-content').hide();
$('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
$('#sidebar-wrapper h2').css('cursor', 'pointer').click(function() {
if($(this).next().is(':hidden')) {
$('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
Ket :
- Teks yang berwarna hijau adalah (script pendukung), jka sudah memasangnya ditemplate sobat, maka script diatas, gk perlu lg. biar gk double yaa... :D
- Sedangkan yang Saya beri warna orange adalah (kode css yang akan kita beri efek accordion), misal sobat ingin memberi efek accordion pada footer, cukup merubah kode tersebut, dgn kode css pd bgian footer template sobat, karena setiap template kodenya pasti beda2.
Jika masih Belum Mengerti , Tinggal Comment Aja. Terima Kasih Sudah Membaca Postingan Kami. Semoga Bermanfaat :)
