Kali ini saya akan berbagi kepada kalian sebuah tutorial blogger tentang bagaimana cara membuat widget yang ada di blog kita menjadi melayang atau posisi fixed saat halaman discroll ke bawah kemudian kembali ke tempat semula saat halaman discroll ke atas. Widget ini tidak akan melayang jika halaman belum discroll ke bawah. Untuk lebih jelasnya, kalian bisa melihat contohnya dengan mengklik link demo di bawah ini :
Demo
Bagaimana? Apakah kalian tertarik untuk menggunakannya di blog kalian? Berikut ini adalah cara menggunakannya :
- Pertama, masuk ke dasboard blog kalian.
- Masuk ke menu Template dan pilih Edit HTML.
- Masukkan kode di bawah ini tepat di atas kode </body> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
- Jika sudah ada kode semacam itu, kalian bisa melompati langkah di atas.
- Masukkan kode di bawah ini tepat setelah kode di atas :
<script type='text/javascript'>
$(window).scroll(function(){
if ($(window).scrollTop() >= 560){
$('#PopularPosts1').css({position:'fixed',top:30});
} else {
$('#PopularPosts1').css({position:'relative',top:0});
}
});
</script>
- Terakhir tinggal kalian simpan.
Keterangan :
Kode yang berwarna ORANGE adalah jarak widget akan melayang, makdsudnya setelah halaman blog di scroll 560px ke bawah, maka widget baru akan melayang.
Kode yang berwarna BIRU adalah jarak widget akan melayang dari atas layar.
Kode yang berwarna HIJAU adalah kode ID widget. Kalian bisa menggantinya sesuai dengan ID widget yang akan kalian buat melayang. Untuk mengetahui ID widget tersebut, kalian bisa melihatnya di sini.
Bagaimana? Sekian artikel saya kali ini. Semoga bermanfaat bagi kita semua. Jangan lupa untuk meninggalkan komentar dan klik tombol like di bawah ini.
Widget saya akhirnya bisa jadi melayang gan setelah membaca tips disini. Langsung bisa pake, thanks. Semoga blog nya makin sukses gan
ReplyDelete