Beranda
blogger
solusi

CARA STICKY SIDEBAR BLOG DENGAN ANIMASI KEREN

Baru!!! sidebar sticky ini berbeda, percayalah sangat keren! Terutama karena efek animasinya yang cool. Sticky side bar ini sangat pas untuk diterapkan ke template blogspot yang memiliki sidebar
sticky sidebar dengan animasi
Sticky alias lengket di terapkan untuk widget sidebar
Saya sangat tertarik dengan beberapa teknik membuat sidebar pada blog menjadi "sticky" alias nampak lengket kaya sedikit ada karetnya, lihat saja percobaan yang saya terapkan pada template buatan saya ini. Template ini adalah template sederhana yang telah saya modifikasi penuh menjadi lebih responsive dan mobile friendly.

1.Jika menggunakan CSS

Sobat bisa menggunakan CSS untuk membuat widget/gadget (misalnya popular posts)  pada sidebar blog menjadi "diam dan tetap berada ditempat" walau konten utama blog sedang discroll naik dan turun, contohnya:
<style>#page-wrap { width: 600px; margin: 15px auto; position: relative; } #sidebar { width: 190px; position: fixed; margin-left: 410px; }</style>
Letakan kode diatas </head> Kuncinya adalah pada aba aba pengaturan "fixed". Saya menggunakannya karena selama satu hari trik ini ringan alias tidak memberatkan loading tapi sayang fix ini kurang bagus pada tampilan mobile (hape) dan layar yang lebih kecil. Lagipula setiap layar memiliki dimensi yang berbeda dalam menampilkan bagian bagian dari image yang telah kita buat. Jika menggunakan kompi lawas susunan widget yang tersusun dari atas kebawah seperti popular posts akan terlihat lebih banyak.

Namun sebaliknya jika menggunakan layar kompi terbaru dengan dimensi ratio 16:9, sebagian widget akan tersembunyi.

2. Jika menggunakan JQuery

Nah karena hal tersebutlah saya akhirnya memilih trik JQuery, yakni memanfaatkan JavaScript untuk pembuatannya, elemen ini dapat diterapkan pada wordpress, untuk blogspot kodenya dapat sobat letakan diatas kode </body> dengan menambahkan tag pembuka <script> dan menutupnya dengan </script>:
<script>$(function() { var $sidebar = $("#sidebar"), $window = $(window), offset = $sidebar.offset(), topPadding = 70; $window.scroll(function() { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } }); });</script>
Perhatikan kode yang saya merahkan, kode tersebut dapat sobat ganti dengan #PopularPosts1 atau widget lainnya. Tidak ada perbedaan dengan cara lain yang mungkin pernah sobat cobakan, tetapi cara ini memiliki kelebihan yakni efek animasinya. Sidebarnya seolah lengket dan ada karetnya, he he he...Cobalah!

Tidak mengganggu posisi iklan

Cara kedua diatas (dengan JQuerry) tidak akan mengganggu penempatan iklan. Bahkan menurut saya iklan jadi terlihat "sopan" karna tidak akan kentara. Cara penempatan Iklan Adsennya adalah diatas posisi PopularPosts (Jika sobat mengganti #sidebar dengan #PopularPosts1 

 Perhatikan sidebar editblogtema ini: Anggaplah "tentang saya" sebagai widget iklan adsense, saya pasti akan menempatkannya diatas "Popularposts"

Trik ini saya buat setelah beberapa kali melakukan percobaan, beberapa keluhan penggunaan sticky sidebar biasanya adalah penempatan iklan terganggu, bisa tersembunyi sebagian bisa keseluruhan pada ukuran layar tertentu. Tetapi hal ini tidak akan terjadi pada sticky sidebar yang saya pergunakan ini, sifatnya yang "karet' atau pegas itu membuatnya dapat menampilkan sekalipun selusin widget ditempatkan pada sidebar.

Kecuali jika sobat ingin iklannya terus ter"ekspos" di sidebar secara fixed silahkan menggunakan trik penempatan CSS (cara pertama) yakni dengan cara menempatkan kodenya pada bagian tag <head> atau diatas </head>
https://www.tiktok.com/@editvlogtema

7 komentar

  1. Kalau kode ini biasaya saya pergunakan untuk iklan google adsense.
    Saya dulu pernah menerapkan untuk widget populer post, ya itu terkendalanya adalah jika dilihat dengan layar yang berbeda, hasinya lumayan mengecewakan.
    1. Jangan kuatir yang ini beda, saya sendiri memperbaikinya dengn Jquerry. Ini tentang sidebar secara keseluruhan. Seluruh widget akan ikut ditampilkan ketika konten di scroll atau ditarik keatas dan kebawah. Namun jika ingin widget tertentu "ID-HTML" atau ID-Adsense yang lebih dominan dan tetap berada disidebar saat konten dibuka dan si scroll, bisa menggunakan opsi CSS "fixed" yakni cara pertama.

      Dan dapat dilakukan dengan cara meletakan widget adsense pada posisi paling atas jika ingin mengambil opsi JQuerry (cara kedua)
  2. Keren! Ya JQuerry ini relatif baru karena saya menggunakan Trik JS dari Arlina Terimakasih atas berbaginya
    1. Saya melakukan modifikasi, mulanya mencampur campur trik seperti itu he he he ternyata bekerja.
  3. Nice tutorial lah~
  4. bagi sebagian orang mungkin sidebar agak membosankan ya gan,..tapi denagn cara ini sepertinya bisa terlihat lebih menarik apalagi ada efek gifnya
  5. Menarik ya kalau lihat template punya sticky sidebar, bukan cuma headernya aja. Nice, lain kali dicoba.
Silahkan berkomentar sesuai dengan topik kita ya...
editbloginfo © ‧ EDITBLOGTEMA. Developed by Jago Desain