 |
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 #PopularPosts1Perhatikan 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>
Kalau kode ini biasaya saya pergunakan untuk iklan google adsense.
BalasHapusSaya dulu pernah menerapkan untuk widget populer post, ya itu terkendalanya adalah jika dilihat dengan layar yang berbeda, hasinya lumayan mengecewakan.
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.
HapusDan dapat dilakukan dengan cara meletakan widget adsense pada posisi paling atas jika ingin mengambil opsi JQuerry (cara kedua)
Keren! Ya JQuerry ini relatif baru karena saya menggunakan Trik JS dari Arlina Terimakasih atas berbaginya
BalasHapusSaya melakukan modifikasi, mulanya mencampur campur trik seperti itu he he he ternyata bekerja.
HapusNice tutorial lah~
BalasHapusbagi sebagian orang mungkin sidebar agak membosankan ya gan,..tapi denagn cara ini sepertinya bisa terlihat lebih menarik apalagi ada efek gifnya
BalasHapusMenarik ya kalau lihat template punya sticky sidebar, bukan cuma headernya aja. Nice, lain kali dicoba.
BalasHapus