Cara membuat sidebar fixed blogger hanya dengan CSS | editblogtema editblogtema: Cara membuat sidebar fixed blogger hanya dengan CSS

Logtema

×
tutorial dan teknik

Cara membuat 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.
gambar template simple buatan editblogtema
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>

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

Bagikan (share):

2 comments:

  1. sticky, tambah kerenlah pokoknya blog pakai kode ini, tapi tetap ringan mas ya

    ReplyDelete
    Replies
    1. sepertinya tidak mempengaruhi loading sama sekali...itu hanya CSS

      Delete

🌐请给我们一个礼貌的评论与任何相关的主题
⚘⚘Kami menghargai semua masukan
👫👫 Namun kami juga menjunjung tinggi kesopanan