Cara Membuat Sticky Widget Sidebar di Blog

Cara membuat widget pada sidebar blog agar melayang atau statis sebenarnya sangatlah mudah. Widget statis ini berfungsi agar pengunjung tetap melihat konten atau iklan yang ada pada widget tersebut yang sudah di kostumisasi. Kita memerlukan sedikit kostumisasi pada template blog kita. Baiknya widget ini kita aplikasikan untuk Entri Populer agar pengunjung mudah dalam mencari artikel lain yang ada pada blog kita. Namun widget ini memiliki kelemahan yaitu tidak bisa ditampilkan pada mobile version.

Cara Membuat Widget Sidebar Statis

• Login ke blogger buka Template > Edit HTML.

• Copy paste kan kode berikut tepat diatas kode ]]></b:skin> kamu bisa gunakan CTRL+F untuk memudahkan pencarian.

.sticky {
  width: 285px;
  position:fixed;
  top:30px;/* jarak dari atas*/
  z-index: 100;
 }

• Kemudian copy pastekan kode berikut tepat diatas kode </body>
• Ganti tulisan berwarna merah dengan id widget template Anda.

<script type='text/javascript'>
  $(document).ready(function() {
    var stickyWidgetTop = $('#html').offset().top;
    var stickyWidget = function(){
    var scrollTop = $(window).scrollTop();
  if (scrollTop > stickyWidgetTop) {
    $('#html').addClass('sticky');
  }else {
    $('#html').removeClass('sticky');
  
 };
   stickyWidget();
    $(window).scroll(function() {
   stickyWidget();
 });
});
</script>

Bagikan Artikel ini