Cara Membuat Sticky Widget Yang SEO Friendly

Assalamu’alaikum Warahmatullahi Wabarakaatuh, 

Halo Sobat Mas Rizky, berjumpa lagi ya di Website yang sama, dalam kesempatan kali ini admin Masrizky.web.id akan share tentang bagaimana Cara Membuat Sticky Widget Yang SEO Friendly, Dalam pembuatan sticky widget kali ini tentunya wajib SEO Friendly dan tidak membuat beban pada blog kamu ya sob.

Sticky widget atau widget yang mengikuti scroll adalah elemen desain web yang tetap terlihat di layar saat pengguna menggulir halaman. Ini sangat berguna untuk mempertahankan konten penting seperti navigasi, iklan, atau call-to-action tetap terlihat. 

Membuat sticky widget yang SEO friendly memerlukan perhatian terhadap beberapa aspek penting, termasuk kinerja situs dan pengalaman pengguna.

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

 2 Jenis Sticky Widget

#1. Sticky Widget Yang Tidak Dapat Berhenti Bagian di Footer

Jenis sticky widget ini tentu sangat mudah pemasangannya, nanti kita akan berikan tutorialnya secara umum atau mudah di mengerti ya sob. Biasanya sticky widget jenis ini banyak dipasang pada sidenav, atau navigasi yang berada di atas header seperti pada blog saya pribadi (masrizky.web.id).

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

Sticky jenis ini juga harus benar-benar dalam penerapannya pada tema, karena sticky jenis ini rawan terjadi bugs. Bugs yang sering 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 bugs seperti itu ya sob.

#2. Sticky Widget Yang Dapat Berhenti Di Bagian Footer

Sesuai dengan namanya ya sob, sticky widget jenis ini dapat berhenti pada footer blog kamu. Sticky widget seperti ini pasti terletak pada bagian sidebar blog. Dalam pemasangan sticky widget ini sangatlah sedikit rumit, maka dari itu saya akan membahasnya dalam postingan lainnya ya sob.

Cara Memasang Sticky Pada Widget Tertentu

Ada hal yang harus kamu perhatikan sebelum memasang sticky widget ini ya sob,

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

#Kedua
Pada widget yang dipasang sticky ukurannya tidak terlalu tinggi, jika kamu terlalu tinggi, hal tersebut dapat memicu menimbulkan bugs seperti apa yang mimin jelaskan diatas tadi. Untuk itu ukuran tinggi maksimal yang mimin rekomendasikan adalah dibawah 480px, karena diatas ukuran tersebut sudah banyak terjadi bugs.

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 Code ID dari widget yang akan kamu jadikan sticky.

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

Tips Memasang Sticky Widget 

Nah, Untuk sticky widget jenis ini mimin sarankan dipakai untuk widget yang memiliki ukuran tidak terlalu tinggi ya sob, seperti iklan adsense yang berukuran 350 x 300, atau clouds label, atau widget profil blog kamu.

Ini perlu diperhatikan Jjangan memasang sticky untuk iklan adsense yang berukuran 350 x 620, hal tersebut dapat mengakibatkan bugs, dan jangan memasang sticky ini untuk popular postingan, hal tersebut juga dapat mengakibatkan bugs sehingga menjadi berat.

Pada intinya inti, sticky widget jenis ini hanya cocok untuk widget dengan ukuran yang sedang atau tidak terlalu tinggi, dan tidak mimin sarankan untuk widget yang berukuran lebih dari 600px.

Sekian tutorial dulu ya Cara Membuat Sticky Widget Yang SEO Friendly dari saya, semoga sedikit yang mimin sampaikan tersebut dapat bermanfaat bagi kamu dan semua orang, oh ya jangan lupa ya kunjung ke masrizky.web.id pastinya mimin akan membuat artikel tentang blogger yang menarik lainnya, akhir kata, cukup sekian dan terima kasih. Happy blogging, suksess selalu:)