Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Toggle Sidebar dengan jQuery

Pembaharuan 13 April 2013: Menyatukan JavaScript Cookie ke dalam plugin sebagai satu kesatuan.

Toggle Sidebar dengan jQuery
Toggle Sidebar dengan jQuery

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:

Lihat Demo

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:

Mengedit HTML Template
Mengedit HTML

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:

Lihat Sampel

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:

ID Kolom yang berbeda dari template pada umumnya
Umumnya sebuah template memiliki ID kolom utama berupa #main-wrapper dan kolom sisi berupa #sidebar-wrapper. Tapi dalam beberapa template tidak begitu.

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: "&rArr; Hide Sidebar",
    showText: "&lArr; 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.

jQuery Toggle Sidebar jQuery Toggle Sidebar Minified

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 84 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!