Cara Membuat Sticky Widget Sidebar melayang di Blog

Sticky menu navigasi adalah sebuah menu website yang dikunci pada tempatnya sehingga tidak hilang ketika pengguna menggulirkan mousenya ke bawah halaman, dengan kata lain dapat diakses dengan mudah karena selalu terlihat. Sticky dalam Bahasa Indonesia artinya menempel. Dalam istilah website Sticky berarti berada di depan atau selalu mengikuti walaupun mouse terus di scroll.

Banyak sekali blog atau website yang menambahkan fungsi navigasi menu ini agar tetap terlihat di bagian atas. Ketika pengguna menggulirkan mouse ke bawah halaman dan bagian atas menu navigasi tetap menempel dan tetap terlihat. Ini bermaksud untuk memudahkan kepada pengunjung dan tidak harus kembali menggerakan mousenya ke bagian atas untuk menjelajahi halaman yang lainnya.

Sticky ini sebenarnya dapat diterapkan untuk elemen lainnya, seperti bagian samping (sidebar), tombol atau media social sharing/like, dan bagian footer. Namun tentu saja cara mengaplikasikannya berbeda-beda.

Dibawah ini penjelasan yang akan saya bagikan untuk anda bagaimana cara membuat Sticky menu untuk sidebar. Silakan simak baik-baik !

Langkah pertama :

1. Login ke Blogger
2. Klik Template > Edit HTML
3. Tambahkan kode CSS di bawah ini di atas kode ]]></b:skin>

.sticky {
  position:fixed;
  top:10px;/* jarak dari atas*/
  z-index: 100;
}

4. Tambahkan kode JavaScript dibawah ini dan Simpan kode dibawah ini di atas </body>

<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML7').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();  
if (scrollTop > stickyWidgetTop) {
    $('#HTML7').addClass('sticky');
} else {
    $('#HTML7').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
    stickyWidget();
});
});
</script>

Keterangan :
Ganti HTML7 dengan ID widget yang akan dibuat sticky, caranya.

1. Login ke blogger
2. Klik tata letak
3. Kemudian anda pilih widget mana yang akan dibuat sticky menu
4. klik Edit lalu lihat URL nya disitu tertera nomor ID Widget nya
Informasi lebih lengkap silakan lihat gambar dibawah ini

Selamat berkreasi dengan Sticky widget semoga bermanfaat .....

Share on: Facebook Twitter Google+ Linkedin Technorati Digg LintasMe

Related Articles :