Cara Membuat Sticky Widget di Sidebar di Blog - Sticky dapat diartikan dengan kata menempel. Jadi misalnya menu atau widget yang diletakkan di header, footer dan sidebar yang sudah dibuat sticky maka widget tersebut akan tetap diam di tempat (lengket) tidak akan hilang ketika mouse di scroll ke bawah. Membuat/memasang sticky widget akan sangat menguntungkan karena pengunjung tidak akan kehilangan pandangan pada widget atau menu yang dibuat sticky.
Pada tips blogspot/blogger kali ini saya akan berbagi kode css dan java script untuk membuat sticky widget sidebar blogspot. Untuk mempersingkat pembahasan, silahkan simak bagaimana cara memasang sticky widget di sidebar blog dibawah ini.
Cara Membuat Sticky Widget Sidebar di Blog
1. Login ke Blogger
2. Pilih Template => Edit HTML
3. Tekan Ctrl+F cari kode ]]></b:skin> dan letakkan kode berikut diatasnya
.sticky {position:fixed;top:10px;z-index: 100;}
4. Lalu cari kode </body> dan letakkan kode berikut diatasnya
<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML2').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>
5. Simpan
Keterangan :
Silahkan ubah kode #HTML2 dengan ID widget anda yang akan dibuat sticky
Demikianlah tutorial blog mengenai pembuatan sticky widget, semoga bermanfaat.