Membuat Efek Accordion Sidebar dengan JQuery

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Membuat Efek Accordion Sidebar dengan JQuery dan semoga artikel ini bermanfaat.

---

Membuat Efek Accordion sidebar dengan JQuery, buat sobat yang suka utak-atik template mungkin cara ini pantas untuk dicoba, selain dapat memperkecil tampilan sidebar membuat efek accordion sidebar ini akan sedikit mempercantik blog karena dengan efek accordion maka yang akan ditampilkan secara utuh hanya satu widget saja sementara yang lain akan tersembunyi. 

Membuat Efek Accordion sidebar dengan JQuery ini bisa sobat terapkan pada blogspot dan yang harus diperhatikan adalah ID dari sidebar sobat, karena setiap template mungkin ada perbedaan. supaya sobat bisa tau ID dari sidebar sobat sobat bisa menggunakan ad-on firebug pada mozilla. sebagai contoh pada tutorial ini ID sidebarnya adalah " rsidebar-wrapper " dengan Header H2. nah mungkin buat yang lain ID tersebut bisa sidebar, right-sidebar atau buat yang menggunakan template blogspot baru IDnya adalah sidebar-right-1, oleh karena itu sobat sesuaikan saja. untuk header H2 mungkin kalau belum diganti akan sama atau bila sudah diganti sesuaikan saja dengan headernya. untuk contohnya lihat sidebar blog ini.

Berikut Caranya:

• Seperti biasa saja pada saat ngedit template kemudian sobat cari kode ]]></b:skin> kemudian letakan kode CSS dibawah ini tepat diatasnya.
• Dan masih pada halaman yang sama cari kode </head> kemudian letakan kode Javascript tepat diatasnya.

#rsidebar-wrapper h2 {
  margin: 0 2px;
  padding:3px 7px 3px 13px;
  background-color:#111;
  border-color:#444 transparent #222;
  border-style:solid;
  border-width:1px 0;
  font:normal bold 12px "arial", Trebuchet, sans-serif;
  color:#fff;
  text-transform:uppercase;
}
#rsidebar-wrapper h2.active span {
  padding-right:10px;
  background:#00ff00;
}
#rsidebar-wrapper h2:hover {
  margin: 0 2px;
  padding:3px 7px 3px 13px;
  background:#ddaa6e;
  font:normal bold 12px 'Trebuchet MS', Trebuchet, sans-serif;
  color:#00FF00;
  text-transform:uppercase;
  border-bottom:1px solid #404040;
}
#rsidebar-wrapper h2.active {
  background-color:#052605;
  color:#00ff00;
  box-shadow:0 0 3px black;
  border-color:#555 transparent #222;
  border-style:solid;
  border-width:1px 0;
}
#rsidebar-wrapper .widget {
  margin:0 0;
  padding:0 0;
}
#rsidebar-wrapper .widget-content {
  margin-top:5px;
  padding:3px 5px 3px 0px;
}
#rsidebar-wrapper .widget-content ul li {
  list-style:circle;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  padding: 3px 5px 3px 0;margin-left:0px;
}

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    $('#rsidebar-wrapper .widget-content').hide();
    $('#rsidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
    $('#rsidebar-wrapper  h2').css('cursor', 'pointer').click(function() {
        if($(this).next().is(':hidden')) {
            $('#rsidebar-wrapper h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
//]]>
</script>

Sekali lagi perhatikan kode yang berwarna merah dan sesuaikan dengan ID sidebar blog sobat.

Kalau sudah selesai silahkan simpan template sobat dan lihat hasilnya.

Dan apabila pada template sobat sudah terpasang JQuery yang digaris bawah sobat hapus saja.

Buat sobat yang berhasil memasang tutorial ini agar tampilan sidebarnya lebih keren sobat bisa membuat sidebar melayang atau auto slide sehingga sidebar akan mengikuti scroll contohnya pada blog ini,, silahkan baca di Cara Membuat Sidebar Auto Slide Melayang

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Membuat Efek Accordion Sidebar dengan JQuery kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered

BACA JUGA ARTIKEL TERKAIT LAINNYA

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 19:49