Cara Membuat Sticky Widget di Sidebar Blog Dengan Mudah
Bagi sobat yang sudah terbiasa melihat stycky menu navigasi, pastinya akan terlihat keren dan elegan. tengok saja SL Style Magz.
Template SEO killer tersebut sudah mempunyai fitur stycky menu naviagsi. Ketika discrol ke bawah, menu navigasinya akan tetap terlihat dan pastinya masih responsive design.
Namun tips SEO killer kali ini, lebih tepatnya tips design blog, fitur sticky akan disematkan pada sidebar blog. Tidak sekedar membuat blog menjadi semakin menarik, namun dengan keberadaan fitur sticky pada sidebar blog akan membuat pembaca semakin mengetahui secara nyata guna menelusuri secara mudah terhadap blog kita.
Cara Membuat Sticky Widget di Sidebar Blog – Tips SEO Design
<script type=’text/javascript’> //<![CDATA[ $(function() { if ($(‘#sticky-sidebar’).length) { // Ganti “#sticky-sidebar” dengan ID tertentu var el = $(‘#sticky-sidebar‘); var stickyTop = $(‘#sticky-sidebar‘).offset().top; var stickyHeight = $(‘#sticky-sidebar‘).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>
4. Ganti kode yang sudah saya beri warna biru dengan kode yang ID sidebar yang akan dibuat sticky
5. Tambahkan kode di bawah ini di CSS menu:
#sticky-sidebar{width:100%;max-width:300px}@media only screen and (max-width:768px){ #sticky-sidebar{width:100%;max-width:100%} }
6. Save template
Demikian tips SEO design blog kali ini, khususnya Cara Membuat Sticky Widget di Sidebar Blog. Semoga bermanfaat, salam.
Source:
http://www.arlinadzgn.com/2015/12/cara.membuat.sticky.widget.di.sidebar.blog.html
