Selamat malam sobat, pada malam hari ini saya akan membagikan sebuah tutorial yaitu Cara Membuat Sticky Widget Di Sidebar Blog. Sebagaimana kita tau Sticky itu mempunyai arti Menempel, kalau dalam artian website atau blog sticky mempunyai arti selalu menempel walaupun mouse kita scroll. Untuk melihat demonya, silahkan scroll ke bawah dan kemudian lihat sidebarnya ada sebuah widget yang terus menempel. Oke langsung simak aja tutorialnya.
Berikut Tutorialnya :
- Masuk Ke Dasbor Blog Sobat,
- Klik Menu Template,
- Klik Menu Edit Template,
- Masukan Kode CSS Dibawah Ini Diatas kode
</style>
.sticky {
height:auto;
position:fixed;
top:26px;/* jarak dari atas*/
z-index: 100;
}- Masukan Javascript Dibawah Ini Diatas kode
</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>
Ganti
#HTML1 dengan ID widget yang akan dibuat sticky.
Semoga Bermanfaat
^_^
