Cara Membuat Sticky Widget di Sidebar Blog
07 March 2014
Cara Membuat Sticky Widget di Sidebar Blog - Sekarang jadi jarang update nih gara-gara saya main games terus :D game osu! yang bikin saya jadi jarang ngurusin blog, ok sekarang saya akan membagikan tutorial cara membuat Sticky Widget di Sidebar blog, fungsinya ketika layar di scroll kebawah, widget tersebut akan menempel atau melayang di atas, meskipun di scroll kebawah ok langsung aja ikuti tutorial berikut ini.
[ Demonya bisa sobat lihat di widget Statistik di blog saya... ]
Ikuti tutorial dibawah ini dengan baik :
1. Masuk ke Blogger
2. Dashboard > Klik Template > Edit HTML
3. Tambahkan kode dibawah ini diatas </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 {
position:fixed;
top:5px;/* jarak dari atas*/
z-index: 100;
}
5. Letakan kode Javascript dibawah ini di atas </body>
<script type='text/javascript'>
$(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>
6. Simpan TemplateTips :
Ganti #HTML1 dengan ID widget yang akan dibuat sticky. ID #HTML1 itu bukan hanya berupa ID, Class pun juga bisa.
Source : http://blogkrizeer.blogspot.com/2013/11/cara-membuat-widget-sticky-di-sidebar.html
Jangan Lupa Share Tutorial ini yaa...