Tutorial kali ini saya ingin bagikan buat
sobat bagaimana cara membuat sidebar tetap ketika discroll kebawah.
metode ini bisa dikatakan Membuat Sticky Widget Sidebar di Blogspot
nah kira-kira seperti itulah nanti.
Sebenarnya tutorial ini agar pengunjung blog kita selalu melihat sidebar
yang ingin kita tawarkan ketika pengunjung blog menscroll arikel yang
dibaca dipostingan blog kita. sobat bisa lihat sidebar bawah untuk blog
ini silahkan sobat scroll maka sidebar akan tetap diatas namun ketika
kembali ke top header sidebar akan kembali ke posisi semula, nah itulah
kira-kira pengertian tentang tutorial ini.
kita langsung saja pada pokok dari inti tutorial ini.
1. silahkan login dulu ke blogger.
2. menuju ke edit template.
3. scroll kebawah sebelm kode </body> silahkan masukkan kode dibawah ini.
<script type="text/javascript" src="http://yourjavascript.com/80423127412/jquery-latest.js"></script>
<SCRIPT>
$(document).ready(function() {
var div = $('#HTML3');
var start = $(div).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(div).css('position',((p)>start) ? 'fixed' : 'static');
$(div).css('top',((p)>start) ? '10px' : '');
});
});
</SCRIPT>
pada warna merah yang sudah saya tandai silahkan kalian ganti dengan
HTML widget pada sidebar sobat. metode ini bisa kalian terapkan bukan
hanya untuk sidebar namun bisa juga diterapkan pada header blog atau
juga navigasi drop down atau navigasi menu. caranya cukup simple sobat
cukup ganti yang warna merah dengan kode HTML untuk header atau navigasi
menu, sebagai contoh :
<div class='navigation'>
<div class='nav'>
pada warna merah diatas silahkan musukkan kodenya di kode javascript Sticky diatas cara ganti dengan kode #navigasi, untuk header bisanya memakai kode #header-wrapper, silahkan aplikasikan sendiri kalau memang kurang jelas sobat bisa meninggalkan komentar dibawah
5. kalau sudah sobat terapkan kode-kode diatas sekarang silahkan simpan
dan lihat al-hasil, berubah atau malah amburadul, aku kira hanya itu sekian saja semoga berhasil.