Toggle Sidebar dengan jQuery
Pembaharuan 13 April 2013: Menyatukan JavaScript Cookie ke dalam plugin sebagai satu kesatuan.
Karena banyak yang meminta jadi Saya membuatnya. Plugin ini digunakan untuk megubah sidebar blog menjadi toggle. Bisa ditampilkan dan bisa disembunyikan berdasarkan perintah. Demonya bisa dilihat di sini:
Sebagai catatan, Saya tidak bisa menjamin bahwa blog demo di atas akan terus Saya 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.
Integrasi Plugin ke dalam Template
Pertama-tama masuk ke halaman editor HTML Template Anda:
Temukan kode ini:
]]></b:skin>
Salin kode CSS di bawah ini dan letakkan di atasnya. Ini digunakan untuk mengatur dimensi tombol toggle:
#sidebar-toggler-wrapper {
clear:both;
position:relative;
}
#sidebar-toggler-wrapper a.sidebar-toggler {
color:white;
font:normal bold 11px/100% Arial,Sans-Serif;
text-decoration:none;
margin:0 0;
padding:4px 10px;
background-color:#123;
border-left:4px solid #789;
outline:none;
position:absolute;
bottom:0;
right:0;
}
#sidebar-toggler-wrapper a.active {
color:black;
background-color:#789;
border-left-color:#123;
}
Setelah itu temukan kode ini:
</head>
Salin kode ini dan letakkan di atasnya:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script><script src='http://dte-project.googlecode.com/svn/trunk/jquery-toggle-sidebar.min.js'></script>
<script>
//<![CDATA[
$(function() {
$('#sidebar-wrapper').toggleSidebar({
expand: "#main-wrapper"
});
});
//]]>
</script>
Kode yang Saya 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) Saya 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 Saya garis bawahi di atas.
Klik Simpan Template.
Selektor #sidebar-wrapper
adalah ID yang diambil dari sidebar yang akan muncul dan tampil berdasarkan perintah, sedangkan selektor #main-wrapper
adalah elemen kolom yang akan melebar dan menyempit untuk menutupi kekosongan karena hilangnya sidebar. Saya rasa sampai di sini bisa dipahami. Jika belum, Saya beri gambaran mudahnya seperti ini:
Bagian kiri adalah #main-wrapper
yaitu kolom artikel/posting (sebut saja begitu) dan bagian kanan adalah #sidebar-wrapper
yaitu sidebar blog.Kolom artikel & kolom sidebar = #main-wrapper
& #sidebar-wrapper
. Kesimpulannya:
$('#sidebar-wrapper').toggleSidebar({expand:"#main-wrapper"});
Begitu saja. Jika sudah berhasil, kita bisa memasuki konfigurasi lanjutan yang lebih mendalam. Tapi jika belum, mungkin ID kolom artikel dan sidebar blog Anda bukan berupa #main-wrapper
dan #sidebar-wrapper
. Sebagai contoh, template blog yang Saya gunakan memiliki dua kolom dengan masing-masing ID berupa #leftcol
dan #rightcol
:
Pengaturan Lanjutan
Ada cukup banyak konfigurasi yang bisa dilakukan pada plugin ini. Termasuk pengaturan sesi kuki. Jadi, script :cookie.js
yang Saya sertakan di atas jquery-toggle-sidebar.js
sebenarnya tidak perlu disertakan/bisa dibuang jika Anda menonaktifkan fitur sesi toggle pada sidebar
$('#sidebar-wrapper').toggleSidebar({
expand: "#main-wrapper",
hideText: "⇒ Hide Sidebar",
showText: "⇐ Show Sidebar",
animated: false,
animateSpeed: 400,
easingType: null,
extraWidth: 0,
enableCookie: false,
defaultHidden: false
});
Opsi | Keterangan |
---|---|
expand | Elemen yang akan melebar dan menyempit untuk mengisi kekosongan karena hilangnya sidebar |
hideText | Label tombol saat sidebar sedang tampil |
showText | Label tombol saat sidebar sedang tersembunyi |
animated | Jika bernilai true maka efek animasi akan diterapkan pada saat proses muncul/hilangnya sidebar |
animateSpeed | Digunakan untuk menentukan kecepatan animasi jika opsi animated bernilai true |
extraWidth | Digunakan untuk menentukan lebar ekstra pada kolom artikel. Pada dasarnya, saat sidebar menghilang, lebar kolom artikel akan berubah berdasarkan perhitungan lebar dirinya sendiri ditambah dengan lebar sidebar yang disembunyikan. Opsi ini tidak terlalu penting dan hanya digunakan jika kolom artikel tidak melebar dengan lebar yang tepat. Nilai bisa berupa angka positif ataupun negatif. Positif akan menambah standar lebar kolom, sedangkan negatif akan mengurangi stardar lebar kolom saat sidebar sedang tersembunyi |
easingType | Digunakan untuk menentukan tipe easing animasi jika opsi animated bernilai true |
enableCookie | Jika true , sesi toggle pada sidebar akan diingat oleh peramban. Sehingga sesi sidebar tidak akan berubah ke sesi awal meskipun Anda berpindah-pindah halaman. Saya menggunakan JavaScript cookie yang cara kerjanya sudah pernah Saya jelaskan di sini |
defaultHidden | Jika true sidebar akan disembunyikan saat keadaan normal. |
84 Komentar
Unknown
Mas mau tanya, disini sudah saya terapkan di blog saya dan berhasil namun
hanya pada postingan tertentu saja (muncul tombol hide sidebar nya), pas di postingan yang memakai tab malah ndak muncul, kenapa ya?
minta solusinya mas :D
ini blog saya -> streamindo.blogspot.com
Unknown
after, my blog was this error:
at first:
http://demoblogda.blogspot.com/
at after:
http://dawebvn.blogspot.com/
Taufik Nurrohman
I don't see the installed plugin inside your template(s) source.
Unknown
sob klo saya mau menampilkannya di footer gimana ?
http://fcw-bt.blogspot.com/, yoga.tc@gmail.com
Taufik Nurrohman
Plugin ini dipakai untuk menangani kolom, bukan untuk footer.
Unknown
sob untuk lebih jelasnya bisa lihat di blog ini : http://jpstation-ivy.blogspot.com/ dan lihat pada footernya, kan blog itu memasang toggle footer, klo mau kayak gitu gimana sob ?
Taufik Nurrohman
⇒ http://jsfiddle.net/tovic/z9Nen/15/
Unknown
untuk taruh toogle footer di bagian bawah sehabis post body ane masih bingung .. :D
tapi artikelnya josh banget
Unknown
Tolong Gan,...mau tanya nih, ane mau ngilangin 2 item, yaitu #sidebar ama #header, apakah bisa?rencana nya mau ane bikin tombol agar post bisa fullscreen, yaitu dengan menghilangkan sidebar dan header. makasih
Unknown
ini kan prosesnya penambahan #main-wrapper sesuai ukuran #sidebar-wrapper dengan ukuran px, bagaimana jika dibuat persen (%)? misalnya #main-wrapper 60% dan #sidebar-wrapper 30%, dan nantinya #main-wrapper menjadi 90%. Tolong bantuannya.
Taufik Nurrohman
Widget ini tidak cocok untuk tema responsif.
Unknown
maaf mas, saya masih baru jadi belum terlalu mengerti, saya sudah tambahkan kode diatas di edit html, tapi ga ada perubahannya. mohon dibantu ya mas
zarezaw.blogspot.com
Erna Ayuning Nareswari
template standar dari blogger ga isa ya bray?
uda saya cuba, ga mau tooglenyah..
btw nice tutorial..
Taufik Nurrohman
Sudah ada jawabannya di atas…
Unknown
:) keren mas ini yang saya cari-cari . Thanks ,bermanfaat :-bd
Unknown
mas kalo seperti sidebar youtube itu gimana yaa ? tersembunyi tapi tidak merubah keadaan main-wrapper saat ukuran layar diperbesar.
Taufik Nurrohman
Pakai kondisional lebar layar: