jQuery Show Hide Sidebar

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Tutorial kali ini saya akan membahas tentang jQuery Show Hide Sidebar atau membuat efek Show Hide dengan jQuery. Artikel ini adalah request dari salah satu visitor. Karena tutorial ini saya buat semudah mungkin, jadi saya harap pembaca bisa mengerti apa yang saya bahas dan saya harap mengerti telah apa yang saya maksud. OK kalau begitu kita langsung saja menuju ke TKP

1. Seperti biasa, masuk ke akun blogger dulu
2. Kemudian klik Rancangan, Edit HTML
3. Setelah itu centang Expand Template Widget
Expand Template Widget
4. Cari kode di bawah ini dengan tombol F3
Bila anda tidak ingin merubah judul sidebar anda, abaikan saja langkah 4 dan 5

h2

5. Bila sudah ketemu, ganti / replace dengan kode di bawah ini

h2 {
color: #FFFFFF;
font: bold 100%/1.4em 'Arial',Trebuchet,Arial,Verdana,Sans-serif;
letter-spacing: 0;
margin: 0;
padding: 7px 15px;
text-transform: uppercase;
text-align: center;
cursor:pointer;
}

6. Setelah itu cari kode di bawah ini

#sidebar-wrapper .widget-content

atau

.widget-content

7. Bila ketemu kodenya, tambahkan kode tersebut menjadi seperti ini

.widget-content, .widget-content1

note
Code .widget-content hanya untuk widget yang ingin disembunyikan. INGAT, bila widget anda tidak mempunyai judul, maka widget tersebut tidak akan keluar. Widget yang tidak ada judulnya bisa di atasi dengan penambahan code .widget-content1. Jadi pada intinya .widget-content untuk widget yang ada judulnya, sedangkan code .widget-content1 hanya untuk widget yang tidak ada judulnya
8. Tambahkan framework jQuery.
   INGAT, jika pada template anda sudah terdapat framework jQuery, maka kode di bawah ini TIDAK PERLU di tambahkan.
   Jika belum terdapat framework jQuery, maka copy kode di bawah ini

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

kemudian letakkan di atas kode

</head>

atau di bawah kode

</b:skin>

9. Copy kode di bawah ini

<script type='text/javascript'>
$(document).ready(function(){
$(".widget-content").hide();
$("h2").click(function(){
$(this).next(".widget-content").slideToggle(1000);
return true;
});
});
</script>

kemudian letakkan di atas kode

</head>

atau di bawah kode

</b:skin>

10. Simpan template anda

note

Untuk mempelajari lebih lanjut tentang jQuery Show Hide Sidebar, kalau tidak ada gangguan Insya Allah saya akan mempostingnya secara lengkap. Jadi tunggu saja artikelnya.

Bila ada yang masih binggung pada tutorial saya, saya sudah menulis artikel yang berkaitan dengan jQuery Show Hide Sidebar. Artikelnya ada di Cara Setting jQuery Show Hide Sidebar.

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait