Cara 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 yakni Widget blog yang dimodifikasi dengan suplemen 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 yakni biar pengunjung sanggup dengan terang melihat apa yang ditaruh di widget tersebut, alasannya yakni biasanya pengunjung cenderung lebih fokus ke artikel dan tidak memerhatikan widget di sedebar. Makara apa yang kita taruh di widget sidebar menyerupai artikel terbaru, popular post ataupun banner iklan kurang diperhatikan oleh pengunjung. Tapi bila kita membuatnya menjadi sticky sanggup dipastikan akan menarik perhatian penjung alasannya yakni selalu terlihat walaupun discroll.

Untuk menciptakan widget di sedebar menjadi sticky gotong royong tidak terlalu sulit, alasannya yakni kita hanya sedikit menambah instruksi script dan CSS kemudian memasukkan instruksi HTML widget yang bersangkutan dan widgetpun akan menjadi sticky. Nah, buat Anda yang ingin menimbulkan 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 hidangan Tema - Edit HTML.
3. Selanjutnya cari kode ]]></b:skin> kemudian copy instruksi CSS dibawah ini dan paste sempurna diatas instruksi tersebut.

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

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

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

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