Cara Membuat Sidebar Accordion Dengan Efek Jquery
Dengan memasang efek accordion ini dapat memperkecil tampilan sidebar membuat efek accordion sidebar ini akan membuat terlihat keren karena dengan efek accordion maka yang akan ditampilkan secara utuh hanya satu widget saja sementara yang lain akan tersembunyi.
Membuat Efek Accordion sidebar dengan JQuery ini bisa sobat terapkan pada blogspot dan yang harus diperhatikan adalah ID dari sidebar sobat, karena setiap template mungkin ada perbedaan. supaya sobat bisa tahu ID dari sidebar sobat sobat bisa menggunakan ad-on firebug pada mozilla. sebagai contoh pada tutorial ini ID sidebarnya adalah ” sidebar-wrapper “. nah mungkin buat yang lain ID tersebut bisa sidebar, right-sidebar atau buat yang menggunakan template blogspot baru IDnya adalah sidebar-right-1, oleh karena itu sobat sesuaikan saja. Anda dapat melihat demo live plugin ini dengan mengklik tombol di bawah ini.
Berikut langkah-langkah membuat accordion pada sidebar……
1. Login ke Blogger.
2. Masuk ke Template.
3. Klik Edit HTML template.
4. Jangan lupa centang “Expand template”.
5. Kemudian cari Kode
</head>
6. Copy kode di bawah ini dan Paste tepat di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(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>
7. Setelah itu Simpan Template .
8. Lihat hasilnya.
Mungkin sampai disini dulu postingan tentang Membuat Efek Accordion Sidebar dengan JQuery kali ini, semoga bermanfaat bagi Anda.
