Hmmm...rasa-rasanya sudah cukup lama saya tidak menuliskan sesuatu di blog ini. Yah, mohon maklum, karena rutinitas sebagai seorang freelancer sekaligus jobseeker, membuat saya sejenak vakum dari blog ini (ceileh). Namun, mumpung hari ini sedang tidak ada deadline maupun jadwal wawancara kerja, dan juga ada sedikit bahan untuk ditulis, maka saya menyempatkan waktu untuk mengupdate artikel di blog ini.

Oke, jadi, pada kesempatan kali ini, saya mengupdate artikel di blog ini dengan topik, yaitu tutorial “Cara Membuat Sticky Sidebar di Blog Menggunakan CSS” tanpa javascript. Bagi kamu yang seorang blogger dan mungkin sedang ingin mencustom atau mempercantik tampilan blogmu, saya rasa tutorial kali ini akan dapat membantu keinginanmu tersebut.

Oh, iya, ngomong-ngomong soal “Sticky Sidebar”, sebenarnya apa sih itu? Mungkin di antara kamu ada yang bingung dengan istilah tersebut. Oke, saya jelaskan secara singkat ya. Sticky Sidebar adalah elemen sidebar dalam sebuah template blog yang memiliki posisi tetap (statis) ketika suatu halaman blog atau web sedang discroll (diarahkan) ke bawah. Jadi, dengan membuat sticky sidebar ini, nantinya widget blogmu yang terpasang di elemen sidebar akan memiliki posisi yang tetap dan mengikuti arah scroll. Untuk gambaran lebih jelasnya mengenai sticky sidebar, dapat kamu lihat dengan menekan tombol “Result” di bawah ini.

• Result

Baik, tanpa perlu basa-basi lagi, mari simak tutorial cara pembuatannya yang mudah dan singkat di bawah ini. 

Cara Membuat Sticky Sidebar di Blog Menggunakan CSS

1. Langkah pertama, copy kode di bawah ini.

position: -webkit-sticky;
position: sticky;
top: 10px;

2. Kemudian, letakkan atau pastekan kode tersebut ke dalam elemen sidebar blogmu.

Contoh pemasangannya adalah seperti berikut ini:

#sidebar-wrapper {
width: 100%;
max-width: 300px;
padding: 20px 5px 5px 5px;
float: right;
margin: 0 auto;
position: -webkit-sticky;
position: sticky;
top: 10px;
}

3. Nah, setelah itu, jangan lupa simpan perubahan yang telah kamu terapkan di template blogmu. Lalu lihat hasilnya.

Mudah, bukan? Hehehe...

Oke, sekiranya itu tutorial yang dapat saya bagikan kali ini. Jika kamu memiliki saran atau pertanyaan yang terkait dengan artikel tutorial ini, kamu dapat menyampaikannya dengan menuliskannya di kolom komentar blog ini dengan menekan tombol “Load Comments” yang terletak di bawah artikel ini. Semoga bermanfaat, ya!