Disain Grafis, Tips dan Triks

Cara Membuat Sticky Widget di Sidebar di Blog



Cara Membuat Sticky Widget di Sidebar di Blog


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.

Cara Membuat Sticky Widget di Sidebar di Blog