19 Maret 2015

Sticky Widget Pada Sidebar Blog

Sticky widget merupakan sebuah widget yang akan terus menempel ketika kita melalukan scroll ke bawah pada sebuah halaman web / blog. Sticky ini merupakan sebuah kreasi dari kode CSS dan JavaScript yang biasanya digunakan agar widget yang dibuat sticky tersebut akan selalu terlihat meskipun digulung ke bawah sampai footer.

Baca juga : Cara Upload JavaScript Ke Google Code

Sticky Sidebar

Sebagai contoh pada widget Media Sosial saya di samping, jika Anda menggulung ke bawah halaman ini maka akan terus menempel. Contoh lain adalah untuk sebuah iklan, hal ini sangat berguna karena iklan tersebut akan terus terlihat dan berpotensi lebih besar untuk diklik. Apalagi iklan Google AdSense, akan lebih menarik lagi karena iklannya yang auto generated.

Cara Membuat Sticky Widget Pada Sidebar Blog :

  1. Login akun blogger Anda.
  2. Lalu pilih Template > Edit HTML
  3. Cari kode ]]></b:skin>
  4. Salin CSS di bawah ini dan tempel di atas kode ]]></b:skin>
    .sticky {
      position:fixed;
      top:10px;
      z-index:100;
    }
    Keterangan : top:10px adalah jarak dari atas ketika widget menempel, sesuaikan dengan tampilan blog Anda.
  5. Kemudian tambahkan JavaScript di bawah ini dan tempel di atas kode </body>
    <script type ='text/javascript'>
      $(document).ready(function() {
        var stickyWidgetTop = $('#HTML1').offset().top;
        var stickyWidget = function() {
          var scrollTop = $(window).scrollTop();
          if (scrollTop > stickyWidgetTop) {
            $('#HTML1').addClass('sticky');
          } else {
            $('#HTML1').removeClass('sticky');
          }
        };
        stickyWidget();
        $(window).scroll(function() {
          stickyWidget();
        });
      });</script>
    Keterangan : Ganti #HTML1 dengan ID widget yang dibuat menempel.
  6. Kemudian simpan template.
Kini Widget Sticky telah berhasil dibuat, silakan berkreasi dengan widget ini untuk menarik pembaca. Selamat mencoba.

Baca juga : Responsive Sticky Widget Pada Sidebar Blog

4 komentar

Mantep mas perlu belajar banyak ni ama mas leksmana.. salam kenal ea mas..

Hehe masih dalam tahap belajar kok saya mas, salam kenal juga :)
Eh iya nama saya Prisma bukan leksmana :D

coba praktek dulu ah, moga aja berhasil

Isikan komentar Anda dengan bijak.