Pembaharuan 13 April 2013: Menyatukan JavaScript Cookie ke dalam plugin sebagai satu kesatuan.
Karena banyak yang meminta jadi Saya membuatnya. Plugin ini dipakai untuk megubah sidebar blog menjadi toggle. Bisa ditampilkan dan dapat disembunyikan menurut perintah. Demonya dapat dilihat di sini:
Sebagai catatan, Saya tidak dapat menjamin bahwa blog demo di atas akan terus Saya lengkapi dengan plugin ini, jadi jangan heran jikalau suatu ketika nanti blog di atas tidak bekerja. Tapi pada pada dasarnya Saya sudah mengetes plugin ini pada template yang sesungguhnya.
Integrasi Plugin ke dalam Template
Pertama-tama masuk ke halaman editor HTML Template Anda:
Temukan instruksi ini:
]]></b:skin>
Salin instruksi CSS di bawah ini dan letakkan di atasnya. Ini dipakai 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 instruksi ini:
</head>
Salin instruksi 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 ialah jQuery. Jika template Anda sudah dilengkapi dengan jQuery, singkirkan instruksi tersebut! Minimal versi 1.7, sebab di sini (dan mulai ketika ini) Saya tidak lagi menggunakan event .click() melainkan .on("click") Jika versi jQuery yang sedang Anda pakai berada di bawah itu, lebih baik ganti jQuery Anda dengan instruksi yang Saya garis bawahi di atas.
Klik Simpan Template.
Selektor #sidebar-wrapper ialah ID yang diambil dari sidebar yang akan muncul dan tampil menurut perintah, sedangkan selektor #main-wrapper ialah elemen kolom yang akan melebar dan menyempit untuk menutupi kekosongan sebab hilangnya sidebar. Saya rasa hingga di sini dapat dipahami. Jika belum, Saya beri citra mudahnya menyerupai ini:
Bagian kiri ialah #main-wrapper yaitu kolom artikel/posting (sebut saja begitu) dan cuilan kanan ialah #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 dapat memasuki konfigurasi lanjutan yang lebih mendalam. Tapi jikalau belum, mungkin ID kolom artikel dan sidebar blog Anda bukan berupa #main-wrapper dan #sidebar-wrapper. Sebagai contoh, template blog yang Saya gunakan mempunyai dua kolom dengan masing-masing ID berupa #leftcol dan #rightcol:
Pengaturan Lanjutan
Ada cukup banyak konfigurasi yang dapat dilakukan pada plugin ini. Termasuk pengaturan sesi kuki. Jadi, script :cookie.js yang Saya sertakan di atas jquery-toggle-sidebar.js bersama-sama tidak perlu disertakan/bisa dibuang jikalau 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 sebab hilangnya sidebar |
| hideText | Label tombol ketika sidebar sedang tampil |
| showText | Label tombol ketika sidebar sedang tersembunyi |
| animated | Jika bernilai true maka efek animasi akan diterapkan pada ketika proses muncul/hilangnya sidebar |
| animateSpeed | Digunakan untuk memilih kecepatan animasi jikalau opsi animated bernilai true |
| extraWidth | Digunakan untuk memilih lebar ekstra pada kolom artikel. Pada dasarnya, ketika sidebar menghilang, lebar kolom artikel akan berubah menurut perhitungan lebar dirinya sendiri ditambah dengan lebar sidebar yang disembunyikan. Opsi ini tidak terlalu penting dan hanya dipakai jikalau kolom artikel tidak melebar dengan lebar yang tepat. Nilai dapat berupa angka kasatmata ataupun negatif. Positif akan menambah standar lebar kolom, sedangkan negatif akan mengurangi stardar lebar kolom ketika sidebar sedang tersembunyi |
| easingType | Digunakan untuk memilih tipe easing animasi jikalau 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 ketika keadaan normal. |