Membuat Widget Sidebar Melayang di Blogger
Widget Sidebar adalah widget yang terdapat di sisi kiri dan di sebelah kanan blog. Widget ini biasanya digunakan untuk menempatkan Widget Popular Post, Recent Post, Artikel Unggulan dll. Tujuannya adalah supaya pengunjung blog bisa dengan mudah mengakses menu atau postingan yang ada di blog sehingga pengunjung blog betah berlama-lama di berada di blog.
 |
| Widget melayang di blog |
Tapi kebanyakan yang menjadi permasalahan yaitu, ketika artikel yang dibaca oleh pengunjung adalah artikel yang panjang. Sehingga ketika pengunjung melakukan scroll ke bawah maka otomatis widget yang ada disebelah kanan atau kiri akan bergulir keatas mengikuti scroll dan hilang dari pandangan.
Hal ini tentu saja menyebabkan pengunjung kesusahan untuk mengakses artikel yang ada dan efeknya mereka akan segera meninggalkan blog kita.Tentu saja pemilik blog merasa rugi hanya karena widget yang hilang dari pandangan.
Lalu bagaimana caranya supaya widget yang ada tersebut tetap berada di sebelah kanan dan kiri postingan meskipun di scroll ke atas maupun ke bawah. Caranya cukup mudah dan sudah banyak sahabat-sahabat yang membuat postingan tentang Cara menempatkan Widget sidebar melayang di kiri dan kanan blog.
Namun, tidak semua cara-cara tersebut bisa berhasil. penyebabnya adalah karena template/themes blog yang digunakan berbeda. Cara tersebut mungkin berhasil di beberapa model template, tapi malah tidak ada pengaruh di model template lain.
Begitupun dengan template yang ada di blog ini, sudah banyak cara yang dicoba tapi tidak ada yang berhasil alias gagal. Sempat ingin berganti template juga, tapi khawatir nanti jika mengganti template akan berpengaruh pada performa blog.
Setelah mencari kesana kemari disertai dengan sesajen yang memadai dan otak atik sana sini. Akhirnya menemukan formula yang cocok dan sangat simple. Simak caranya dibawah :
Cara Membuat Widget Melayang di Sisi Kiri atau Sisi Kanan Blog
Widget melayang ini biasa juga disebut dengan widget sticky atau widget menempel, sebelum kita mulai langkah-langkahnya terlebih dahulu silahkan lihat widget melayang sebelah kanan berikut : DEMO
- Buka blog
- Pilih Template
- Klik edit html
- Kemudian cari kode : </body>, biasanya ada dibagian paling bawah atau bagian penutup
- Copy Paste kan kode berikut di atas </body> tersebut :
function bs_makeSticky(elem) {
var bs_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
var width = bs_sticky.offsetWidth;
var iniClass = bs_sticky.className + ' bs_sticky';
window.addEventListener('scroll', bs_sticking, false);
function bs_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
bs_sticky.className = iniClass + ' bs_sticking';
bs_sticky.style.width = width + "px";
} else {
bs_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.bs_sticking {position:fixed; top:0; z-index:9999;}
</style></b:if>
<!-- Widget sidebar melayang Selesai-->
- Perhatikan kode yang diberi warna :
- Merah : Kode supaya widget tidak ikut melayang ketika blog akses melalui telepon seluler
- Biru : Ganti kode tersebut dengan ID Widget yang akan dibuat melayang
- Agar hasilnya maksimal, usahakan untuk menempatkan widget sidebar tersebut di bagian paling bawah sidebar.
- Simpan template.
- Kemudian buka blog dan lihat hasilnya
Tapi sekali lagi, cara ini belum tentu berhasil di setiap template. Jika gagal cobalah untuk menggunakan cara-cara yang lain yang dibagikan oleh sahabat-sahabat blogger.
Selanjutnya, jika sahabat blogger sudah mempunyai akun adsense dan ingin menampilkan Iklan Adsense di sebelah kanan dan kiri seperti yang ada di blog ini. Baca caranya disini: Membuat Iklan Adsense Melayang Sticky di Kiri dan Kanan Blog
Demikian sedikit cara membuat widget melayang di sebelah postingan blog. Mudah-mudahan berhasil buat sahabat-sahabat yang akan mencoba. Jika ada kendala atau tambahan silahkan tulis di kolom komentar.
Semoga bermanfaat...!!!