Cara Membuat Sticky Widget di Sidebar Blog

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
Mencari ID Widget Sebuah 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

8 Responses to "Cara Membuat Sticky Widget di Sidebar Blog"

  1. keren gan agar blog jadi unik
    visit back

    ReplyDelete
  2. Wah keren gan izin coba ya gan

    ReplyDelete
  3. gan klo pngen masang nav bar sperti di blog ini yg ada notifikasinya gmn??
    boleh minta tutornya ga? mksh

    ReplyDelete
  4. wahaha akhirnya ketemu juga tutor nya ,
    kesusahan nih buat sticky widgetnya , moga2 masih bisa gan tutornya .

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel