Cara 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.

Cara Membuat Widget melayang 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 :

• Masuk ke Dashboard Blogger
• Pilih Themes atau Template
• Klik Edit HTML
• Kemudian cari kode </body>, biasanya ada dibagian paling bawah atau bagian penutup
Copy Paste kan kode dibawah tepat diatas kode </body>.

<!-- Widget Sidebar Sticky -->
 
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<script type='text/javascript'>
  //<![CDATA[
bs_makeSticky("HTML1");
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>
 <!-- End Sidebar Sticky-->

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, 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 anda sudah mempunyai akun adsense dan ingin menampilkan Iklan Adsense di sebelah kanan dan kiri seperti yang ada di blog ini.

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.