Kali ini saya akan memberikan tutorial mengenai Membuat Widget Melayang Ketika di Scroll Kebawah – Sticky Widget Sidebar di Blogspot/Blogger.
Sticky Widget ini bukan hanya bisa di gunakan pada widget yang ada pada sidebar saja namun semua widget yang ada pada blog kita termasuk Menu pada Header 🙂
Untuk lebih jelas nya silahkan kamu pelajari saja code nya dalam artikel ini.
untuk membuat Sticky widget ini kita hanya perlu membuat CSS & JavaScript saja, simple kok mudah untuk di pahami.
Cara Membuat Widget Melayang Ketika di Scroll Ke Bawah
Tahap pertama kita bikin CSS nya, Tambahkan Code CSS berikut di atas </style> atau ]]></b:skin>
.sticky { position:fixed; top:10px;/* jarak dari atas*/ z-index: 100; }
Tahap Kedua tambahkan Javascript, Tambahkan Code Javascript berikut di atas </body>
<script type='text/javascript'> $(document).ready(function() { var stickyWidgetTop = $('#HTML5').offset().top; var stickyWidget = function(){ var scrollTop = $(window).scrollTop(); if (scrollTop > stickyWidgetTop) { $('#HTML5').addClass('sticky'); } else { $('#HTML5').removeClass('sticky'); } }; stickyWidget(); $(window).scroll(function() { stickyWidget(); }); }); </script>
#HTML5 ini bisa kamu ganti dengan element apa saja bukan hanya widget pada sidebar saja 🙂 silahkan berkreasi sendiri dengan Sticky widget ini 🙂
Untuk kamu yang masih merasa bingung bisa tanya atau kita diskusikan di kolom komentar.