Cara Membuat Sidebar Akordion di Blogspot

Baca Juga

Cara Membuat Sidebar Akordion di Blogspot

SIDEBAR Akordion adalah widget sidebar blog yang hanya akan muncul jika diklik. Demonya bisa dilihat di sidebar Webmaster CB.

Tips Cara Membuat Sidebar Akordion di Blogspot ini dibagikan msater desain blog DTE. Tutor dan demo lainnya juga bisa dilihat di sana.

Cara Membuat Sidebar Akordion di Blogspot

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode < head >

<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>

Kode warna merah (sidebar-wrapper) adalah kode HTML sidebar blog pada umumnya.

Jika gagal, mungkin saja template Anda nama sidebar-wrapper-nya berbeda, misalnya sidebar saja atau ada tambahan lain. Nah, ganti dengan kode sidebar yang sama dengan yang ada di template Anda.

3. Save template!

Beres!

Sidebar Accordion ini pula yang digunakan Creating Website pada template yang super seo friendly Johny Wusss yang sudah CB modif dan bagi gratis di Johny Wuss Series.

Pastikan Anda memunculkan 3-4 widget di sidebar agar fungsi blogger accordion sidebar terlihat dengan baik seperti pada contoh. Good Luck! (http://www.contohblog.com/).*