Cara membuat widget Sticky disidebar Blog
Ok sobat berikut ini seocips.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.
20 Komentar untuk "Cara Membuat Sticky Widget Di Sidebar Blog"

maksudnya widget HTML 7 itu gimana bro??? diganti HTML10 bisa? kalo misal saya pake HTML10 yang mau saya sticky itu popular post, sudah saya taruh bawah tpi ga mau turun...yang salah dimana bro? makasih atas bantuannya...

Iya bisa, itu adalah id widget Blog yang ingin sobat bikin sticky. Oh iya ada script kode yang lebih mudah lagi editnya, yaitu membuat sticky widget V2. Silahkan sobat cari di kotak pencaharian blog ini dengan keyword 'sticky'.

Thanks Gan, Widgetnya Work, C :d 8-) l !!!

gan request artikel "membuat blog menjadi responsive" yang detail langkah demi langkah donk...ane nyari di luar ga ada yang mudah bagi newbie seperti saya...thanks gan

gagal total.. bikin tutorial yang benar donk............!!!!!!!!!

agan kurang beruntung kali. jika gak berhasil cara yang pertama coba saja cara yang kedua dan cara yang ketiga gimana mau berhasil jika satu kali gagal udah nyerah!. Di blog saya berhasil kok! untuk demonya lihat saja contohnya di sidebar kanan blog ini.

Mas gimana cara mengatur lebarnya mohon di kasih info secepatnya !!

torialnya sudah benar, buktinya saya berhasil....
mungkin situ yang gak bener cara kerjanya :)

Maksudnya kolom lebar mana gan? jika lebar sticky widget itu mengikuti lebar kolom sidebar tempat soba meletakan widget, atau bisa juga coba gunakan ini untuk sticky widget 2 diatas:
http://3.bp.blogspot.com/-phB3z7JeVe0/VPUgB6NXQ7I/AAAAAAAADwM/YyV8tk8qLAo/s1600/sticky-widget.png
Kode berwarna merah adalah lebarnya silahkan disesuaikan. jika belum berhasil juga ubah jadi width: 320px auto; kode warna merah diatas. Ok semoga berhasil.

mas mau nanya, apa tips membuat loeding blog cepat padahal kita memasang banyak widget?

Wah sob, kalau itu tergantung widgetnya, widgetnya berat apa kagak, kayak blog saya ini, awalnya loadingnya ringan akhirnya jadi berat karena banyak script di dalamnya. pilih-pilih aja mana yang sobat rasa bermanfaat untuk blog, jika sobat rasa widgetnya bermanfaat banget walau berat pasang ajalah... oh iya biar cepat katanya di compress HTML template dan sebagainya..saya juga sudah pernah compress html template tapi jadi bingung nyari kode waktu mau edit kembali jadi saya biarkan saja seperti sekarang..

Bagaiman dengan Head Line News Blog, apakah bisa juga dibuat sticky ??kalau bisa,caranya gimana?

gan, gmana biar sticky widgetnya gak nutupin widget bottom,. makasih

Bro, bagaimana jika saya mempunyai Double Sidebar Bro ?

Bukan Promosi, silakan Brothers Cek disini : Backpackerindonesiaku.blogspot.com

Bagaimana cara mengatasinya Bro ?

Makasih banyak buat trinya kak.. Udah saya praktekkan di blog saya http://bocahsoenyi.blogspot.com dan hasilnya lumayan keren..