Cara Membuat Menu dan Widget Melayang Fixed

Published by Kurnia Septa Minggu, 16 Maret 2014

Membuat salah satu widget melayang atau fixed di blog saat discroll membuat blog menjadi lebih menarik dan mempermudah pengunjung. Pembaca blog tidak perlu menarik scroll untuk kembali melihat menu atau widget utama, pembaca tetap bisa melihatnya.

Sebelum mencoba trik ini, pastikan kamu mengetahui kode CSS dan id widget yang akan dibuat melayang nantinya. Contohkan kode CSS pada widget seperti ini #top-wrapper dan id widget seperti ini #HTML7. Karena setiap template blog berbeda-beda.

Cara Membuat Widget Sidebar Melayang Fixed
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Tekan Ctrl F dan cari kode </body>
4. Letakan kode berikut ini di atasnya

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<SCRIPT>
$(document).ready(function() {
var div = $(&#39;#top-wrapper,HTML7&#39;);
var start = $(div).offset().top;
$.event.add(window, &quot;scroll&quot;, function() {
var p = $(window).scrollTop();
$(div).css(&#39;position&#39;,((p)&gt;start) ? &#39;fixed&#39; : &#39;static&#39;);
$(div).css(&#39;top&#39;,((p)&gt;start) ? &#39;0px&#39; : &#39;&#39;);
});
});
</SCRIPT>

5. Ganti kode warna merah dengan kode css dan id widget
6. Simpan template jika sudah selesai.