Cara Membuat Widget sticky Yang Mengikuti Scroll Pada Blog
Apa manfaat dari Widget sticky? Widget sticky sangat berguna untuk blog yang sudah terpasang iklan, fungsinya adalah agar iklan yang berada di widget sidebar tidak akan hilang pada artikel yang panjang sehingga mudah di klik oleh pengunjung.
Widget sticky bukan hanya untuk iklan, Widget sticky dapat di gunakan pada semua widget yang berada di sidebar, seperti recent post, artikel terbaru, label, arsip blog dan lain-Nya. Bagaiman mungkin kamu sudah tau apa itu Widget sticky dan fungsi-Nya.
Nah mungkin kamu bertnya Bagaimana cara membuat Widget sticky, nah pada artikel kali ini saya akan memberikan cara membuat Widget sticky agar teman – teman dapat mengethaui-Nya, nah berikut cara membuat 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 membuat Widget sticky kamu 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 adalah ID widget yang ingin di ubah ke Widget sticky.
1. Silahkan kamu login ke akun Blogger kamu
2. Kemudian Klik TEMA
3. Klik EDIT HTML
4. Setelah terbuka silahka klik pada kolom kode html kemudia tekan CTLR + F
5. Pada kotak pencarian silahkan cari kode </body> lalu tekan ENTER
6. Jika sudah Ketemu silahkan copy kode berikut ini, kemudian paste tepat 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 kamu jadikan Widget sticky pada kode html yang telah kamu copas tadi lalu klik simpan dan lihat hasil-Nya.
Bagaimana mudah kan cara membuat Widget sticky pada blogger, nah sekian dari artikel cara membuat Widget sticky pada blog jika ada yang belum paham silahkan komen pada kolom komentar atau bisa langsung hubungi saya melalui kontak from Insya Allah fast Respon. Semoga artikel ini bermanfaat untuk kita semua. Salam blogger indonesia.
Sumber https://www.bungkill.com/
