Toggle Sidebar dengan jQuery

Tabel Konten
  1. Integrasi Plugin ke dalam Template 
  2. Pengaturan Lanjutan 

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
});
OpsiKeterangan
expandElemen yang akan melebar dan menyempit untuk mengisi kekosongan karena hilangnya sidebar
hideTextLabel tombol saat sidebar sedang tampil
showTextLabel tombol saat sidebar sedang tersembunyi
animatedJika bernilai true maka efek animasi akan diterapkan pada saat proses muncul/hilangnya sidebar
animateSpeedDigunakan untuk menentukan kecepatan animasi jika opsi animated bernilai true
extraWidthDigunakan 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
easingTypeDigunakan untuk menentukan tipe easing animasi jika opsi animated bernilai true
enableCookieJika 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
defaultHiddenJika true sidebar akan disembunyikan saat keadaan normal.

jQuery Toggle Sidebar jQuery Toggle Sidebar Minified

84 Komentar

  • Beben Koben

    WOW ternyata ada pluginnya jg nih si Toggle jQuery..wekekekekekk :P
    webek webek :D

  • MUX SPARROW

    ALHAMDULILLAAAAHHHH... tau gak Mas.. ini tutorial yang kucari dan kutunggu sejak 2 taon lalu!! *lebay tapi nyata \o/ \o/ \o/

  • MUX SPARROW

    @MUXLIMO
    Waduh.. ada masalah Mas. Baru masukin javascriptnya aja ..ane dapet ini: :'( Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The content of elements must consist of well-formed character data or markup.

    Error 500 Helep...

  • Taufik Nurrohman

    @MUXLIMO Sudah dibetulkan. Masalahnya ada di //<![CDATA[ (kurang satu braket kotak pembuka).

  • Putra

    persis kayak modification-blog hihi :D

  • Taufik Nurrohman

    @Alam Perwira Kebanyakan asal permintaannya memang dari sampel template Blog Tune-Up =)

  • Putra

    @Taufik Nurrohman easingnya sm kayak di: http://hompimpaalaihumgambreng.blogspot.com/2011/10/easing-jquery.html
    ??

  • Taufik Nurrohman

  • Bayu Handono

    @Beben Koben persis kaya yang waktu itu saya tanyain ke kang beben :D

  • Putra

    @Taufik Nurrohman kok gagal yah, tombonya malah ngilang kalau sy rubah easingType nya? T_T

  • Taufik Nurrohman

    @Alam Perwira Jangan lupa memakai tanda petik, juga tambahkan tanda pemisah berupa koma di akhir nilai (kecuali untuk opsi terakhir). Umumnya salahnya cuma ada di sekitar itu:

    $('#sidebar-wrapper').toggleSidebar({
    expand: "#main-wrapper",
    animated: true,
    animateSpeed: 600,
    easingType: "easeOutBounce",
    enableCookie: true
    });

    Demo: http://jsfiddle.net/tovic/z9Nen/4/

  • Putra

    yuhuy, lupa tanda petiknya hihi :D sekarang bisaaaa :-bd

  • Surga Kenari

    AH GILAK INI SIH KEREN BANGET.. ADA COOKIE NYA YANG SAYA SUKA! THANKS PAK!

  • Surga Kenari

    kok punya saya ga masuk ke dalem expand nya?

    tolong di cek pak.. http://jadikanpinter.blogspot.com

  • Unknown

    mas bs gk klo tombol togglex dimasukkan sj dlm menu, soalx tombol toggle diatas membuat ruang kosong, coba lihat contohx di blogx sobat Bayu Handono dan Isnan Nugrah Lastiko.... terima kasih.... :-bd

  • Taufik Nurrohman

    @Isnan Nugrah Lastiko Coba ini:

    $('.fauxcolumn-right-outer').toggleSidebar({
    expand:".fauxcolumn-center-outer"
    });
  • Taufik Nurrohman

    @Rohis Facebook Pertanyaan yang sangat tepat sasaran dan sesuai dugaan Saya <:)
    Sebenarnya, di luar opsi-opsi yang Saya tuliskan di atas ada beberapa opsi lagi yang Saya sembunyikan. Salah satu di antaranya adalah opsi insertNav. Default nilainya adalah true sehingga plugin akan secara otomatis menyisipkan tombol di atas sidebar. Kalau mau mengubah letak tombolnya caranya sederhana:

    Pertama-tama set opsi insertNav menjadi false:

    $('#sidebar-wrapper').toggleSidebar({
    expand: "#main-wrapper",
    insertNav: false
    });

    Lalu buat elemen tombolnya secara manual. Salin kode ini dan letakkan di suatu tempat (misalnya di salah satu item menu):

    <a class='sidebar-toggler' href='#'>&lArr; Hide Sidebar</a>

    Kode CSS di atas sudah tidak berlaku lagi, buat tampilan tombolmu sendiri atau tidak perlu diset tampilannya. Biarkan tampilan tombol menyesuaikan diri dengan lingkungan (dalam hal ini menyesuaikan dengan tampilan menu) ⇒ DEMO

  • Taufik Nurrohman

    @Taufik Nurrohman

    EDIT: Kode CSS di atas sudah Saya perbaiki. Bagi yang sudah menerapkan plugin ini bisa menyesuaikan lagi supaya tombolnya tidak membuat ruang kosong. Masukan bagus!!! =D

  • Surga Kenari

    masih ga bs pak, bisa di liat lagi

    http://jadikanpinter.blogspot.com

  • Taufik Nurrohman

    @Isnan Nugrah Lastiko $('.column-right-outer').toggleSidebar({
    expand: ".column-center-outer"
    });

  • Surga Kenari

    wah keren pak, sudah working. tapi.. masih ngawur tombol nya..

  • Surga Kenari

    Oke pak, solved :D

    sudah beres.. makasih banyak pak :>

  • Unknown

    bang kok ane malah jadi begini tolong bantuainya

    http://exsen-blog.blogspot.com/
    maih tahap oprasi

  • Taufik Nurrohman

    @Rhadit ds JQuery-nya dobel-dobel mas, jadi error semua:

    #1 http://code.jquery.com/jquery-latest.js
    #2 https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
    #3 http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
  • Surga Kenari

    seharusnya yg lates aja yakk

  • Taufik Nurrohman

    @Isnan Nugrah Lastiko Iya, tapi kalau mau menggunakan JQuery yang disimpan di Google, cukup tuliskan angka satu tanpa diikuti angka-angka lainnya. Artinya sama dengan JQuery latest:

    http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

    JQuery Latest = JQuery versi terakhir/terbaru.

    • Unknown

      itu mas kalo pake latest jquery, mungkin ga beberapa kode jquery yang berjalan di jquery versi-versi sebelumnya ga berkerja di jquery yang terbaru??

  • Surga Kenari

    ohh ilmu baru nih..

    jd yg lain buang ajah ya..

    cukup menggunakan yg latest pak?

    1.7.2
    1.7.1
    dll..

    itu mending di buang ganti yg latest ya pak?

  • Unknown

    jadi haru gemana gan?

  • Unknown

    mas udah ane apus tapi ga ada pengaruh'a pas?

    pastingan'a ga mau pindah satu layar

  • Surga Kenari

    seharusnya sudah bisa tuh.. coba tunggu sesepuh dulu sabar ajah..

  • Taufik Nurrohman

    @Isnan Nugrah Lastiko Kalau sekiranya semua widget di bawah JQuery memang bisa mendukung versi JQuery terakhir, bisa kok semuanya dibuang dan diganti pakai versi yang terakhir, tapi kalau ternyata ada widget yang tidak mendukung (contoh kasus: JQuery Simple Spy), harus ada pembaharuan lagi yang harus dilakukan pada widget tersebut. Kalau sekiranya tidak bisa memperbaharui, coba pilih (gonta-ganti) versi JQuery sampai semuanya bisa bekeja dengan satu JQuery saja.

  • Taufik Nurrohman

    @Rhadit ds Postingan nggak mau pindah satu layar, itu artinya sidebarnya sudah bisa nongol ngumpet kan? Tinggal memperbaiki bagian ini saja:

    expand: "#main-wrapper"

    Cari tahu selektor yang benar :W

  • Unknown

    ane masih newbie jadi kurang begitu paham maksih mas :D :D :D

  • Unknown

    cara memperbaikinya gemana mas?

  • Unknown

    sy pengen pake tp gk tau taruhx dimana, menu2 sy udah full,
    gmn klo dibuat floating aja mas.., tp carax gmn ya..???, terima kasih.... \o/

    • Taufik Nurrohman

      Hehe... "Besar pasak daripada tiang". Saya juga pengen pake sepeda motor mewah atau mobil mewah, tapi karena pendapatannya tidak sesuai dan ruangannya tidak cukup untuk menyimpan mobil, sudah full, jadi Saya tidak jadi memakai toggle sidebar ini ;)

  • Unknown

    mas kok di blog saya ga bisa di klick ya
    http://www.jakselcommunity.com/

  • Unknown

    di blog saya malah ga ada tulisannya hide sidebar gitu mas, kenapa yah?

    • Taufik Nurrohman

      Cuma salah letak saja mas. Itu artinya ID sidebar dan kolom postingnya tidak sama dengan contoh di atas. Coba cek komentar-komentar Saya di atas, mungkin ada yang cocok :\

  • Unknown

    kak jquery ini gak bisa di pake khusus untuk single post y

    makasih sebelumnya kalau bsa saya mau make hehehe

    • Taufik Nurrohman

      Bisa. Letakkan saja pluginnya di dalam tag kondisional halaman item/single post:

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <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>
      </b:if>
  • MUX SPARROW

    Mas Taufik.. ay masih gagal maning niih... :'( :'( :'(
    http://simuxlasi.blogspot.com/ mohon petunjuknyahhh.. :(

    • Taufik Nurrohman

      Sudah jadi ya? :\

      • MUX SPARROW

        belum banget lo, Mas.. itu cuman yang bisa ane pasang.. tapi hasilnya gak kayak di demo, Mas. Pengennya default sidebar hiden en ada efek easingnya.. helepp..
        :'( :'( :'( :'(

        • Taufik Nurrohman

          Baca tabel konfigurasi di atas. Kalau mau menampilkan efek animasi dan mengeset sidebar menjadi tersembunyi secara default, pengaturannya jadi begini nihhhhkkhhh:

          $('#sidebar-wrapper').toggleSidebar({
          expand: "#main-wrapper",
          animated: true,
          defaultHidden: true
          });
          • MUX SPARROW

            Udah itu juga, Mas.. mungkin belum jodoh ama template ane yang ini.. tar dicoba lagi kalo ganti pake template baru.. someday.. :'(

  • Unknown

    hore ane bisa juga

  • Unknown

    tolong dong mas >_> http://gararpas.blogspot.com/
    uda kucobain semua tapi ga bisa2m mungkin salah kode :'(

    • Taufik Nurrohman

      Fungsinya belum ditutup dan kamu memakai selektor yang salah:

      $(function() {
      $('sidebar').toggleSidebar({ // Mungkin maksudnya $('.sidebar')
      expand: "post hentry", // Mungkin maksudnya ".post.hentry"
      hideText: "⇒ Hide Sidebar",
      showText: "⇐ Show Sidebar",
      animated: false,
      animateSpeed: 400,
      easingType: null,
      extraWidth: 0,
      enableCookie: false, // JavaScript Cookie is required!
      defaultHidden: false
      });
      }); <= Kurang penutup di sini...

      Coba yang ini:

      $(function() {
      $('#sidebar').toggleSidebar({
      expand: "#content"
      });
      });
  • Unknown

    waaah, iya penutupnya aku hapus waktu itu, karna aku pikir itu kelebihan, jadi aku hapus aja hehe,
    sekarang uda bekerja sidebar toggle nya, terima kasih bantuannya mas :)

  • Anonim

    mau tanya kang ...
    di homepage postingan saya ada di kiri dan sidebar kanan, tapi kalo full post, jadi berubah posisi, sidebar di kanan dan post di kiri ..

    apakah kode" diatas sama yah ??
    solanya udah saya coba tidak berhasil, ga mau muncul kata" hide sidebar nya ....

  • Unknown

    mas kalo saya mau dibikin tooglenya dalam keadaan terbuka di keadaan awalnya pake apa mas?

    • Taufik Nurrohman

      $('#sidebar-wrapper').toggleSidebar({
      expand: "#main-wrapper",
      defaultHidden: true
      });
      • Unknown

        siiipp... makasih mas, dicoba dulu :-D

  • Mrbej0

    mas kok jadi kaya begini ya ga ada efek's pas di klik,

    tapi saya taruh di menu gemana mas
    http://mbahkukus.blogspot.com/

    • Taufik Nurrohman

      --
      [22:02:09.732] SyntaxError: missing } after property list @ http://mbahkukus.blogspot.com/:701

      Cuma kurang satu koma saja. Coba ini:

      $('#sidebar-wrapper').toggleSidebar({
      eexpand: "#main-wrapper",
      animated: false,
      animateSpeed: 600,
      easingType: "easeOutBounce",
      extraWidth: 0,
      enableCookie: false,
      defaultHidden: false,
      insertNav: false
      });
      • Mrbej0

        tetap tidak terjadi apa apa nih mass,
        gemena nih...

  • Unknown

    Assalamualaikum mas, cara ini bisa gak di kompilasi dengan sidebar MBT multi tab widget punya blog saya? adakah caranya? soalnya gak muncul tombolnya. kemungkinan ketutupan sama MBT multi tab widgetnya :D

    putraarifprasetyo.blogspot.com

  • Alwan

    Mas Kok saya nddak bisa mas, tombolnya nddak ada, saya udah coba dari cara-cara komentar di atas, Wuahahahahahahha :'(

  • Anonim

    alhamdulillaaaaaaaaahh.. !! setelah sekian lama.. akhirnya bisaaaa!!!
    :'( :'( :'( :'( :'( :'( <--- saking terharunya :D :D :D

  • Anonim

    Ada Lagi Nih Problemnya Mas Taufik ,
    Kelebihan expandnya ,
    atau terlalu lebar ketika diklik.
    check : super-blogazine7.blogspot.com

    Ada Masukkan...?

    • Taufik Nurrohman

      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.

  • Unknown

    biar #main-wrappernya geser ketengah dan tidak bertambah lebar bagaimana?

Komentar telah ditutup.