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

Putuokane Mei 12, 2024

Jika kamu memiliki sebuah blog, mungkin kamu dapat menggunakan fitur sticky sidebar, nah fitur sticky sidebar ini membuat menu bagian samping pada blog milikmu sepertu popular post, recent post, daftar label dan sebagainya dapat mengikuti secara otomatis ketika kamu melakukan scroll kebawah.

Sticky Sidebar biasanya sangat bagus dipasang oleh blogger yang ingin menu samping mereka dapat dilihat oleh para pembaca dan diclick.

Nah langsung saja untuk tahap pemasangannya akan aku berikan langkah demi langkah dibawah ini, simak baik-baik.

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> (click code dibawah 2x untuk mencopy codenya) :

<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

Nah mungkin itu saja tutorial simpel dari aku bagaimana caranya untuk membuat sticky sidebar pada blog milikmu, oh iya tidak lupa juga tuoka20 berterimakasih untuk kang asep selaku pemilik blog romeltea, karena dari sanalah aku mendapatkan code diatas dan aku perbaiki khsusus untuk blog agar cocok.