Widget Blog Melayang Sehabis Di Scroll

Artikel kali ini wacana widget blog melayang sehabis halaman blog kita di scroll ke bawah. Dan akan kembali pada posisinya semula, jikalau halaman blog kembali di scoll ke atas. Widget tidak akan melayang atau mengambang jikalau 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 aku gunakan). Widget tersebut akan melayang sehabis widget mendekati halaman atas blog. Dan akan kembali ibarat semula sehabis halaman blog kembali di scroll ke atas.

Posisi widget pada ketika melayang sanggup kita atur sesuai dengan harapan kita. Untuk lebih jelasnya wacana cara menciptakan widget melayang sehabis di scroll, silakan ikuti langkah-langkah dibawah ini.

1. Silakan login ke blogger, dari halaman dasbor pilih pengaturan template.
2. Dan klik edit HTML dan cari instruksi </body>
3. Selanjutnya masukan instruksi berikut ini di atas </body>
<script type='text/javascript'>
$(window).scroll(function(){
if ($(window).scrollTop() &gt;= 560){
$(&#39;#PopularPosts1&#39;).css({position:&#39;fixed&#39;,top:30});
} else {
$(&#39;#PopularPosts1&#39;).css({position:&#39;relative&#39;,top:0});
}
});
</script>
Keterangan kode:

• 560 Untuk mengatur jarak widget akan melayang, makdsudnya sehabis halaman blog di scroll 560px ke bawah, maka widget gres akan melayang.
• fixed code yang dipakai untuk menciptakan blog melayang.
• top:30 posisi widget sehabis di scroll 30px dari halaman atas blog.
• relative dan top:0 agar widget kembali ke posisi semula, sehabis halaman blog di scroll ke atas.
• #PopularPosts1 kode id dari widget Artikel Populer. Silakan diganti dengan instruksi id dari widget yang akan dibentuk melayang. Cara mencari instruksi id widget, lihat dibawah.
4. Setelah itu save template. Dan buka salah satu halaman artikel blog kamu, jikalau belum berjalan, coba masukan instruksi berikut ini diatas </body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
5. Save template, selesai.

---

 Cara mencari instruksi id widget

---

1. Tentukan widget mana yang akan di buat melayang, judul widgetnya apa?contoh: Artikel Populer.
2. Lalu ke pengaturan template, klik edit html dan cari instruksi Artikel Populer,  Contoh kodenya ibarat dibawah ini.
<b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'>
3. Kode merah PopularPosts1 itu yaitu instruksi id dari widget Artikel Populer.

Silakan diatur sesuai dengan yang kalian inginkan, saran aku widget yang akan dibentuk melayang, sebaiknya letakan dibagian paling bawah sidebar, supaya tidak menutupi widget² yang lain. Kode script pada langkah 4 itu merupakan instruksi script yang paling ringan berdasarkan saya, alasannya yaitu sudah aku bandingkan dengan instruksi script yang lain. Kode script diatas itu kira2 sekitar 51.0 kb, jadi tidak terlalu memberatkan loading blog. 

Itulah sedikit cara desain blog supaya lebih menarik yaitu dengan menciptakan widget melayang sehabis di scroll. Untuk cara widget melayang yang lebih simpel, silakan baca di artikel fungsi fixed dan cara menggunakannya dan juga artikel membuat hidangan melekat di dingding blog. Semoga artikel diatas sanggup bermanfaat untuk anda.