Trik Membuat Sidebar Akordion V2

Saipul Muiz

Tutorial Blogger

Tuesday, May 20, 2014

Belum ada komentar

Cara Membuat Sidebar Akordion/Show Hide Dengan Jquery

Cara Membuat Sidebar Akordion/Show Hide Dengan Jquery - Sudah Cukup Banyak Sekali Blogger Blogger Indonesia Yang Memakai Efek Ini Di Blognya Yaitu Tepat Dibagian Sidebarnya Yaitu Blogger - Blogger Seperti Anime, Blogazine, Pribadi Dll. Blog Kamu Juga Bisa Pakai Cara Ini, Bagai Mana Caranya? Caranya Akan Di Simak Di Postingan Saya Kali Ini, Disimak Dengan Teliti Ya Sobat Biat Tidak Bingung Caranya. "Cara Membuat Sidebar Akordion/Show Hide Dengan Jquery"Berikut Tutorial "Cara Membuat Sidebar Akordion/Show Hide Dengan Jquery"Jangan Lupa Sobat Disimak Dengan Baik Yah XD

DEMO

Oke Kita Mulai Saja Caranya Jangan Lama - Lama Berikut Caranya :

1. Kamu Buka Blogger.com.

2. Klik Di Menu Template > Edit HTML > Lanjut.
3. Cari Kode</head> Dan Pastekan Kode Dibawah Ini 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. Save & Enjoy ^o^.

Tidak berhasil?

Oke, mungkin Anda mempunyai sidebar dengan ID yang berbeda. Coba periksa kembalitemplate 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>

Anda Ganti Yang Warna Merah Itu Dengan Kode ID Sidebar Kamu.

Jika Artikel Ini Bermanfaar Silahkan Komentar Dibawah ini Atau Anda Kebingungan Dengan Tutorial Yang Di Atas Bisa Komentar Juga Dibawah.

Creative For Design.....

sumber