Cara Membuat Sticky WIdget (Melayang) di Sidebar Blog

Cara mudah membuat sticky widget di blog - Bagi Anda pemilik Blog atau Web, tahukah Anda yang dimaksud dengan sticky widget? Sticky widget adalah Widget blog yang dimodifikasi dengan tambahan script yang membuat widget tersebut melayang walaupun discroll ke bawah. Biasanya widget sticky letknya di sidebar blog, dan bila halaman di scroll ke bawah widget tersebut masih melayang.

Baca: Cara Membuat Menu Navigasi Tetap Walaupun di Scroll

Manfaat dari widget yang dibuat sticky adalah agar pengunjung dapat dengan jelas melihat apa yang ditaruh di widget tersebut, karena biasanya pengunjung cenderung lebih fokus ke artikel dan tidak memerhatikan widget di sedebar. Jadi apa yang kita taruh di widget sidebar seperti artikel terbaru, popular post ataupun banner iklan kurang diperhatikan oleh pengunjung. Tapi jika kita membuatnya menjadi sticky bisa dipastikan akan menarik perhatian penjung karena selalu terlihat walaupun discroll.

Untuk membuat widget di sedebar menjadi sticky sebenarnya tidak terlalu sulit, karena kita hanya sedikit menambah kode script dan CSS lalu memasukkan kode HTML widget yang bersangkutan dan widgetpun akan menjadi sticky. Nah, buat Anda yang ingin menjadikan salah satu widget menjadi sticky bisa diikuti tutorial yang akan saya berikan kali ini. Namun, perlu diperhatikan bahwa tutorial ini hanya bisa untuk satu widget saja, berikut tutorialnya.

Cara Membuat Sticky Widget di Blog

1. Pertama silahkan masuk ke Blogger.
2. Kemudian masuk ke menu Tema - Edit HTML.
3. Selanjutnya cari kode ]]></b:skin> lalu copy kode CSS dibawah ini dan paste tepat diatas kode tersebut.

.sticky {
  position:fixed;
  top:10px;
  z-index: 100;
}

4. Selanjutnya copy lagi kode script dibawah ini lalu paste tepat diatas kode </body> (Letaknya dibawah sendiri)

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

Note: Silahkan ganti kode widget (HTML11) bewarna merah dengan kode widget blog Anda yang ingin di buat sticky.

5. Untuk cara melihat kode HTML widget bisa masuk ke menu Tata Letak lalu "Edit" pada widget yang ingin dibuat sticky. Lalu lihat kode widget yang letaknya dibagian akhir URL.

Nah jika sudah simpan tema dan lihat hasilnya, cara tersebut sudah terbukti berhasil karena saya juga menggunakan kode tersebut untuk membuat sticky widget. Demikian artikel mengenai tutorial blog yang dapat saya begikan dan semoga bermanfaat.

loading...

Share this!