Skip to main content

Cara Membuat Sticky Widget Di Sidebar Blog

Cara membuat widget Sticky disidebar Blog

Ok sobat berikut ini anisuka.com tentang cara membuat widget tertahan atau widget Melekat di blog /sticky widget, tertahan disini maksudnya widget tidak akan ikut hilang ke atas jika scroll terus kebawah, gimanah ngejelasinnya yah..pokoknya kira-kira seperti itu..widget tertahan didepan walaupun mouse komputer di scroll kebawah.. hehehe.

Sebenarnya artikel ini sudah banyak ditulis dan dibawas, diblog saya yang lain juga artikel ini sudah pernah di tulis. Tapi untuk melengkapi artikel diblog ini maka saya mempostingnya kembali. Membuat widget seperti ini lebih dikenal dengan sticky widget.

Sticky Widget 1

Berikut kode css yang biasanya diletakan diatas kode ]]></b:skin> yang ada didalam tempalte blog.

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

Berikut kode java script yang di letakan diatas kode </body>

<script type=’text/javascript’>
$(document).ready(function() {
var stickyWidgetTop = $(‘#HTML8‘).offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();  
if (scrollTop > stickyWidgetTop) {
    $(‘#HTML8‘).addClass(‘sticky’);
} else {
    $(‘#HTML8‘).removeClass(‘sticky’);
}
};
stickyWidget();
$(window).scroll(function() {
    stickyWidget();
});
});
</script>

Silahkan ganti kode berwarna merah yang HTML8 dengan id widget yang akan sobat buat menjadi sticky widget, misalnya HTML7 dsb. Sebaiknya juga sobat meletakan widget ini dipaling bawah sidebar sobat. Jika sobat meletakannya diatas widget lain maka kemungkinan widget yang lain itu akan tertahan juga.

Oh iya baca juga cara membuat Sticky Recent Post Slide Out On Scroll di Bloger. Nah jika sobat kesulitan dengan cara pertama diatas berikut adalah cara yang kedua. Kodenya tetap sama seperti diatas hanya penempatannya saja yang berbeda

Sticky Widget 2

Masuk ke bagian ” Tata Letak ” di Blog anda, kemudian “Tambahkan Gadget” kemudian pilih “HTML/Javascript” kemudian tambahkan kode dibawah ini:

<style>
.sticky {
  position:fixed;
  top:10px;
  z-index: 100;
}
</style>
<script type=’text/javascript’>
$(document).ready(function() {
var stickyWidgetTop = $(‘#HTML8′).offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
    $(‘#HTML8‘).addClass(‘sticky’);
} else {
    $(‘#HTML8‘).removeClass(‘sticky’);
}
};
stickyWidget();
$(window).scroll(function() {
    stickyWidget();
});
});
</script>

Untuk cara settingnya sama seperti di atas yaitu mengubah bagian berwarnah merah diatas dengan ID widgetnya sobat.

Sticky Widget 3

Oh iya,.. Jika sobat masih kesulitan juga dengan cara-cara diatas tadi, baca saja Updatenya dibawah ini:

Oh iya background template blog bisa dibuat sticky juga loh baca caranya disini. Ok sobat sekian tutorial membuat sticky widget di blog semoga bermanfaat.

Buka Komentar
Tutup Komentar