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 :
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.
5. Cari kode </head>, masukkan kode di bawah ini dan letakkan di atas kode yang anda cari
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
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