Breaking

Sunday, April 29, 2018

Cara Membuat Widget Blog Mengikuti Scroll Turun Ke Bawah

Widget pada blog dapat kita buat berjalan mengikuti scroll turun ke bawah, ini akan membuat blog Anda menjadi lebih variatif karena tidak ada kekosongan pada widget jika posting Anda cukup panjang dan widget yang Anda pasang sedikit. Kami sarankan untuk widget yang Anda ingin buat mengikuti scroll turun ke bawah sebaiknya widget diletakkan paling akhir/bawah karena akan menutup widget yang lain jika di scroll ke bawah.


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>
<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 :
Ganti kode ID_Widget dengan ID Widget yang akan kalian gunakan.

6. Kalau sudah klik Simpan template.

Semoga bermanfaat!