Membuat Sidebar Accordion Pada Blog

Selamat siang...

Mungkin sudah biasa melihat sidebar accordion yang kebanyakan dibuat dalam satu widget "HTML/Javascript", seperti dalam postingan saya dulu. Hanya, kekurangannya mungkin dalam menu accordion tersebut kita hanya dapat memasukkan widget-widget tertentu, namun untuk widget bawaan, seperti follower, popular post, dan arsip blog tidak dapat masuk dalam menu accordion nya.

Agar widget-widget tersebut, yang kalian taruh di sidebar misalnya, dapat kita masukkan dalam menu accordion, maka yang perlu dilakukan adalah membuat efek accordion pada sidebar nya.

Lalu, bagaimana caranya ?

1. Login ke blogger.
2. Pilih Template - Edit HTML.
3. Cari kode </head> dan letakkan kode berikut ini diatasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'/>

<script type='text/javascript'>
//<![CDATA[
$(function() {
    $('#sidebar-wrapper1 .widget-content').hide();
    $('#sidebar-wrapper1 h2').css('cursor', 'pointer').click(function() {
        $('#sidebar-wrapper1 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>

4. Simpan Template.

 *Keterangan : Apabila didalam template sudah terdapat kode jQuery seperti yang saya beri garis bawah, maka tidak perlu diletakkan lagi.

Tips : Coba lihat kode yang saya beri warna ungu, kode tersebut tidak 100% sama, karena ID tiap template mungkin berbeda-beda. Coba temukan kode yang kurang lebih seperti ini :

<aside id='sidebar-wrapper1'>

        <b:section class='sidebar1' id='sidebar1' preferred='yes'>

..................................................................

..................................................................

        </b:section>

 </aside>

atau mungkin yang seperti ini :

<div id='sidebar-wrapper1'>

        <b:section class='sidebar1' id='sidebar1' preferred='yes'>

..................................................................

..................................................................

        </b:section>

 </div>

Lihat kode berwarna kuning, itulah ID sidebar template yang harus sama dengan kode berwarna ungu dalam script untuk menciptakan efek accordion pada sidebar blog.

Bagaimana sob?
Terima kasih, semoga bermanfaat yah...

Postingan ini sekaligus menjawab pertanyaan Agan Sophie Riswandono, semoga membantu...