Cara Membuat Sidebar Accordion di Blog

Cara Membuat Sidebar Accordion di Blog - Lama tidak posting, kali ini saya akan posting yg berbau ke sedikit jquery dan js. Mungkin ini bisa jadi solusi bagi anda yang mempunyai banyak widget pada blog, karena kalau mempunyai banyak widget tentu template menjadi tinggi, nah dengan tips ini kita bisa meminimalisir hal tersebut. nah dibawah ini ada 2 pilihan sidebar, langsung saja :D

Cara Membuat Sidebar Accordion di Blog :

1. Buka blogger

2. Klik Template -> Edit HTML

3. Kemudian cari kode </head>, jika sudah ketemu, copy dan paste kode dibawah ini diatas kode </head>

#VERSI 1
Javascript :

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

SS :

DEMO :                                                            
http://dte-dummy.blogspot.com/2012/07/demo-sidebar-akordion-dengan-jquery.html

#VERSI 2
Javascript :

<!-- Sidebar Akordion dengan JQuery (www.sch-xp.blogspot.com) -->
<script type='text/javascript'>
//<![CDATA[
// sidebar
$(function(){$('#sidebar-wrapper .widget-content').hide();$('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');$('#sidebar-wrapper h2').css('cursor','pointer').click(function(){$('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');if($(this).next().is(':hidden')){$(this).addClass('active').next().slideDown('slow')}else{$(this).removeClass('active').next().slideUp('slow')}})});
//]]>
</script>

SS :

DEMO :
http://demo-anak-layangan.blogspot.com/

Note :

Jika di template sobat sudah memasang jQuery, jangan copy kode Jquery yg berwarna merah di atas, karena satu template hanya memasang satu jQuery, jika lebih beberapa widget tidak akan berfungsi.

7. Jika sudah dipasang diatas kode </head> kemudian simpan template dan lihat hasilnya

Tidak berhasil ? 

Oke, mungkin Anda mempunyai sidebar dengan ID yang berbeda. Coba periksa kembali template Anda dan temukan baris kode yang menggambarkan deretan widget sidebar blog Anda. Kurang lebih tampilannya seperti ini:

<div id='sidebar-wrapper-2'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
        <b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
        <b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
        <b:widget id='Stats1' locked='false' title='Statistik' type='Stats'/>
        <b:widget id='HTML2' locked='false' title='Komunitas' type='HTML'/>
        <b:widget id='HTML4' locked='false' title='Facebook Suka' type='HTML'/>
    </b:section>
</div>

Atau seperti ini dengan memakai ID #sidebar

 <div id='sidebar'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
        <b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
        <b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
        <b:widget id='Stats1' locked='false' title='Statistik' type='Stats'/>
        <b:widget id='HTML2' locked='false' title='Komunitas' type='HTML'/>
        <b:widget id='HTML4' locked='false' title='Facebook Suka' type='HTML'/>
    </b:section>
</div>

source script
source script