Cara Membuat Sidebar Accordion di Blog

Cara Membuat Sidebar Accordion di Blog ?
Langsung saja gan tancap gasnya.

1. Login dulu di Blog sobat
2. Klik Template --> Edit HTML
3. Cari kode </head> copykan kode di bawah ini tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>
//<![CDATA[
$(function() {
    // Sembunyikan semua tubuh widget (tutup semua panel)
    $('#sidebar-wrapper .widget-content').hide();
    // Tambahkan class 'active' pada elemen <h2> pertama
    // kemudian tampilkan elemen berikutnya dengan efek .slideDown(), sehingga panel akordion paling atas akan tampak terbuka
    $('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
    // Saat elemen <h2> yang berada di dalam elemen #sidebar-wrapper diklik...
    $('#sidebar-wrapper h2').click(function() {
        if($(this).next().is(':hidden')) {
            // Sembunyikan semua panel yang terbuka dengan efek .slideUp()
            $('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
            // Lalu buka panel yang berada di bawah elemen ini (elemen <h2> yang diklik) dengan efek .slideDown()
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
//]]>
</script>

4. Simpan dan lihat hasilnya

Note :
Untuk kode berwarna merah adalah kode jQuery jika Template Blog sobat sudah ada kode jQuery semacam ini atau versi yang lain maka tidak perlu di tambahkan, karena bila ditambahkan maka widget ini tidak berfungsi.

Terima kasih atas kunjungan anda di Artikel : Cara Membuat Accordion di Blog.