Cara Membuat Sticky Widget Sidebar Sangat Mudah Di Blog - Cari Aja Disini

Cara Membuat Sticky Widget Sidebar Sangat Mudah Di Blog


cara membuat sticky widget sidebar blog

Penggunaan sticky widget atau widget melayang ini memberikan banyak manfaat untuk sebuah blog. Dimana dengan menggunakan sticky widget maka otomatis widget akan mengikuti halaman saat di scroll kebawah, hal ini dapat menarik perhatian pengunjung blog dan berkesempatan mendapatkan klik.

Selain itu sticky widget digunakan untuk mengisi sisi sidebar blog agar tidak kosong, sehingga dengan adanya sticky widget ini sisi sidebar tetap terisi dan enak di lihat.

Sticky widget sidebar

Penggunaan sticky widget ini biasanya untuk merekomendasikan postingan contohnya seperti daftar artikel terbaru, daftar artikel populer dan lain-lain. Selain itu sticky widget ini juga dapat digunakan untuk menampilkan iklan agar tetap muncul saat halaman di scroll ke bawah.

Lalu bagaimana caranya memasang sticky widget di blog? caranya cukup mudah, ikuti step by step tutorial dibawah ini.

1. Pertama jika belum membuat widget yang ingin dibuat sticky.

2. Jika widget sudah ada, lihat id widget yang sudah dibuat tadi. Caranya seperti ini

cara membuat sticky widget sidebar blog

3. Setelah itu buka tema kemudian edit html, letakkan kode di bawah ini di dalam <b:skin>..</b:skin>

.sticky { position:fixed; top:50px;/* jarak dari atas, silahkan disesuaikan*/ z-index: 100; }


4. Kemudian letakkan kode dibawah ini tepat di atas </body>

tambahkan <script type='text/javascript'> Tempel kode di bawah disini </script>

$(document).ready(function() { var stickyWidgetTop = $('#PopularPosts2').offset().top; var stickyWidget = function(){ var scrollTop = $(window).scrollTop(); if (scrollTop > stickyWidgetTop) { $('#PopularPosts2').addClass('sticky'); } else { $('#PopularPosts2').removeClass('sticky'); } }; stickyWidget(); $(window).scroll(function() { stickyWidget(); }); });

5. Ganti tulisan yang #PopularPost2 dengan id widget kamu tadi

6. Kemudian klik simpan dan coba buka blog kamu


Nah itu tadi cara membuat widget sticky sidebar di blog, semoga artikel ini dapat membantu. Mohon diperhatikan dan pastikan kamu mengikuti step di atas dengan benar.

Jangan lupa bagikan artikel ini ya!

4 komentar

  1. mantaap ni, sangat membantu untuk saya pemula dalam dunia blogging, salam kenal gan

    BalasHapus
  2. Stiky widget sangat berfungsi untuk meningkatkan kemudahan akses navigasi blog meski memiliki konten yang panjang. Cocok juga untuk meningkatkan pendapatan dari iklan

    BalasHapus
    Balasan
    1. iya bener itu mba, biar bagus juga tampilannya jika mengikuti layar ketika di scroll

      Hapus

Notification
Ini adalah popup notifikasi.
Done