Cara Membuat Widget Sticky di Sidebar Blog

Cara Membuat Widget Sticky di Sidebar Blog, Cara Membuat Widget Sticky di Menu Navigasi Blog, Cara Membuat Widget Sticky di Blog, Membuat Sticky di blog dengan mudah.



Halo sobat Blog Krizeer,
di hari yang cukup cerah ini namun ujan, sekarang-sekarang ini saya
mohon maaf jarang update, karena saya suka main games. Kali ini saya
akan membahas Cara Membuat Widget Sticky di Sidebar Blog,
sebetulnya widget sticky ini tidak hanya bisa digunakan di sidebar
saja, tapi di ID manapun bisa, contohnya di menu navigasi. Mungkin sobat
sudah mengetahui tujuan saya kali ini. Widget Sticky fungsinya ketika layar di scroll kebawah, widget tersebut akan menempel atau melayang di atas, meskipun di scroll kebawah.

• Demo widget sticky yang di sidebar, klik disini (coba scroll kebawah dan lihat iklan teks yang di sidebar menempel di atas).


• Demo widget sticky yang di menu navigasi, klik disini (coba scroll kebawah dan lihat menu navigasinya menempel di atas).

Berikut langkah-langkah membuat Widget Sticky di Sidebar :

1. Login ke Blogger

2. Dashboar > Klik Template > Edit HTML

3. Tambahkan kode dibawah ini di atas </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

4. Tambahkan kode CSS di bawah ini di atas ]]></b:skin>

.sticky {

position:fixed;

top:5px;/* jarak dari atas*/

z-index: 100;

}

5. Letakan kode java script dibawah ini di atas </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>

6. Simpan Template



Tips :

Ganti #HTML1 dengan ID widget yang akan dibuat sticky. ID #HTML1 itu bukan hanya berupa ID, Class pun juga bisa.

Source : http://ahmadsuyadi.blogspot.com/2013/11/cara-membuat-widget-sticky-di-sidebar.html