Cara Menciptakan Sticky Widget (Melayang) Di Sidebar Blog
Bagi kita para pelik Blog atau Web, tahukah apa yang dimaksud dengan sticky widget? Sticky widget adalah Widget blog yang dimodifikasi dengan script atau yang membuat widget itu melayang pada ketika discroll ke bawah.
Biasanya widget sticky letaknya di sidebar blog, dan kalau halaman di scroll ke bawah widget itu masih melayang atau mengikuti.
Manfaat dari widget yang melayang atau sticky adalah biar pengunjung sanggup dengan terperinci menyaksikan apa yang diletakkan di widget tersebut, lantaran seringkali pengunjung ingin lebih konsentrasi ke goresan pena dan tidak memerhatikan widget di sedebar.
Jadi, apa yang anda taruh di widget sidebar menyerupai Recent Post, Popular Post, ataupun banner iklan kurang diacuhkan oleh pengunjung. Tapi andai kita membuatnya menjadi sticky sanggup dipastikan akan unik perhatian penjung lantaran selalu tampak walaupun discroll.
Untuk membuat widget di sedebar menjadi sticky bahwasanya tidak terlalu sulit, lantaran kita hanya sedikit menambah kode.(akan di jelaskan di bawah)
Nah, buat Anda yang ingin menyebabkan salah satu widget menjadi sticky sanggup diikuti tutorial yang akan aku berikan kali ini. Namun, perlu diperhatikan bahwa anda harus mengetahui id widget yang akan kita buat sticky, berikut tutorialnya.
1. Login ke Blogger
2. Buka Menu Tema Lalu Edit HTML
3. Tambahkan arahan di bawah ini sebelum </body>
4. Tambahkan lebar pada konten atau widget yang dibentuk sticky dengan CSS. Misalkan di sini aku memperlihatkan 300px untuk lebar sticky, teladan :
Untuk demo tampilan Sticky Widget, silakan lihat widget Recent Post atau Artikel Terbaru Blog ini.
Cukup gampang Bukan? Selamat mencoba dan salam Blogger. Sumber https://www.denylistianto.com/
Biasanya widget sticky letaknya di sidebar blog, dan kalau halaman di scroll ke bawah widget itu masih melayang atau mengikuti.
Manfaat dari widget yang melayang atau sticky adalah biar pengunjung sanggup dengan terperinci menyaksikan apa yang diletakkan di widget tersebut, lantaran seringkali pengunjung ingin lebih konsentrasi ke goresan pena dan tidak memerhatikan widget di sedebar.
Jadi, apa yang anda taruh di widget sidebar menyerupai Recent Post, Popular Post, ataupun banner iklan kurang diacuhkan oleh pengunjung. Tapi andai kita membuatnya menjadi sticky sanggup dipastikan akan unik perhatian penjung lantaran selalu tampak walaupun discroll.
Untuk membuat widget di sedebar menjadi sticky bahwasanya tidak terlalu sulit, lantaran kita hanya sedikit menambah kode.(akan di jelaskan di bawah)
Nah, buat Anda yang ingin menyebabkan salah satu widget menjadi sticky sanggup diikuti tutorial yang akan aku berikan kali ini. Namun, perlu diperhatikan bahwa anda harus mengetahui id widget yang akan kita buat sticky, berikut tutorialnya.
Cara Membuat Sticky Widget (Melayang) di Sidebar Blog
1. Login ke Blogger
2. Buka Menu Tema Lalu Edit HTML
3. Tambahkan arahan di bawah ini sebelum </body>
<script type='text/javascript'> //<![CDATA[ $(function() { if ($('#sticky').length) { // Ganti "#sticky" dengan ID tertentu var el = $('#sticky'); var stickyTop = $('#sticky').offset().top; var stickyHeight = $('#sticky').height(); $(window).scroll(function() { var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti dari "Footer" 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 : ID dari konten atau widget yang akan dibentuk sticky
#footer-wrapper : Tentukan ID untuk membatasi fungsi sticky
4. Tambahkan lebar pada konten atau widget yang dibentuk sticky dengan CSS. Misalkan di sini aku memperlihatkan 300px untuk lebar sticky, teladan :
#sticky{width:100%;max-width:300px}#HTML1{width:100%;max-width:300px}Tentukan lebar sesuai dengan lebar sidebar dari template yang teman gunakan
Untuk demo tampilan Sticky Widget, silakan lihat widget Recent Post atau Artikel Terbaru Blog ini.
Cukup gampang Bukan? Selamat mencoba dan salam Blogger. Sumber https://www.denylistianto.com/