Cara Membuat Sidebar Hide RemoveClass Dan ToggleClass On Blog

Klik untuk perbesar

Fungsi ini telah banyak digunakan oleh blog blog SEO untuk menyederhanakan tampilan di dalam blognya, untuk tutorial kali ini saya telah menemukan 2 fungsi Hidden Sidebar. yang pertama yaitu perintahnya untuk menyembunyikan seluruh sidebar dan akan muncul saat di klik dan akan tersembuny lagi jika di klik lagi, dan yang ke Dua adalah Perintahnya yaitu akan menampilkan widget yang teratas saja dan widget yang lain baru akan muncul jika diklik, sederhananya untuk yang kedua yaitu akan menampilkan satu widget teratas dan tidak bisa disembunyikan jika bukan widget yang lain yang di klik..

jika dilihat dari contoh tersebut seperti punya saya, mungkin terlihat sedikit menarik karena Judul Sidebar nya seperti pembatas gedung atau apartemen,, jika sobat tertarik dengan itu, bisa di pergunakan kok, caranya klik kanan pada Page Blog saya dan Viev page Source, cari Code dibawah ini :

.sidebar h2 { bla bla... bla .. bla }

Copy dan ganti dengan sidebar h2 yang ada ditemplate sobat sendiri.

Ok Kita mulai ke Cara Menyembunyikan Sidebar cara yang Pertama.

jika perintah Deklarasi sidebar sobat menggunakan template custom, tinggal sesuaikan saja dengan bagian widget class yang sobat gunakan. biasanya untuk blogger tak akan berbeda tetap sama yaitu :

#sidebar-wrapper

Atau

.sidebar

jika telah mengetahui perintah deklarasi sobat, Letakan Code dibawah ini tepat diatas Code </head> karena merupakan javascript :

<script type='text/javascript'>
//<![CDATA[
$(function() {
$('#sidebar-wrapper .widget-content').hide();
$('#sidebar-wrapper h2').css('cursor', 'pointer').click(function() {
$('#sidebar-wrapper h2').removeClass('active').next().slideUp('default');
if ($(this).next().is(':hidden')) {
$(this).addClass('active').next().slideDown('ease-out');
} else {
$(this).removeClass('active').next().slideUp('ease-in');
}
});
});
//]]>
</script>

Perhatikan Code yang berwarna merah, itu adalah deklarasi sidebar di blog saya mungkin di blog yang berbeda menggunakan perintah yang lain seperti #sidebar #Content-wrapper #out-wrapper. tapi bila tidak gunakan saja yang diatas.

jika merasa belum puas denga yang diatas kalau semua sidebar tersembunyi, untuk yang ke dua ini akan menampilkan widget sidebar yang paling atas saja.. ini codenya :

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    $('#sidebar-wrapper .widget-content').hide();
    $('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
    $('#sidebar-wrapper h2').css('cursor', 'pointer').click(function() {
        if($(this).next().is(':hidden')) {
            $('#sidebar h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
//]]>
</script>

Simpan dan Lihat hasilnya..