Social Icons

Tuesday, April 8, 2014

Cara Membuat Menu dan Widget Melayang Fixed

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.


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;
kode css,id widget&#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 yg blok warna merah dengan kode css dan id widget
6. Simpan template jika sudah selesai. 

Semoga Berhasil.... ^_^

No comments:

Post a Comment

Translate

Follow

 
close