Cara Membuat Sticky Widget di Sidebar Blog

Cara Membuat Sticky Widget di Sidebar Blog - Sticky Berasal dari Bahasa Inggris Yang Artinya Menempel. Sticky Widget Adalah Kata Yang Sering Terdengar Dalam Istilah Blogger, Namun Masih Banyak Yang Belum Memahami Apa itu Sticky Widget. Sticky Widget adalah Widget Yang di Pasang Di Blog Namun Jika Blog Di Scroll Kebawah maka Widget itu Akan Ikut Kebawah Mengikuti Gerak Scroll. Nah, Pada Kesempatan Kali ini J4rviz Blog Akan Membagikan Tutorial Memasang Sticky Widget di Blog Sobat. Oke Simak dengan Seksama ya....

Cara Pemasangan

Untuk Pemasangan Sticky Widget, Caranya Sangat Mudah yaitu Dengan
1. Pemasangan CSS
2. Pemasangan JavaScript

Pemasangan CSS

1. Login Ke Blogger
2. Masuk Ke Template > Edit HTML
3. Masukan CSS Berikut di atas ]]></b:skin>

.sticky {
position:fixed;
top:10px;/* jarak dari atas*/
z-index: 100;
}

Pemasangan JavaScript

1. Login Ke Blogger
2. Masuk Ke Template > Edit HTML
3. Masukan JavaScript Berikut di atas </body>

<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML7').offset().top; 
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();     
if (scrollTop > stickyWidgetTop) { 
    $('#HTML7').addClass('sticky');
} else {
    $('#HTML7').removeClass('sticky'); 
}
};
stickyWidget();
$(window).scroll(function() {
    stickyWidget();
});
});
</script>

Ganti Tulisan HTML7 Dengan ID Widget Sobat yang akan di Buat Sticky Widget.

Cara Mencari ID Widget

1. Login Ke Blogger
2. Masuk Ke Tata Letak
3. Pilih Widget Yang akan Di buat Sticky Widget dan Klik Edit
4. Lalu Lihat Gambar Berikut Untuk Mencari ID Widget

oke... itulah sedikit Tutorial dari J4rviz Blog...
Semoga Tutorial ini Bermanfaat..
terima kasih sudah berkunjung dan jangan lupa Komen + Follow Blog ini untuk Mengikuti Update terbaru J4rviz Blog

Share this post