Cara Menciptakan Widget Sticky Yang Mengikuti Scroll Pada Blog

Cara Membuat Widget Yang Mengikuti Scroll pada Blog  - Apa itu Widget sticky? Mungkin kau gres mengenal widget stcky ini, Widget sticky yaitu sebuah widget yang saat sebuah halaman di scroll widget ini akan ikut kescroll sampai final artikel yang di scroll, jadi widget akan tetap terlihat di layar laptop atau pc saat artikel yang di scroll terlalu panjang.

Apa manfaat dari Widget sticky? Widget sticky sangat mempunyai kegunaan untuk blog yang sudah terpasang iklan, fungsinya yaitu biar iklan yang berada di widget sidebar tidak akan hilang pada artikel yang panjang sehingga gampang di klik oleh pengunjung.

Widget sticky bukan hanya untuk iklan, Widget sticky sanggup di gunakan pada semua widget yang berada di sidebar, menyerupai recent post, artikel terbaru, label, arsip blog dan lain-Nya. Bagaiman mungkin kau sudah tau apa itu Widget sticky dan fungsi-Nya. 

Nah mungkin kau bertnya Bagaimana cara menciptakan Widget sticky, nah pada artikel kali ini saya akan menunjukkan cara menciptakan Widget sticky biar teman – teman sanggup mengethaui-Nya, nah berikut cara menciptakan Widget sticky. Baca Juga:Cara Mengatur Robot.txt dan Tag tajuk Robot di Blogspot Agar Lebih SEO Friendly

Cara Membuat Widget Yang Mengikuti Scroll pada Blog

Sebelum menciptakan Widget sticky kau harus mengetahui ID widget yang ingin di ubah ke Widget sticky, kenpa harus mengetahui ID widget? Karena ID widget ini di gunakan untuk mengubah suatu widget ke Widget sticky, jadi yang perlu di ketahui yaitu ID widget yang ingin di ubah ke Widget sticky.

1. Silahkan kau login ke akun Blogger kamu

2. Kemudian Klik TEMA

3. Klik EDIT HTML

4. Setelah terbuka silahka klik pada kolom instruksi html kemudia tekan CTLR + F

5. Pada kotak pencarian silahkan cari instruksi </body> kemudian tekan ENTER

6. Jika sudah Ketemu silahkan copy instruksi berikut ini, kemudian paste sempurna di atas </body>

<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>

7. Silahkan Kamu ganti WIDGET_ID  dengan ID widget yang ingin kau jadikan Widget sticky pada instruksi html yang telah kau copas tadi kemudian klik simpan dan lihat hasil-Nya.

Bagaimana gampang kan cara menciptakan Widget sticky pada blogger, nah sekian dari artikel cara menciptakan Widget sticky pada blog jikalau ada yang belum paham silahkan komen pada kolom komentar atau sanggup pribadi hubungi saya melalui kontak from Insya Allah fast Respon. Semoga artikel ini bermanfaat untuk kita semua. Salam blogger indonesia.

Sumber https://www.bungkill.com/

Bagikan Artikel ini