Cara Menciptakan Sticky Widget Di Sidebar Blog
Pada artikel sebelumnya aku pernah membuatkan tutorial tentang Memasang Fungsi Sticky Pada Widget Blogger, kali ini aku akan membuatkan tutorial dengan fungsi yang sama ialah untuk menciptakan widget tertentu menjadi sticky atau melayang mengikuti halaman ketika digulirkan ke bawah dan atas. Tutorial ini merupakan perbaikan sekaligus menjawab komentar teman dari tutorial sebelumnya yang ketika halaman digulir ke bawah sticky widget akan melewati Footer Wrapper dan itu akan sedikit mengganggu sebab menghalangi widget yang dipasang di area Footer.
Kode yang akan aku bagikan ini lebih cocok dipasang pada semua konten di Sidebar atau dapat juga dipasang pada salah satu widget tertentu.Bagi teman yang ingin mencobanya, silakan ikuti tutorial Cara Membuat Sticky Widget di Sidebar Blog.
1. Login ke Blogger > Buka Template editor > Tambahkan arahan di bawah ini sebelum </body>
Perhatikan arahan yang ditandai, ganti arahan tersebut dengan ID yang akan dibentuk sticky sesuai template yang digunakan
Selanjutnya tambahkan lebar pada konten atau widget yang dibentuk sticky dengan CSS. Misalkan di sini aku menunjukkan 300px untuk lebar sticky, teladan :
Atau
Tentukan lebar sesuai dengan lebar sidebar dari template yang teman gunakan dan juga jangan lupa untuk mengganti lebar pada media query tertentu, teladan :
Untuk demo tampilan Sticky Widget, silakan klik tombol di bawah ini :
Cukup gampang bukan? Selamat mencoba dan salam sukses.
Kode yang akan aku bagikan ini lebih cocok dipasang pada semua konten di Sidebar atau dapat juga dipasang pada salah satu widget tertentu.Bagi teman yang ingin mencobanya, silakan ikuti tutorial Cara Membuat Sticky Widget di Sidebar Blog.
Cara Membuat Sticky Widget di Sidebar Blog
1. Login ke Blogger > Buka Template editor > Tambahkan arahan di bawah ini sebelum </body>
<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>Perhatikan arahan yang ditandai, ganti arahan tersebut dengan ID yang akan dibentuk sticky sesuai template yang digunakan
#sticky-sidebar : ID dari konten atau widget yang akan dibentuk sticky
#footer-wrapper : Tentukan ID untuk membatasi fungsi sticky
Selanjutnya tambahkan lebar pada konten atau widget yang dibentuk sticky dengan CSS. Misalkan di sini aku menunjukkan 300px untuk lebar sticky, teladan :
#sticky-sidebar{width:100%;max-width:300px}Atau
#HTML1{width:100%;max-width:300px}Tentukan lebar sesuai dengan lebar sidebar dari template yang teman gunakan dan juga jangan lupa untuk mengganti lebar pada media query tertentu, teladan :
@media only screen and (max-width:768px){ #sticky-sidebar{width:100%;max-width:100%} }Untuk demo tampilan Sticky Widget, silakan klik tombol di bawah ini :
Demo untuk sticky pada semua konten sidebar
Demo untuk sticky pada widget tertentu
Cukup gampang bukan? Selamat mencoba dan salam sukses.
0 Response to "Cara Menciptakan Sticky Widget Di Sidebar Blog"
Post a Comment