Halo sobat Blog Krizeer, di hari yang cukup cerah ini namun ujan, sekarang-sekarang ini saya mohon maaf jarang update, karena saya suka main games. Kali ini saya akan membahas Cara Membuat Widget Sticky di Sidebar Blog, sebetulnya widget sticky ini tidak hanya bisa digunakan di sidebar saja, tapi di ID manapun bisa, contohnya di menu navigasi. Mungkin sobat sudah mengetahui tujuan saya kali ini. Widget Sticky fungsinya ketika layar di scroll kebawah, widget tersebut akan menempel atau melayang di atas, meskipun di scroll kebawah.
- Demo widget sticky yang di sidebar, klik disini (coba scroll kebawah dan lihat iklan teks yang di sidebar menempel di atas).
- Demo widget sticky yang di menu navigasi, klik disini (coba scroll kebawah dan lihat menu navigasinya menempel di atas).
1. Login ke Blogger
2. Dashboar > Klik Template > Edit HTML
3. Tambahkan kode dibawah ini di atas </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>4. Tambahkan kode CSS di bawah ini di atas ]]></b:skin>
.sticky {5. Letakan kode java script dibawah ini di atas </body>
position:fixed;
top:5px;/* jarak dari atas*/
z-index: 100;
}
<script type='text/javascript'>6. Simpan Template
$(document).ready(function() {
var stickyWidgetTop = $('#HTML1').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#HTML1').addClass('sticky');
} else {
$('#HTML1').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script>
Tips :
Ganti #HTML1 dengan ID widget yang akan dibuat sticky. ID #HTML1 itu bukan hanya berupa ID, Class pun juga bisa.
Source : http://ahmadsuyadi.blogspot.com/2013/11/cara-membuat-widget-sticky-di-sidebar.html
