Cara Membuat Sticky Widget Atau Widget Mengikuti Scroll SEO Friendly

Pada kali ini saya akan share tentang bagaimana cara membuat sticky widget, atau widget yang dapat mengikuti pergerakan scroll dari atas kebawah maupun sebaliknya. Dalam pembuatan sticky widget kali ini sangat SEO Friendly dan tidak membuat beban pada blog sobat.

Karena pada teknik kali ini kita tidak akan memakan jquery maupun script dari luar, kita akan memakai java script yang di include langsung di blog kita. Oleh karena itu, cara ini tidak akan ngefek ke kecepatan loading blog sobat.

2 Jenis Sticky Widget

#1. Sticky Widget Yang Tidak Dapat Berhenti di Footer

Jenis sticky widget ini sangat mudah pemasangannya, nanti kita akan mempelajarinya. Biasanya sticky widget jenis ini banyak dipasang pada sidenav, atau navigasi yang berada di atas header seperti pada blog saya saat ini.

Sticky widget jenis ini juga dapat dipasang pada bagian sidebar, namun tidak efektif bila widgetnya memiliki ukuran yang sangat tenggi, karena hal tersebut dapat menerobos footer dibawahnya, akibatnya footer akan tertutup oleh widget sticky tersebut.

Sticky jenis ini juga harus benar dalam penerapannya, karena sticky jenis ini rawan terjadi bug. Bug yang biasa terjadi pada sticky jenis ini adalah, ketika postingan kita lebih pendek dari sticky widget, maka jika kita scroll kebawah, blog kita akan memantul mantul seperti tidak mau discroll kebawah. Namun kita nanti akan membahas agar tidak terjadi bug seperti itu.

#2. Sticky Widget Yang Dapat Berhenti Di Footer

Sesuai dengan namanya, sticky widget jenis ini dapat berhenti pada footer blog sobat. Sticky widget seperti ini pasti terletak pada sidebar blog. Dalam pemasangan sticky widget ini sangatlah rumit, maka dari itu kita akan membahasnya dalam postingan lainnya.

Cara Memasang Sticky Pada Widget Tertentu

Ada hal yang harus sobat perhatikan sebelum memasang sticky widget ini,

#Pertama
Sticky widget harus berada pada area sidebar, atau area yang terletak pada bagian atas, seperti navigasi diatas header, jangan memasang sticky widget pada area bawah seperti footer, karena hal tersebut tidak akan berguna. Kenapa memasang sticky widget kalau terletak dibawah.

#Kedua
Widget yang dipasang sticky ukurannya tidak terlalu tinggi, jika terlalu tinggi, hal tersebut dapat memicu menimbulkan bug seperti apa yang saya jelaskan diatas. Untuk tinggi maksimal yang saya rekomendasikan adalah dibawah 500px, karena diatas ukuran tersebut sudah banyak terjadi bug.


Setelah kedua hal tersebut sudah benar benar sobat perhatikan, sekarang saatnya kita untuk memasang widget ini.

Langkah Memasang Sticky Widget

Langkah #1.
Ketahui ID Widget yang akan sobat buat sticky, bila sobat belum tau cara untuk mengetahui ID Widget, sobat dapat baca artikel : 2 Cara Mudah Mengetahui ID Widget Pada Blog.

Langkah #2.
Setelah mengetahui ID nya, buka blogger dan masuk menu Template > Edit HTML, lalu akan muncul kode html blog sobat.

Langkah #3.
Cari kode </body>, untuk mempercepat pencarian gunakan fitur search dengan menekan Ctrl + f.

Langkah #4.
Setelah ketemu, tambahkan kode javascript dibawah ini tepat diatas kode </body> tersebut.

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

Ganti tulisah WIDGET_ID dengan kode ID dari widget yang akan sobat jadikan sticky.

Langkah #5.
Setelah itu save perubahan template dan lihat hasilnya.

Tips Memasang Sticky Widget 

Untuk sticky widget jenis ini saya sarankan dipakai untuk widget yang memiliki ukuran tidak terlalu tinggi, seperti iklan adsense yang berukuran 300 x 250, atau cloud label, atau widget profil blog sobat.

Jangan memasang sticky untuk iklan adsense yang berukuran 300 x 600, hal tersebut dapat mengakibatkan bug, dan jangan memasang sticky ini untuk popular post, hal tersebut juga dapat mengakibatkan bug.

Intinya, sticky widget jenis ini hanya cocok untuk widget dengan ukuran tidak terlalu tinggi, dan tidak saya sarankan untuk widget yang berukuran lebih dari 500px.

Sekian tutorial Cara Membuat Sticky Widget Atau Widget Mengikuti Scroll SEO Friendly dari saya, semoga sedikit yang saya sampaikan tersebut dapat bermanfaat bagi sobat semu, tunggu artikel tentang blogger menarik lainnya, akhir kata, cukup sekian dan terima kasih. Happy blogging :)