Cara Membuat Sidebar Tetap diatas Ketika diScroll

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. namun sebelum kita mualai tutorial ini alangkah afdholnya kalau aku perjelas untuk apa sebenarnya tutorial ini.

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, kalau masih amburadul ulangi lagi atau komplen dibawah artikel ini, saya siap bantu sobat.

nah itulah tutorial Cara Membuat Sidebar Tetap diatas Ketika diScroll semoga artikel yang sederhana ini dapat membantu sobat dalam mendesign blogspot sobat, sobat juga bisa buka halaman cara membuat label cloud yang keren ditahun 2014 ini. aku kira hanya itu sekian saja semoga berhasil.

Related Posts:

Tweet