Cara Membuat Widget Mengikuti Scroll pada Blog

Pada kesempatan kali ini saya akan membahas artikel tentang Cara Membuat Widget Mengikuti Scroll pada Blog. Pada hal ini dapat di sebut dengan nama istila Sticky. Apa itu sticky? Sticky adalah suatu pengingat yang bisa anda lihat di mana-mana. Sticky dapat menempel di tempat-tempat yang dikunjungi. Maka dari itu widget yang akan kita buat kali ini dapat menempel di mana-mana ketika kita membaca artikel dan widget ini akan mengikuti scroll ketika kita geser kebawah atau keatas.

Apakah masih bingung? saya jelaskan lagi, sticky widget bisa dilihat pada blog saya yaitu widget Label yang terletak bagian kiri blog saya, kira-kira seperti itulah fungsinya. Ketika anda scroll atau bergulir kebawah maka widget label saya akan mengikuti juga.

Mengapa menggunakan sticky widget? Menurut saya hal ini sangat efektif jika anda mempunyai blog artikel, karena di segi anda mempunyai konten artikel yang panjang maka semakin artikel di baca kebawah di bagian bawah widget akan selalu terisi oleh sticky widget jadi agar tidak terlihat kosong. Kamu juga bisa menggunakan sticky widget untuk misalnya Recent Post. Iklan Google Adsense atau iklan lain, Label seperti blog saya, dll.

Cara Membuat Widget Mengikuti Scroll pada Blog

Langkah 1 : Menemukan ID Widgetnya. Pada pertemuan sebelumya saya sudah pernah membuat artikel tentang cara menemunakan ID widget,jika belum tau bisa mempelajarinya dahulu. Disini keberadaan ID Widget sangatlah penting karena kalau tidak ada maka apa yang akan kita buat?

Baca: Cara mengetahui ID Widget pada blog

Langkah 2 : Buka Blogger, Pilih template, Lalu Edit HTML
Langkah 3 : Temukan kode </body> dengan menekan tombol ctrl+f dan tambahkan kode di bawah ini di atasnya.

<script>
//<![CDATA[
HG_makeSticky("WIDGET_ID"); // enter your widget ID here
function HG_makeSticky(elem) {
var HG_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
HG_sticky.parentNode.insertBefore(scrollee, HG_sticky);
var width = HG_sticky.offsetWidth;
var iniClass = HG_sticky.className + ' HG_sticky';
window.addEventListener('scroll', HG_sticking, false);
function HG_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
HG_sticky.className = iniClass + ' HG_sticking';
HG_sticky.style.width = width + "px";
} else {
HG_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.HG_sticking {background:#ffffff !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative9 !important;}
</style>

Baca: Cara mengetahui ID Widget pada blog

Langkah 4 : Ganti Widget_ID dengan ID widget yang ingin kamu jadikan sticky, Setelah itu Save dan lihat hasilnya.

Sekian artikel yang saya buat kali ini tentang Cara Membuat Widget Mengikuti Scroll pada Blog, Jika masih ada yang belum paham bisa di tanyakan di kolom komentar. Terima kasih

Share :