Membuat Widget Sticky Di Blog


Membuat Widget Sticky - Sebelum itu saya akan menjelaskan dulu apa itu Widget Sticky yaitu widget yang bila di scroll kebawah maka widget yang di beri efek sticky akan mengikuti gerak scroll. Itu sekilas tetang Sticky, Oh ya sampai lupa mengapa saya baru membuat tutorial ini pada dah banyak yang sudah membuat tutorial ini, Karna masih banyak sahabat yang membuat tutorial ini yang sulit di pahami oleh para sobat yang baru bergelut di dunia blogging ini.dengan saya membuat tutorial yang mudah di pahami oleh sobat semuanya. Oke mari ikuti tutorial di bawah ini yang telah saya buat.

Berikut Cara Mebuat Widget Sticky
1. Masuk ke blogger
2. Masuk ke menu Template - Edit HTML
3. Cari kode ]]></b:skin> atau </style> dan copy kode di bawah ini tepat di atas nya

/* CSS Sticky */
.sticky {
position:fixed;
top:10px;/* jarak dari atas*/
z-index: 100;
}
4. Cari kode </body> dan copy kode di bawah ini tepat di atas nya

<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>

4. Simpan Template

NB : Untuk Mengetahui ID Widget bisa di lihat pada gambar di bawah ini pada panah merah


 Semoga tutorial ini Bermanfaat buat pengunjung Lubang Pengetahuan ......
Jangan lupa donasi komentar ya.......
Previous
Next Post »

6 komentar

Click here for komentar
Unknown
admin
December 12, 2014 at 5:05 AM

ouhhh Begini ya SObat, Oke Deh Saya Coba Dulu gan, Dan Semoga Saja Berhasil.
Salam Blogger

Reply
avatar
Unknown
admin
December 12, 2014 at 5:47 AM

apakah ini tidak memberatkan kualitas blog gan? nice share boleh di coba kl tidak pengaruh gan :)

Reply
avatar
memek
admin
December 12, 2014 at 8:33 AM

keknya menarik nih om, boleh cobalah xD

Reply
avatar
Unknown
admin
December 12, 2014 at 9:56 PM

mantap gan pasti saya Coba :D

Reply
avatar
Unknown
admin
December 14, 2014 at 8:31 PM

ini yang saya cari coba pasang dulu

Reply
avatar
Penitishop
admin
January 17, 2015 at 8:59 AM

ane coba dulu gan, jangan lupa kunjungan baliknya

Reply
avatar
Thanks for your comment