Artikel kali ini tentang widget blog melayang setelah halaman blog kita di scroll ke bawah. Dan akan kembali pada posisinya semula, jika halaman blog kembali di scoll ke atas. Widget tidak akan melayang atau mengambang jika halaman blog belum di scroll ke bawah.
Contohnya: Bisa dilihat di halaman blog ini, coba scroll ke bawah dan lihat pada widget Artikel Populer(jika masih saya gunakan). Widget tersebut akan melayang setelah widget mendekati halaman atas blog. Dan akan kembali seperti semula setelah halaman blog kembali di scroll ke atas.
Posisi widget pada saat melayang dapat kita atur sesuai dengan keinginan kita. Untuk lebih jelasnya tentang cara membuat widget melayang setelah di scroll, silakan ikuti langkah-langkah dibawah ini.
- Silakan login ke blogger, dari halaman dasbor pilih pengaturan template.
- Dan klik edit HTML dan cari kode </body>
- Selanjutnya masukan kode berikut ini di atas </body>
- 560 Untuk mengatur jarak widget akan melayang, makdsudnya setelah halaman blog di scroll 560px ke bawah, maka widget baru akan melayang.
- fixed code yang digunakan untuk membuat blog melayang.
- top:30 posisi widget setelah di scroll 30px dari halaman atas blog.
- relative dan top:0 agar widget kembali ke posisi semula, setelah halaman blog di scroll ke atas.
- #PopularPosts1 kode id dari widget Artikel Populer. Silakan diganti dengan kode id dari widget yang akan dibuat melayang. Cara mencari kode id widget, lihat dibawah.
- Setelah itu save template. Dan buka salah satu halaman artikel blog kamu, jika belum berjalan, coba masukan kode berikut ini diatas </body>
- Save template, selesai.
<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>
Keterangan kode:$(window).scroll(function(){
if ($(window).scrollTop() >= 560){
$('#PopularPosts1').css({position:'fixed',top:30});
} else {
$('#PopularPosts1').css({position:'relative',top:0});
}
});
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
Cara mencari kode id widget
- Tentukan widget mana yang akan di buat melayang, judul widgetnya apa?contoh: Artikel Populer.
- Lalu ke pengaturan template, klik edit html dan cari kode Artikel Populer, Contoh kodenya seperti dibawah ini.
- Kode merah PopularPosts1 itu adalah kode id dari widget Artikel Populer.
<b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'>
Silakan diatur sesuai dengan yang kalian inginkan, saran saya widget yang akan dibuat melayang, sebaiknya letakan dibagian paling bawah sidebar, agar tidak menutupi widget2 yang lain. Kode script pada langkah 4 itu merupakan kode script yang paling ringan menurut saya, karena sudah saya bandingkan dengan kode script yang lain. Kode script diatas itu kira2 sekitar 51.0 kb, jadi tidak terlalu memberatkan loading blog.
Itulah sedikit cara desain blog agar lebih menarik yaitu dengan membuat widget melayang setelah di scroll. Untuk cara widget melayang yang lebih simpel, silakan baca di artikel fungsi fixed dan cara menggunakannya dan juga artikel membuat menu menempel di dingding blog. Semoga artikel diatas bisa bermanfaat untuk anda.
EmoticonEmoticon