Cara Membuat Sidebar Blog Jadi Melayang [Float]

Cara Membuat Sidebar Blog Jadi Melayang - Kalo dulu sih idenya dari desain salah satu blog paling terkenal di dunia yakni Lifehacker.Com, namun sayangnya sekarang tidak lagi, so sebagai contoh dan demo dari tutorial kali ini adalah sidebar blog MuhammadZacky.Com ini sendiri.

Tuh kan melayang..., gimana??, tertarik punya website atau weblog pribadi dengan desain agak beda?? silakan ikuti tutorial sederhananya dibawah ini;

1. Paste-kan script library Jquery dibawah ini tepat sebelum kode </head> :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

2. Paste-kan  juga script berikut ini tepat setelah kode diatas :

<script type='text/javascript'> $(function(){var offset=$(&quot;#rsidebar-wrapper&quot;).offset();var topPadding=144;$(window).scroll(function(){if($(window).scrollTop()&gt;offset.top){$(&quot;#rsidebar-wrapper&quot;).stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding})}else{$(&quot;#rsidebar-wrapper&quot;).stop().animate({marginTop:0})}})}); </script> 

3. Save dan selesai, silakan cek hasil kerja sobat...

#keterangan:  yang berwarna merah adalah kode sidebar blog, ada kemungkinan setiap template menggunakan kode bahasa yang berbeda, namun cara penggunaannya tetaplah sama. dan untuk angka yang diblog dengan warna hijau silakan disesuaikan dengan tinggi yang sobat inginkan.

Sekian tutorial sederhana mengenai cara membuat sidebar blog menjadi melayang seperti pada blog ini, semoga bermanfaat, selamat mencoba dan hepi blogging... ;)