Tutorial Cara Membuat Sticky Sidebar (Sidebar Mengikuti Arah Scroll) Pada Blog

Juni 29, 2025

Memiliki tampilan blog yang profesional dan mudah dinavigasi merupakan salah satu faktor penting dalam meningkatkan pengalaman pembaca, salah satu elemen desain yang sering digunakan oleh para blogger untuk menunjang kemudahan navigasi adalah sticky sidebar, fitur ini memungkinkan elemen-elemen seperti Popular Post, Recent Post, Arsip, atau Daftar Label tetap terlihat dan mengikuti gerakan scroll pembaca ke bawah.

Dalam artikel ini, kita akan membahas secara lengkap dan rinci mengenai apa itu sticky sidebar, mengapa penting digunakan, serta bagaimana cara memasangnya di platform Blogger (Blogspot), artikel ini sangat cocok bagi kamu yang ingin meningkatkan interaksi pembaca serta waktu kunjungan di blog kamu.

Apa Itu Sticky Sidebar?

Sticky Sidebar adalah sebuah fitur pada layout blog di mana elemen sidebar akan tetap berada di posisi yang terlihat di layar meskipun pengguna melakukan scroll ke bawah, dengan kata lain, sidebar menjadi "lengket" atau sticky, mengikuti pergerakan halaman secara vertikal.

Biasanya, fitur ini diterapkan pada bagian sidebar kanan (atau kiri tergantung desain blog) yang menampilkan widget seperti Artikel Terpopuler, Postingan Terbaru, Kategori, Iklan, hingga Formulir Berlangganan.

Tutorial :

Pada langkah pertama ini, pastikan kamu telah login pada akun blogger milikmu terlebih dahulu.
Nah disini bukalah menu "Tema" lalu disini click symbol segitiga mengarah kebawah tersebut.
Lalu disini pilih "Edit HTML".
Nah kamu sekarang berada pada Mode HTML carilah code </body>

Jika sudah kamu temukan maka copy code dibawah ini dan pastekan tepat diatas code </body> :

<script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#sidebar-wrapper').length) {
var el = $('#sidebar-wrapper');
var stickyTop = $('#sidebar-wrapper').offset().top;
var stickyHeight = $('#sidebar-wrapper').height();
$(window).scroll(function() {
var limit = $('#footer-wrapper').offset().top - stickyHeight - 370;
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
el.css({
position: 'fixed',
top: 20,
left : 835,
width :300
});
} else {
el.css('position', 'static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script>

Nah jika sudah maka simpan templatenya dengan cara click tombol dengan symbol disket yang aku tandai kotak warna biru tersebut.
Nah jika sudah maka sekarang kamu bisa melihat efeknya, jadi ketika kamu scroll, menu sidebar samping tersebut akan mengikuti scrollmu.
Oh iya, jika tiba-tiba ketika kamu pasang, dan tiba-tiba menjadi besar atau kecil pada sidebar samping milikmu, ganti angka 300 yang aku tandai warna biru tersebut sesuai dengan ukuran sidebarmu, kira-kira saja, semakin besar angkanya semakin besar kotak sidebarnya, jika semakin kecil angkanya maka semakin kecil kotak sidebarnya.
Jika sudebar milikmu ketika di scroll malah menjadi disamping kiri sekali atau disamping kanan sekali, kamu bisa ganti angka 835 yang aku tandai warna hijau tersebut, semakin besar angkanya maka semakin kekanan, semakin kecil angkanya maka semakin kekiri.
Dan ganti juga angka 370 tersebut sesuai dengan sidebar yang mencapai footer agar tidak lebih dan tidak bertabrakan.
Oh iya untuk versi mobile, mungkin kamu harus menonaktifkan sidebar yang sudah terpasang sticky sidebar, disini pastikan kamu mengkopy code dibawah ini dan pastekan tepat diatas code </style> (jika template mu ada) atau tepat diatas code ]]></b:skin> dan kalau tidak bisa juga, maka tempatkan code dibawah ini diatas code <head> dan berikan code dibawah ini sebuah code pembuka <style> dan penutup </style> diawal code dan diakhir codenya (click code dibawah 2x untuk mencopy codenya) :
```
#Sidebar-wrapper{width:100%;max-width:320px}
@media only screen and (min-width:260px) and (max-width:989px){ #sidebar-wrapper{display: none!important;}}
#Sidebar-wrapper{width:100%;max-width:768px}
@media only screen and (min-width:260px) and (max-width:989px){ #sidebar-wrapper{display: none!important;}}
```
Nah jika sudah maka simpan kembali dengan mengeclick tombol berlogo disket tersebut.
Jika sudah maka enjoy

Dengan memasang sticky sidebar di Blogger, kamu dapat meningkatkan kualitas tampilan blog sekaligus meningkatkan interaksi pengunjung terhadap konten yang kamu sajikan, tidak hanya menambah kenyamanan dalam navigasi, fitur ini juga terbukti meningkatkan visibilitas widget-widget penting yang kamu tampilkan.

Jika kamu serius dalam mengembangkan blog, penggunaan sticky sidebar adalah salah satu langkah kecil yang bisa memberikan dampak besar dalam jangka panjang. Jangan lupa untuk selalu menguji tampilan blog kamu di berbagai perangkat, baik desktop maupun mobile, untuk memastikan sticky sidebar berfungsi optimal.