Sidebar Blogger Auto Statis Menyesuaikan Posisi Otomatis

Cara mudah edit sidebar menjadi sidebar Blogger auto statis. Agar menyesuaikan posisi secara otomatis. Cara ini hanya melakukan penambahan sedikit CSS, dan dapat diterapkan di berbagai template. Sidebar akan tetap terlihat walau halaman digulung sampai ke bawah, dan tidak lagi memberikan ruang kosong di sisi samping. Sticky sidebar.

 

Sebenarnya ini bukan khusus Blogger saja. Edit sidebar auto statis bisa untuk berbagai theme dan template. Kami membatasi pada catatan kali ini sekadar untuk membuatnya lebih fokus.

Kita mungkin sudah tahu cara memposisikan sidebar secara dinamik dan statik. Dimana yang satu membuat sidebar diam meski halaman digulung hingga ke bawah. Sementara yang lain membuat sidebar ikut bergerak dengan scroll.

Bila membuat sidebar tetap di posisinya Anda akan menemukan kekurangan pada sidebar panjang atau yang memilliki widget cukup banyak. Sebagian widget di sidebar tidak dapat ditampilkan.

Ini membuat Anda harus membatasi jumlah dan panjang ke bawah untuk sidebar.

Sementara bila Anda menetapkan sidebar untuk ikut bergerak ketika melakukan scroll maka satu kekurangan juga akan ditemukan. Untuk halaman yang memiliki konten/post cukup panjang maka akan menemukan ruang kosong cukup besar di posisi sidebar.

Ketika seluruh widget sidebar telah bergerak ke atas, ruang kosong pada sidebar membuat halaman terlihat hampa dengan kekosongannya.

Beberapa dari kita akan menentukan salah satunya dan menyesuaikan. Namun sebenarnya ada cara mudah untuk mengatasi ini dengan membuat gabungan kedua cara itu dengan sidebar Blogger auto statis guna menutupi kekurangan masing-masingnya.

Sticky sidebar blogger

Css sticky untuk position bisa dibilang hybrid dari rule position fixed dan relatif.

 

Sidebar Blogger auto statis akan tetap terlihat walau halaman digulung sampai ke bawah, dan tidak lagi memberikan ruang kosong di sisi samping.

Anda juga tidak perlu khawatir untuk sidebar yang cukup panjang atau memiliki widget yang banyak di sana. Karena sidebar Blogger auto statis akan menyesuaikan Bagian bawah menjadi rata.

Bentuk dasar pengkodean sidebar Blogger auto statis akan seperti ini

 

#sidebar_id {

position: sticky;

top: -NNpx;

}

 

Hasilnya membuat sidebar Blogger auto statis ikut bergulung dengan halaman, namun hanya sampai batas nilai top yang kita tentukan dengan nilai negatif. Sidebar akan menjadi static pada batas nilai tersebut.

Akan terjadi kondisi statis sementara.

Sidebar Blogger auto statis diam meski halaman digulung. Kondisi ini dengan batasan tertentu pula, sidebar akan dengan otomatis menyesuikan, dia akan kembali dinamis, ikut bergulung untuk menyamaratakan bagian bawah sidebar dengan bagian bawah post body.

Bagaimana menerapkan sticky sidebar Blogger auto statis pada Blogger?

 

Anda perlu mengetahui element id sidebar. Lakukan inspeksi halaman.

Misal:

id=’secondary’

Jika element id sidebar sudah didapat silahkan terapkan rule CSS untuknya.

Misal:

#secondary {

position: sticky;

top: -300px;

}

Silahkan lihat tampilan halaman dan coba untuk melakukan scroll, bila berhasil Anda akan mendapatkan efek sticky tersebut.

Dalam beberapa kondisi, mungkin nilai untuk top yang kami berikan tidak sesuai untuk Anda. Silahkan rubah nilai top, namun tidak lebih besar dari 0 (top ≤ 0).

*Catatan penting:

Nilai top dalam minus akan menjadi batas dinamika pertama, semakin minus nilainya semakin jauh ke bawah sebelum sidebar menjadi statis. Bila ditetapkan dengan nilai 0 untuk top maka sidebar akan menjadi statik segera ketika menyentuh bagian atas screen view.

Ideal untuk nilai top adalah seukuran vertikal (total height) widget-widget atas, sebelum widget unggulan Anda.

Pastikan parent element untuk sidebar (biasanya primary) tidak menerapkan  ‘ overflow: hidden; ‘. Ini membuat browser mengabaikan ‘position: sticky; ‘ Silakan rubah menjadi ‘ overflow: visible; ‘.

 

Semoga cara membuat sidebar menjadi sidebar Blogger auto statis ini dapat membantu. Silahkan ajukan pertanyaan untuk berbagai kendala. Kami juga menawarkan jasa edit untuk melakukannya.



BIla catatan merupakan artikel panjang, silahkan menggunakan menu paginasi halaman yang tersedia di bagian bawah kolom text reader ini guna mengakses part selanjutnya




2 Balasan kepada “Sidebar Blogger Auto Statis Menyesuaikan Posisi Otomatis”

  1. Thanks for one’s marvelous posting! I quite enjoyed reading it, you can be a great author.I will be
    sure to bookmark your blog and will come back sometime
    soon. I want to encourage that you continue your great work, have a nice afternoon! ***

  2. Greate article. Keep writing such kind of info on your blog.
    Im really impressed by your blog.
    Hello there, You’ve performed a fantastic job.
    I will definitely digg it and individually recommend to my friends.
    I am sure they will be benefited from this website. ***


Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *