Cara membuat widget sidebar fixed blogger hanya dengan CSS

"Fixed" tentu saja berbeda dengan "Sticky", misalnya popular posts editblogtema sekarang ini menggunakan "Sticky" popular posts lengket di sidebar kanannya yakni pada saat konten atau postingan blog di scroll baik keatas maupun kebawah popular post mengikuti dan lalu berhenti pada batas tertentu.

Sedangkan fixed berarti tetap berada di sidebar pada saat postingan atau konten blog di scroll baik keatas maupun kebawah. Tentu saja kedua teknik memiliki baik kekurangan maupun kelebihan masing masing, mari kita lihat:

• Sticky. Memiliki keuntungan karena popular post atau gadget mengikuti dan bisa berhenti pada titik tertentu. Jumlah gagdet popular post yang ditampilkan juga tidak terbatas mau berapa, seluruhnya bisa ditampilkan dengan cara di scroll. Kelemahan: Mengharuskan pemasangan JavaScript, sedangkan JavaScript cukup merugikan kecepatan loading blog. Tidak setiap template bisa bekerja dengan mudah  melalui hal tersebut.
• Fixed. Hanya memanfaatkan aba aba CSS yang ringan. Item tetap berada ditempat dan tidak bergerak pada saat konten atau postingan blog di scroll baik ke atas maupun ke bawah. Kelemahan: Tidak semua jumlah postingan dapat ditampilkan, sebaiknya jika memasang popular post dengan trik Fixed ini hilangkan saja thumbnail popular posts pada pengaturan widget/Gadget blogspot, kalau pakai gambar sebaiknya tampilkan gadget atau popular post tidak lebih 3 saja jumlahnya. (saya sedang membuat perintah CSS agar fungsi fixed CSS ini sama dengan sticky yang menggunakan JavaScript)
• Keduanya memiliki kelemahan yang sama: Sama sama hanya bisa tampil pada tampilan laptop dan desktop, dan tidak bisa tampil pada layar hape responsive

Tambahkan CSS

Jika sobat memang bermaksud membuat menu side bar menjadi "fixed" tidak perlu menambahkan HTML dan JavaScript, cukup optimalkan elemen yang telah ada.

Caranya tentu saja terlebih dahulu masuk kepengaturan blogger:

1. Setelah masuk kepengaturan blogger pilih Tema atau Theme
2. Lalu pilih Edit HTML dan menambahkan kode CSS dibawah ini diatas kode </head>:

<style>
#PopularPosts1{
position: fixed; 
max-width:320px;
 @media screen and (max-width: 800px) 
@media screen and (max-width: 600px)
@media screen and (max-width: 400px) {
  @media screen and (max-width: 320px) {
  }</style>

Peringatan! Cara ini tidak cocok di terapkan ke dalam template blogger karena fixed tidak sama dengan sticky. Ini hanya buat percobaan belaka.

Save Template.

Lihat DEMO

Kode ini masih sedang saya perbaiki agar berfungsi lebih mirip dengan "Sticky"
Hanya saja jika menampilkan popular posts dengan thumbnail gambar lebih baik jangan melebihi 3 itam ya...bukan apa apa, gak akan ditampilin semuanya. Disatu sisi ini cukup menguntungkan kecepatan loading blog. Sebagian trik ini berlaku untuk template klasik yang lebih tua dan tidak bekerja pada template terbaru yaitu pada bagian CSS untuk merobah tampilan popular postnya.
www.editblogtema.net