Cara Terbaru membuat Widget Melayang saat discroll down

anakforum blog    11:34:00 PM    Ngeblog , Tutorial    Comment   

widget

Cara membuat widget melayang.
fitur dapat membuat sidebar anda tidak terlihat kosong, sehingga halaman blog anda selalu ramai tulisan dan gambar.

berikut langkah langkah yang harus ditempuh

pertama buka blogger, templat, edit HTML
copy dan paste kode berikut sebelum kode ]]></b:skin>

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

selanjutnya copy dan paste kode berikut sebelum kode </body>

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

note : ubah #HTML1 dengan id widget anda, caranya mudah sekali lihat widget di edit HTML ada teks <b:widget id=HTML1 . HTML 1 merupakan id widgetnya

klik save template dan lihat apa yang terjadi

maaf kami tidak menayangkan live demo