Tapike.com

Cara Membuat Sticky Widget Di Sidebar Blog

Cara Membuat Sticky Widget
Cara Membuat Sticky Widget Di Sidebar Blog - Kali ini kita akan membahas cara membuat sticky widget atau widget menempel (lengket) di sidebar blog. Sticky widget sering digunakan untuk mengisi kekosongan blog. Ketika kita memposting artikel yang cukup panjang ke bawah, tentu saat mendekati akhir postingan bagian sidebar akan terlihat kosong karena widget tidak dapat bergerak atau tidak sticky. Nah untuk itu kita perlu membuat sticky widget di sidebar. Biasanya, sticky di buat untuk widget iklan atau pun sosial media karena lebih penting untuk penghasilan dan SEO. Dibawah saya juga akan menjelaskan bagaimana cara membuat sticky widget menjadi responsive. Sebenarnya untuk membuat sticky widget menjadi responsive tidaklah rumit, kita hanya perlu mengembalikan css-nya tersebut menjadi statis lagi. Bagi yg ingin tahu cara membuat sticky widget di sidebar blog, simak langkah berikut. Baca juga Cara Membuat Related Post Dengan Gambar

CSS Sticky Widget

Letakkan css berikut ini diatas kode ]]></b:skin> yang ada didalam template blog anda.
.sticky {
  position:fixed;
  top:10px;
  z-index: 100;}

Script Sticky Widget

Kemudian cari kode </body> dan letakkan script berikut diatasnya
<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML5').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
    $('#HTML7').addClass('sticky');
} else {
    $('#HTML7').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
    stickyWidget();
});
});
</script>
Kemudian ganti tulisan warna biru dengan id widget urutan paling bawah dari sidebar blog. Untuk tulisan warna merah ganti dengan id widget yg ingin dibuat jadi sticky.

Cara Membuat Sticky Widget Responsive

Untuk membuat sticky widget responsive kita hanya perlu menambahkan css media query saja. Yang terjadi adalah widget sticky akan kembali seperti default dari template blog anda. Jadi jika anda belum mengubah template blog menjadi responsive, cara ini akan menjadi percuma. Berikut caranya:
Letakkan kode berikut di atas kode ]]></b:skin>
@media screen and (max-width: 959px){.sticky{position:static!important;width:100%!important;}}
Untuk tulisan warna merah ubah sesuai keinginan anda. Tapi saya rekomendasikan untuk tidak mengubahnya, karena minimum lebar dekstop adalah segitu. Sebenarnya cara diatas ini adalah cara menghilangkan sticky pada tampilan mobile. Karena tampilan ponsel ukurannya lebih kecil daripada dekstop, ini akan membuat sticky widget akan menutupi sebagian halaman blog anda. Demikianlah postingan saya mengenai cara membuat sticky widget atau cara membuat widget menempel (lengket) pada sidebar  blog. Semoga artikel ini dapat bermanfaat bagi kita semua.
4 Comments Blogger
Disqus
  1. Kebetulan lagi cari tutorial widget sticky.. terima kasih gan

    BalasHapus
  2. CARA MENGETAHUI ID WIDGEDNYA BAGAIAMAN MAS BRO...

    BalasHapus
    Balasan
    1. Gampang mas kribo.
      Pada menu tata letak, klik edit pada widget yang ingin dilihat ID-nya. Setelah muncul popup, lihat link di browser. ID widget tertera pada akhiran link.

      Hapus


Join This SiteInstagram