Bagai mana si cara memasang sticky yang benar begini lo cara nya, tapi kali ini saya akan memasang widget sticky pada popular post yang terletak di sidebar cara ini cukup menarik.
karena mampu membuat widget popular post melayang meskipun di scroll ke bawah Dan arahan ini cukup responsive dan sudah saya terapkan sendiri di blog saya ini
oke langsung saja kita bahas Cara Membuat Sticky Widget Popular post di Sidebar Blog
Login ke Blogger Pilih > Menu Templat > Edit Html tambahkan arahan di bawah ini sebelum arahan </body>
<script type='text/javascript'> //<![CDATA[ $(function() { if ($('#PopularPosts1').length) { // Ganti "#Postingan-Populer" dengan ID tertentu var el = $('#PopularPosts1'); var stickyTop = $('#PopularPosts1').offset().top; var stickyHeight = $('#PopularPosts1').height(); $(window).scroll(function() { var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper" var windowTop = $(window).scrollTop(); if (stickyTop < windowTop) { el.css({ position: 'fixed', top: 20 // Jarak atau margin sticky dari atas }); } else { el.css('position', 'static'); } if (limit < windowTop) { var diff = limit - windowTop; el.css({ top: diff }); } }); } }); //]]> </script> Coba perhatikan arahan yang di tandai dengan # arahan tersebut sesuai kan dengan id widget popular post
#Popularpost1 : Ganti arahan ini sesuai dengan arahan popular post di templat blog kalian [Setiap tempatl beda beda]Untuk mengatur lebar widget popular post ini anda mampu mengunakan arahan di bawah ini tempatkan arahan dibawah tepat di barisan id popular post
#footer-wrapper : arahan untuk membatasi stick
#PopularPosts1{width:100%;max-width:300px} 
Oke itu beliau cara cara nya untuk membuat nya sebenar nya cukup mudah, namun terkadang bikin bingung alasannya beda templat beda id
Selamat mencoba dan supaya berhasil jikalau ada kendala mampu di tanyakan di kolom komentar ya Terimakasih. Sumber http://jalan-lah.blogspot.com/
Tag :
TIPS NGEBLOG
0 Komentar untuk "Cara Membuat Sticky Widget Popular Post Di Sidebar Blog"