Cara Membuat Sidebar Auto Slide Melayang

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Cara Membuat Sidebar Auto Slide Melayang dan semoga artikel ini bermanfaat.

---

Cara Membuat Sidebar Auto Slide Melayang, untuk memaksimalkan tampilan sidebar sobat cara ini mungkin bisa sobat coba. dengan membuat sidebar auto slide maka sidebar tersebut akan selalu mengikuti scroll sehingga akan selalu nampak. sobat bisa lihat contohnya di blog ini, namun mungkin bila sidebarnya terlalu banyak widget cara ini kurang baik juga karena widget yang melebihi layar computer/laptop akan tidak bisa dilihat, nah dengan demikian maka sobat perlu memasang terlebih dahulu tutorial Membuat Efek Accordion Sidebar dengan JQuery agar tampilan jadi maksimal.

Ok, kita lanjut saja pada tutorial Cara Membuat Sidebar Auto Slide Melayang, namun sebelum berlanjut ke penerapannya sobat perlu diperhatikan dulu templatenya khususnya mengenai ID sidebarnya, seperti pada tutorial ini saya menggunakan ID sidebar "#rsidebar-wrapper" nah buat template sobat sesuaikan saja, apabila sobat kesulitan mencari ID sidebar sobat bisa menggunakan ad-on Firebug bagi pengguna mozilla.

Berikut langkah membuat sidebar Auto Slide Melayang:

Seperti biasa saja pada edit HTML template sobat cari kode </head> kemudian letakan kode dibawah ini tepat diatas kode tersebut.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){var offset=$(&quot;#rsidebar-wrapper&quot;).offset();var topPadding=10;$(window).scroll(function(){if($(window).scrollTop()&gt;offset.top){$(&quot;#rsidebar-wrapper&quot;).stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding})}else{$(&quot;#rsidebar-wrapper&quot;).stop().animate({marginTop:0})}})});
</script>

Bila template sobat telah terpasang library JQuery seperti kode yang digaris bawah maka sobat hapus saja kode yang digaris bawah tersebut.
Kemudian perhatikan kode yang berwarna merah  #rsidebar-wrapper adalah kode ID sidebar, sobat sesuaikan dengan ID sidebar sobat.
Bila sudah selesai simpan template sobat dan lihat hasilnya.
Sekali lagi keberhasilan membuat sidebar Auto Slide Melayang ada pada kode ID sidebar, untuk itu jangan salah memasang IDnya.

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Cara Membuat Sidebar Auto Slide Melayang 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:21