Cara membuat menu melayang

Beberapa hari yang lalu saya telah mengulas tentang tata cara membuat blog dengan mudah dan gratis. Namun, untuk membuat tampilan blog kamu lebih keren, kali ini saya akan memberi tahu cara membuat sidebar kamu agar tampilan blog tidak monoton, karena sekarang udah tren di beberapa website yang menggunakan sidebar melayang atau yang biasa di sebut sticky sidebar.

Apa itu sticky sidebar , Nah mungkin kamu pernah mendengar sebelumnya tentang sticky sidebar di artikel blog yang lain.Namun bagi kamu yang belum tau tentang sticky sidebar nanti akan saya jelaskan.

Sticky sidebar adalah dimana tampilan menu sidebar tidak akan ikut terbawa ke atas ketika kita scrool blog ke bawah ketika sedang membaca artikel atau dalam kata lain, sidebar tetap diam meskipun kita scrool ke atas ataupun kebawah.

Lihat contoh gambar di bawah ini :

untuk membuat sticky sidebar atau menu sidebar melayang, yang harus pertama kamu lakukan adalah :
sign in ke blog kamu dulu, kemudian masuk ke bagian template. 
Klik edit html seperti contoh gambar di bawah ini.

kemudian kamu cari kode css ini  ]]></b:skin>

Masukkan kode di bawah ini tepat di atas kode skin tadi. 
Kalau kamu belum menemukannnya, kamu pilih tombol ctrl + F agar mempermudah kamu mencari kode tersebut.

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

Setelah berhasil memasukkan kode tersebut, kamu cari kode </body>.
Caranya sama dengan tadi,tinggal kamu copy kan kode di bawah ini di atas kode </body>.
setelah itu kode #HTML 7 kamu ganti dengan ID widget yang akan kamu jadikan sticky. Sumber : Blog.kangismet.net

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