Cara Menciptakan Sticky Widget Di Sidebar Di Blog

Written By Spirito Monday, December 9, 2013 Add Comment

Cara Membuat Sticky Widget di Sidebar di Blog - Sticky sanggup diartikan dengan kata menempel. Kaprikornus contohnya sajian atau widget yang diletakkan di header, footer dan sidebar yang sudah dibentuk sticky maka widget tersebut akan tetap membisu di kawasan (lengket) tidak akan hilang saat mouse di scroll ke bawah. Membuat/memasang sticky widget akan sangat menguntungkan alasannya ialah pengunjung tidak akan kehilangan pandangan pada widget atau sajian yang dibentuk sticky.

Pada tips blogspot/blogger kali ini aku akan membuatkan aba-aba css dan java script untuk menciptakan 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 aba-aba ]]></b:skin> dan letakkan aba-aba berikut diatasnya

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

4. Lalu cari aba-aba </body> dan letakkan aba-aba 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 aba-aba #HTML2 dengan ID widget anda yang akan dibentuk sticky

Demikianlah tutorial blog mengenai pembuatan sticky widget, biar bermanfaat.