Cara membuat sidebar hide dan show di blog

Cara membuat sidebar hide dan show di blog - Di kesempatan yang sempit ini karena adanya pekerjaan offline, saya mencoba untuk menulis artikel atau sebuah tutorial untuk blog terlihat lebih professional. Di sini saya akan berbagi tutorial cara membuat sidebar hide dan show di blog, atau kata lainnya Toggle Sidebar dengan JQuery.

Tutorial ini saya dapatkan dari hompimpaalaihumgambreng. Tutorial ini sebenarnya menggunakan sistem plugin, dan plugin ini mengubah sidebar blog menjadi Toggle. Bisa di tampilkan dan di sembunyikan, untuk demonya anda bisa melihatnya di bawah ini :

DEMO

Catatan : hompimpaalaihumgambreng tidak bisa menjamin bahwa blog demo di atas akan terus lengkapi dengan plugin ini, jadi jangan heran jika suatu saat nanti blog di atas tidak bekerja. Tapi pada intinya Saya sudah mengetes plugin ini pada template yang sesungguhnya.


Agar template anda bisa seperti pada demo, anda dapat mencobanya dengan mengikuti langkah-langkahnya di bawah ini :

1. Login blogger
2. Masuk di menu template
3. Pilih edit html, pilih lanjutkan
4. Cari kode ]]></b:skin>, Copy kode di bawah ini dan masukkan tepat di atas kode yang sudah anda cari.

#sidebar-toggler-wrapper {
text-align:right;
clear:both;
}
#sidebar-toggler-wrapper a.sidebar-toggler {
color:white;
font:normal bold 11px Arial,Sans-Serif;
text-decoration:none;
margin:0 0;
float:right;
padding:4px 10px;
background-color:#123;
border-left:4px solid #789;
outline:none;
}
#sidebar-toggler-wrapper a.active {
color:black;
background-color:#789;
border-left-color:#123;
}

5. Cari kode </head>, masukkan kode di bawah ini dan letakkan di atas kode yang anda cari

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' src='http://reader-download.googlecode.com/svn/trunk/cookie.js'></script>
<script type='text/javascript' src='http://reader-download.googlecode.com/svn/trunk/jquery-toggle-sidebar.js'></script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
$('#sidebar-wrapper').toggleSidebar({
expand: "#main-wrapper"
});
});
//]]>
</script>

Catatan : Kode yang di garis bawahi adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut! Minimal versi 1.7, karena di sini (dan mulai saat ini) homepimpaalaihumgambreng tidak lagi memakai event .click() melainkan .on("click")
Jika versi JQuery yang sedang Anda pakai berada di bawah itu, lebih baik ganti JQuery Anda dengan kode yang di garis bawahi di atas.

6. Klik simpan template

Untuk penjelasan lainnya anda bisa membacanya di sini