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
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 = $('kode css,id widget');
var start = $(div).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(div).css('position',((p)>start) ? 'fixed' : 'static');
$(div).css('top',((p)>start) ? '0px' : '');
});
});
</SCRIPT>
<SCRIPT>
$(document).ready(function() {
var div = $('kode css,id widget');
var start = $(div).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(div).css('position',((p)>start) ? 'fixed' : 'static');
$(div).css('top',((p)>start) ? '0px' : '');
});
});
</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