Berikut langkah cara membuat widget blog mengikuti scroll turun ke bawah :
1. Login akun blogger Anda.
2. Pilih menu tab Tema > Edit HTML > letakkan kursor pada area kode HTML.
3. Cari kode (gunakan Ctrl + F), cari kode ]]></b:skin>
4. Kemudian letakkan kode berikut tepat diatas kode ]]></b:skin>
.sticky {
position:fixed;
top:10px;/* jarak dari atas*/
z-index: 100;
}
5. Berikutnya cari kode </body> kemudian letakkan kode berikut diatas kode </body> position:fixed;
top:10px;/* jarak dari atas*/
z-index: 100;
}
<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#ID_Widget').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#ID_Widget ').addClass('sticky');
} else {
$('#ID_Widget ').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script>
Keterangan : $(document).ready(function() {
var stickyWidgetTop = $('#ID_Widget').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#ID_Widget ').addClass('sticky');
} else {
$('#ID_Widget ').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script>
Ganti kode ID_Widget dengan ID Widget yang akan kalian gunakan.
6. Kalau sudah klik Simpan template.
Semoga bermanfaat!