Sekilas Gosip Trik Menciptakan Sticky Widget (Melayang) Di Sidebar Blog

Cara gampang menciptakan sticky widget di blog - Bagi Anda pemilik Blog atau Web, tahukah Anda yang dimaksud dengan sticky widget? Sticky widget yaitu Widget blog yang dimodifikasi dengan embel-embel script yang menciptakan 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 dibentuk sticky yaitu semoga pengunjung sanggup dengan terang melihat apa yang ditaruh di widget tersebut, sebab biasanya pengunjung cenderung lebih fokus ke artikel dan tidak memerhatikan widget di sedebar. Kaprikornus apa yang kita taruh di widget sidebar menyerupai artikel terbaru, popular post ataupun banner iklan kurang diperhatikan oleh pengunjung. Tapi jikalau kita membuatnya menjadi sticky sanggup dipastikan akan menarik perhatian penjung sebab selalu terlihat walaupun discroll.

Untuk menciptakan widget di sedebar menjadi sticky bergotong-royong tidak terlalu sulit, sebab kita hanya sedikit menambah isyarat script dan CSS kemudian memasukkan isyarat HTML widget yang bersangkutan dan widgetpun akan menjadi sticky. Nah, buat Anda yang ingin menyebabkan salah satu widget menjadi sticky sanggup diikuti tutorial yang akan aku berikan kali ini. Namun, perlu diperhatikan bahwa tutorial ini hanya sanggup untuk satu widget saja, berikut tutorialnya.

Cara Membuat Sticky Widget di Blog

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

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

4. Selanjutnya copy lagi isyarat script dibawah ini kemudian paste sempurna diatas isyarat </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 isyarat widget (HTML11) bewarna merah dengan isyarat widget blog Anda yang ingin di buat sticky.

5. Untuk cara melihat isyarat HTML widget sanggup masuk ke sajian Tata Letak kemudian "Edit" pada widget yang ingin dibentuk sticky. Lalu lihat isyarat widget yang letaknya dibagian final URL.

Nah jikalau sudah simpan tema dan lihat hasilnya, cara tersebut sudah terbukti berhasil sebab aku juga memakai isyarat tersebut untuk menciptakan sticky widget. Demikian artikel mengenai tutorial blog yang sanggup aku begikan dan semoga bermanfaat.