Cara membuat widget sticky di blog

Cara menambahkan widget sticky di website

Widget Sticky adalah elemen atau widget yang tetap berada di posisinya meskipun pengguna menggulir (scroll) halaman blog ke atas atau ke bawah. Dengan kata lain, widget ini "menempel" di layar dan selalu terlihat oleh pengunjung blog, tidak peduli seberapa jauh mereka menggulir halaman.

Fungsi dan Manfaat Widget Sticky

Widget Sticky sering digunakan untuk meningkatkan pengalaman pengguna (user experience) dengan cara:

• Navigasi yang Mudah : Widget Sticky dapat berisi menu navigasi, sehingga pengunjung dapat dengan mudah beralih antar halaman tanpa harus kembali ke bagian atas halaman.
• Call-to-Action (CTA) : Widget Sticky bisa digunakan untuk menampilkan tombol CTA, seperti "Subscribe", "Download", atau "Hubungi Kami", yang selalu terlihat oleh pengunjung.
• Informasi Penting : Informasi penting, seperti kontak, ikon media sosial, atau pencarian, dapat ditempatkan dalam widget ini agar selalu tersedia.
• Meningkatkan Konversi : Karena widget ini selalu terlihat, peluang pengunjung untuk berinteraksi dengan elemen-elemen tersebut lebih besar, yang dapat meningkatkan konversi.

Tips Menerapkan Widget Sticky

1. Hindari Terlalu Banyak Elemen Sticky : Jangan gunakan terlalu banyak widget sticky karena dapat mengganggu pengalaman pengguna dan membuat halaman terasa penuh.
2. Perhatikan Ukuran dan Posisi : Pastikan widget sticky tidak terlalu besar atau menutupi konten utama blog.
3. Responsif : Pastikan widget sticky tetap terlihat baik di perangkat mobile maupun desktop.
4. Pertimbangkan Kecepatan : Jika widget memuat konten dinamis (misalnya, iklan atau animasi), pastikan itu tidak memperlambat waktu muat halaman.

Cara memasang widget sticky widget di blog

1. Buka Dashboard Blogger Tema Edit HTML

Tambahkan Script berikut diatas tag </body>

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(function(){var s,i,n;$("#HTML1").length&&(s=$("#HTML1"),i=$("#HTML1").offset().top,n=$("#HTML1").height(),$(window).scroll(function(){var o=$("#footer").offset().top-n-10,t=$(window).scrollTop();i<t?s.css({position:"fixed",top:10}):s.css("position","static"),o<t&&(t=o-t,s.css({top:t}))}))});
//]]>
</script>
</b:if>

Silakan diperhatikan kode dibawah ini dan gantilah dengan ID tertentu sesuai template yang kamu gunakan pada kode diatas:
#HTML1 : Sesuaikan dengan ID dari widget yang akan dibuat sticky.
#footer : Sesuaikan dengan ID Footer Anda sebagai batas bawah berhentinya efek dari sticky