Membuat Sticky Widget Sidebar di Blogspot/Blogger
Sticky dalam Bahasa Indonesia artinya menempel. Dalam istilah website Sticky berarti berada di depan atau selalu mengikuti walaupun mouse terus di scroll. Sedangkan Sticky Widget Sidebar berarti membuat widget yang selalu menempel walaupun mouse kita scroll.
Untuk melihat DEMO, silahkan scroll ke bawah dan lihat ke kanan. Sobat akan menemukan widget yang selalu mengikuti, itulah yang disebut 'Sticky Widget'
Untuk membuat Sticky widget ini, ada tiga langkah mudah, silahkan simak satu persatu
1. Menambakan kode CSS
2. Menambah kode JavaScript
2. Klik Template > Edit HTML
3. Tambahkan kode CSS di bawah ini di atas
Ganti
Selamat berkreasi dengan Sticky widget.....
Untuk melihat DEMO, silahkan scroll ke bawah dan lihat ke kanan. Sobat akan menemukan widget yang selalu mengikuti, itulah yang disebut 'Sticky Widget'
Pembaharuan 10 November 2013 : Mempersingkat kode sehingga lebih mudah untuk dipasang.
Untuk membuat Sticky widget ini, ada tiga langkah mudah, silahkan simak satu persatu
1. Menambakan kode CSS
2. Menambah kode JavaScript
Menambah kode CSS
1. Login ke Blogger2. Klik Template > Edit HTML
3. Tambahkan kode CSS di bawah ini di atas
]]></b:skin>
.sticky {
position:fixed;
top:10px;/* jarak dari atas*/
z-index: 100;
}
Tambahkan JavaScript
Simpan kode ini di atas</body>
<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML7').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>
Ganti
#HTML7
dengan ID widget yang akan dibuat sticky.Selamat berkreasi dengan Sticky widget.....
159 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
Contoh mba mau buat widget populer post jd tinggal ganti #HTML7 dengan id widget populer postnya....
Krn klo klo widget height:500px yg di fixed trus footer kita kebetulan punya height:300px maka footer akan tertutup widget saat scrol terus di tarik kebawa...
Untuk solusinya Thanks.
http://kebal-online.blogspot.com
Terima kasih.
dan sticky ini juga saya terapkan diblog.. :D
mkcih ya kang.. hihihi
makasih banget..
<style>
.sticky2 {
position:fixed;
align:center;
width:980px;
top:-10px;/* jarak dari atas*/
z-index: 100;
}
.selection {background:orange;color:#FFFFFF;}
</style>
<script type='text/javascript'>
$(document).ready(function() {
var sticky2WidgetTop = $('#HTML99').offset().top;
var sticky2Widget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > sticky2WidgetTop) {
$('#HTML99').addClass('sticky2');
} else {
$('#HTML99').removeClass('sticky2');
}
};
sticky2Widget();
…
jgn lupa kunjungan dan komentarnya gan :)
coretan-anambas.blogspot.com
bang-irham.blogspot.com
bang-irham.blogspot.com
saya pasangnya di FB like box
munculnya malah dibawah
jangan lupa ke blog saya
Widgetnya naik dulu lalu menghilang baru muncul lagi. Tidak seperti di blog ini. Thx be4
banyak ilmunya. haturnuhun kang ismet
Blog saya khan pake widget di footer.. nah dimana caranya agar widget sidebar yg disticky itu stop ketika akan sampai di footer. Jadi nggak nutupin widget yg ada di footer.
Makasih sebelumnya, kang. :)
share dong
mau tanya gimana caranya biar postingan bisa nyatu sama label readmore :|
contoh : http://2.bp.blogspot.com/-hetyeFa5i2M/UqCHoCbc-wI/AAAAAAAAAX4/SEsKZ5Q1bWA/s1600/a.png
klo id widget.nya dropdown menu apa kang
gagal mulu dari tadi soal.na
http://4.bp.blogspot.com/-tRY_RVSPbZk/UpVPIz0U3WI/AAAAAAAAGIo/aTPYGphtm-k/s1600/id-widget.png
- salam damai -
RIo Us"
Biar lebih keren blog nya trima kasih Kang
bukan
<div id='sidebar'>
itu bagaimana kang solusinya ?
tapi kok pas d scroll kebawah malah masuk ke footer gimana ya kang :(
<b:if cond='data:blog.url == data:blog.homepageUrl'>
#sticky{display:none}
</b:if>
artinya, apabila di halaman utama, 'sticky' disembunyikan.
ane dah 2 hari ni nyobain kode nya... dari yang pertama kode CSS dan JS dah bisa. tapi di tambah kode HTML itu yg g bisa. maksud dari tambah kode HTML tu gimana kang????
apa masuk ke edit HTML, atau tambah gadget????
kalau di edit html gimana ???? kan ada banyak tu kode² uvo nya....
hehehehehee....
sebelumnya makasih kang....
kenapa yah iklan adsense tidak muncul di page 2 sama page 3 blog saya?
selainnya muncul!
terima kasih banyak atas tutorialnya..
*Sedikit koreksi, pada contoh pengaplikasian pada kode div warna merah kurang tanda slash "/" karena itu penutup
ada solusi kah ?
Template Anda tidak dapat diuraikan karena template tidak terbentuk dengan baik. Pastikan semua elemen XML ditutup dengan benar. pesan kesalahan XML:
The widget with id BlogArchive1 is not within a section (actual parent element is: div.) Every widget should be in a section.
maaf mas, saya mau tanya, setelah praktek cara diatas, kok ada peringatan gini ya waktu save templatenya.. :((
pengen juga kayak gitu kang..
:(
masih bingung penempatanya..
kl boleh tanya lebih jelas..penerapan kodenya ditaruh di widget sidebar atau di dalam template kang?
itu yang catchernya harus isi emang bgeini
atau gmna?
dan yg untuk stickynya
apakah kode/script dari widget tersebut?
hahah kang mank baik dehh semoga tambah sukses kang
keren tutorial'a..
Berarti widgetnya itu posisinya ada di paling bawah sidebar ya, kang?
Maap kebanyakan nanya muluan...maklum msh lum paham :)