Cara Membuat Sidebar Hide RemoveClass Dan ToggleClass On Blog

Hallo sobat blogger semua pada kesempatan ini saya akan membahas cara menampilkan sidebar seperti pada blog ini (lihat sidebar sebelah kanan) hehehe....

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 {

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

Anda sedang membaca artikel tentang Cara Membuat Sidebar Hide RemoveClass Dan ToggleClass On Blog. Anda bisa bookmark halaman ini dengan URL http://rujakcemil.blogspot.com/2013/07/cara-membuat-sidebar-hide-removeclass.html. Jika Anda menyukai Artikel di blog ini, Silakan masukkan email Anda di bawah ini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit.