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'

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 Blogger
2. 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.....

161 komentar

Keren kang sticky widgetnya.
Berarti widgetnya itu posisinya ada di paling bawah sidebar ya, kang?
Maap kebanyakan nanya muluan...maklum msh lum paham :)

Balas

Akhirnya sukses dengan stickynya kang. Kang share css komentar ini dong?

Balas

ini secara tidak langsung menyuruh pembaca untuk memberikan review hahaa jika widdget sticky na like /share nice post kang ismet

Balas

Sekali lagi makasih buat sticky widgetnya kang n bantuannya pada template Cemungudh

Balas

kalau diblog ini, yang keren templatenya. Jadi indah kalau dipasangin ini :))

Balas

Pastinya sob... kalau di atas.. nanti semua widget terbawa sticky

Balas

Kalo CSS ini bukan buatan saya sob.. punya bloggeritems

Balas

Sama2 sob... keep posting and sharing

Balas

Underground404 juga keren n minimalist...

Balas

Keren triknya kang, jadi kepengen pasang

Balas

ijin menyimak sob..
keren tutorial'a..

Balas

Berarti kalau udah pasang widget ini, widget sharing yang melayang di blog saya harus hapus dulu dong ya kang?
Harus ngatur tempat dulu nih...makasih sharingnya kan! :)

Balas

Ya ngga juga, soalnya yang bisa di tempatkan bukan social share aja... banner, fb like box, dll..

Balas

makasih banyak kang atas artikelnya kang...!
hahah kang mank baik dehh semoga tambah sukses kang

Balas

oa kag jangan lupa kunjung JagoCopy[dot]Blogspot[dot]com

Balas

Alhamdulillah, akhirnya sukses juga kang widget sticky'na di pasang di blog saya...nuhun nya kang :)

Balas

Kalo cara pasang Tweet, Like G+ Dan lain-lain gimana kang...??

Balas

Hehehehe banyak bener nie scriptnya.... :D

Balas

Wah keeren bang,,, wajib dicoba inii hehehehe,,, thx tutornyaaa..

Balas

Blognya Boleh saya tiru gak kang?

Balas

saya sama skali gk ngerti caranya kang..

Balas

dipelajari pelan2 bisa kok sob.. awalnya emang puyeng :)

Balas

sudah berhasil kang,, thx yahh,, heheheh...

Balas

mantap mas.... jangan lupa kunjung balik

Balas

mantap banget triknya..saya jadi kepingin coba

Balas

maaf mas mau tnya..
itu yang catchernya harus isi emang bgeini






atau gmna?

dan yg untuk stickynya
apakah kode/script dari widget tersebut?

Balas

belum semulus sticky blognya kang ismet
masih bingung penempatanya..
kl boleh tanya lebih jelas..penerapan kodenya ditaruh di widget sidebar atau di dalam template kang?

Balas

kang mau nanya, kalo buat sticky header kaya blog akang ini gimana ya ??

Balas

wah.. keren nih kang. ini yang saya cari cari dan ternyata ada di sini to yoo?.. hehehehe..

Balas

Yang di langkah ketiga, itu masukin kode CSSnya dimana ya Kang? :D

Balas

Kang Ismet berarti sama seperti punya Kang Ismet yang menu navigasi diatas pula yah...???

Balas

Kalau menu navigasi beda sob, sticky widget itu yang di samping -->

Balas

catcher itu harus ada di atas sticky, untuk menentukan jarak. Untuk sticky hanya kode widget, bukan isi widget.

Balas

Nanti saya share, itu floating nav/menu sob..

Balas

di template Edit HTML sob... di bagian sidebar

Balas

Kami tidak dapat menyimpan template Anda.
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..

:(

Balas

bingung sama caranya yang ketiga ,,, -_-

Balas

Thank kang walau harus nambah sidebar baru dibawah sidebar karena sulit penerapannya tanpa di tambah sidebar supaya sidebar tidak ikut sticky semua namun makasih atas tutorialnya.

Balas

yessss.. berhasil, makasih banget kang :)

Balas

cara dapat kodenya di mana sob

Balas

Kak, jika di kanan bawah ada elemen lain kok jadi menumpuk ya, misalnya di blog aku yang ada widget iklan yang panjangnya sampai samping kanan.

ada solusi kah ?

Balas

ikut nyoba kang nyari2 baru ketemu....

Balas

terima kasih :) sudah saya terapkan.

*Sedikit koreksi, pada contoh pengaplikasian pada kode div warna merah kurang tanda slash "/" karena itu penutup

Balas

Kalo ngebuat menubar menempel diatas kayak punyaknya google analytic itu gimana sob.. pas dirol kebawah dia menempel, tapi pas rol keatas, kembali lagi ke posisi semula.,

Balas

widget ini sangat bermanfaat kang ismet. thanks for sharing..

Balas

Bang Ane masih Belom paham masang a ..

Balas

Thanks gan, udah dicoba dan sukses, silahkan lihat sendiri punya saya,
terima kasih banyak atas tutorialnya..

Balas
Komentar ini telah dihapus oleh pengarang.

mantap kang, sudah saya pasang di blogsaya, hasilnya sangat memuaskan..

Balas

Terlihat simpel dan juga menarik Mas.Lain waktu saya pakai ini Mas.

Balas

kang saya masih bingung kalau di gunakanya untuk populer post ,kode widget populer postnya di ambil dari mana ?

Balas

pertama sempat bingung tapi lama2 bisa juga akhirnya

Balas

kang ane mau nanya yang lain.
kenapa yah iklan adsense tidak muncul di page 2 sama page 3 blog saya?
selainnya muncul!

Balas

page 4,5,6,7 pun gak muncul

Balas

yah kang, awalnya bisa ngikut kebawah. tapi pas balik ke atas lagi kok ga balik ke tempat semula ya ? coba cek blogku :)

Balas

Permisi kang ismet.....
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....

Balas

aduuuhh pusing gak bisa2 kang....

Balas

Kang kok saya gak jadi nih ?

Balas

Sangat bermanfaat, Thanks.... + ijin bookmark

Balas

keren gan, punya ane udah bisa

Balas

oke.. congrats deh sob... :-bd

Balas

Mau nanya, setelah di aplikasikan di blog saya. setelah discrol ke bawah kok sticky-nya jadi mendesak ke bawah ya, jadi widget di bwahnya ketutupan gitu alisa sticky tidak sama saaat sebelum di scroll kebawah. Mohon pencerahanya. Thanks.

Balas

udah ketemu solusinya Bos, thanks

Balas

membuat hanya tampil dipostingan saja bagaimana, pakai tambahan kode ngak bang.

Balas

pake tag kondisional, simpan di bawah ]]></b:skin>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
#sticky{display:none}
</b:if>


artinya, apabila di halaman utama, 'sticky' disembunyikan.

Balas

kalau buat kode Google Adsense, kira-kira dilarang gak ya kang? :D

Balas

blom tau sob... coba baca aja TOSnya, tapi kalau selintas menurut saya ini bukan popup, tapi sticky.. coba cari referensi yang lain :)

Balas

sukses kang :-bd
tapi kok pas d scroll kebawah malah masuk ke footer gimana ya kang :(

Balas

Sukses kang, terimakasih yah. Tapi pada Tata Letak bagian Sidebar yang ada tulisan "Tambahkan Gadget" jadi berantakan yah?

Balas

Gan mau tanya nih kalau buat masang iklan kaya google adsense aman nggak yuah ?

Balas

kang kalo abis scroll kebawah trus ke atas lagi kenapa posisinya nambah kebawah yah @@,

Balas

tinggal diakali CSSnya sob..kadang2 emang ga sesuai kemauan

Balas

wah keren sob,,, lumayan nih jadi tambah pengetahuannya,,, mampir kalo bisa http://gtips-trick.blogspot.com./

Balas

Makasih kang...bermanfaat banget...dari banyak tutorial yang saya coba....cuma ini yang bekerja dan berhasil hehe...thanks..!

Balas

sama2 sob... hasil ujicoba dulu :)

Balas

<div class='sidebar-wrapper'>
bukan

<div id='sidebar'>

itu bagaimana kang solusinya ?

Balas

Makasih Gan .... Sudah 5 hari saya cari bagaimana supaya sidebar tdk ikut kalau discroll pada blog, pantes saja tdk ketemu ternyata istilah bloggernya Stinky....:v :v :v skali lagi makasih gan .. :D

Balas

Semuanya harus dipasang kang?

Balas

Wah narik lagi nih Kang ,,langsung praktek
Biar lebih keren blog nya trima kasih Kang

Balas

Mantab kang, saya bookmark dulu ^_^
- salam damai -
RIo Us"

Balas

kang ismet mau tanya nih , tutorial diatas sih udah work kang, tapi kalo blog yang responsive ada tambahan gk kang ? soalnya widget yang ditambah sticky jadi numpuk kang , thanks sebelumnya nih kang...

Balas

maaf kang ,,boleh tanya ?
klo id widget.nya dropdown menu apa kang

gagal mulu dari tadi soal.na

Balas

untuk mendapat ID widget, lihat ke atas paling ujung ketika edit widget seperti gambar. berarti IDnya #HTML8

http://4.bp.blogspot.com/-tRY_RVSPbZk/UpVPIz0U3WI/AAAAAAAAGIo/aTPYGphtm-k/s1600/id-widget.png

Balas

Kalau pake' class bisa nggac kang ?

Balas

Ini nih yang saya cari-cari kang . . . di ublek-ublek akhirnya ketemu juga, makasih kang untuk tutorialnya sangat berguna sekali untuk saya :D.

Balas

#HTML7 nya ada 3 kang itu diganti yang mana ? atau semua di ganti ?

Balas

maaf kang OOT

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

Balas

kang kok saya coba gagal ya??

Balas

makasih mas, kunjungi juga blog adik ya http://prediksibola888.blogspot.com

Balas

hehe saya coba-coba nerapin kodenya buat navigasi menu, eh taunya berhasil. makasihya kang. :D

Balas

nyicipin kode yang ini KI hehe...... fungsinya sama dengan sticky menu, trims

Balas

emang cara kerjanya sama sih.. cuma beda posisi aja :D

Balas

Mantep tenan kang ismet.. udah berhasil ane coba.. Top pisan pokok e lah.. :D

Balas

Di blog saya tidak berhasil. :(

Balas

Curiga di update jadi kieu script na? :D haha , jagoan euy si akang .. punten yeuh abdi balik deui ka postingan ieu , gentos template deui aduh ripuh abi mah kang .. haha

Balas

Gak berhasil kang, tapi saya coba mencari ke blog lain dan cara yang lama berhasil aja

Balas

kang naro CSS di ]]> ko gak bisa sih??

Balas

Mau nanya lagi nih kang...

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. :)

Balas

berhasil mas.ijin ulas buat sharing di blog saya.maksih

Balas

jadi betah main di blog ini.
banyak ilmunya. haturnuhun kang ismet

Balas

ikutan jadi follower ah, supaya bisa updatean terbaru

Balas

Kok ga' semulus widget di blog Kang Ismet ini ya ??? Coba lihat kang di = > tesmila.blogspot.com ( harus buka salah satu artikel biar halamannya panjang ke bawah :D

Widgetnya naik dulu lalu menghilang baru muncul lagi. Tidak seperti di blog ini. Thx be4

Balas

gan udah ketemu belum caranya. supaya stop ketika mau sampe di footer?
share dong

Balas

kang ismet pengen tanya kalo Sticky itu diterapkan pada widget popular post bisa gk yaa ? soalnya tadi saya coba kok gk bisa yaa

Balas

kalau untuk mengetahui kode di kanan blog untuk mengganti yang #HTML7 gimana mas?

Balas

untuk melihat id widget sobat, bisa di cek di editor HTML, atau mudahnya inspect element aja dengan browser firefox :)

Balas

mantap gan
jangan lupa ke blog saya

Balas
Komentar ini telah dihapus oleh pengarang.

Kang... Kalau Misalnya Saya Mau Pasang Sticky Widget di 2 Widget yang Berbeda itu harus Nambah script diatas code </body> atau gimana ?

Balas

maaf kang mo nanya...
klo mau 2 widget semisal widget html3 dan html2 yng dibuat sticky gimana caranya kang???
makasih kang sebelumnya...

Balas

ah script ng work di share

Balas

berhasil kang, hatur nuhun

Balas

kok g bisa ya kang ??
munculnya malah dibawah

Balas

Berhasil mas.. makasih yaah

Balas

keren bnget mas,,, saya dah coba di blog saya. http://azhallea.blogspot.com

ijin copas ya mas,, ntar cek z di sana.

Balas

kang, setelah dipasang sticky saat saya scroll brasil nempel, tapi efek shadow di boxnya berubah dan ukuran boxnya juga berubah, cek coba kang di blog saya

saya pasangnya di FB like box

Balas

blog saya mangabeam[dot]blogspot[dot]com

Balas

Kak, caranya nambahin efek easeOutQuad gmn ?

Balas

info bagus kang :), ane coba dulu :D

bang-irham.blogspot.com

Balas

info bagus kang :), ane coba dulu :D

bang-irham.blogspot.com

Balas

Kenapa saya ndak bisa ya Kang? :/

Balas

makasih gan, sekarang udah bisa. hehe
jgn lupa kunjungan dan komentarnya gan :)
coretan-anambas.blogspot.com

Balas

kang, kalau dua widget yang mau di buat sticky gimana?

Balas

Bisa kok sticky 2 atau lebih juga, cuman di htmlnya untuk kode yang kedua jangan di samain, jadi ditambahin angka, misal
<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();
$(window).scroll(function() {
sticky2Widget();
});
});
</script>

Balas
Komentar ini telah dihapus oleh pengarang.

wah mateb gan berhasil di blog ane, silahkan mampir KLIK WOW namanya

Balas

mantap tutorial,kang
makasih banget..

Balas

terimakasih banyak kang.. blog ini sudah mnyelesaikan bnyak masalah yang saya alami.. :)
dan sticky ini juga saya terapkan diblog.. :D
mkcih ya kang.. hihihi

Balas

mantap kang, terima kasih ^^

Balas

Tutorialnya memang Good :-d

Balas

udah saya coba tapi kenapa ga bisa ya kang? apa ngaruh sama templatenya ya? hmm..

Balas

Malam kang, saya sudah coba berkali kali tapi tetap tidak bisa kang. Mohon pencerahannya kang:)

Terima kasih.

Balas

Trimakasih kang, berhasil..

Balas

nuhuun kang ismet elmuna,
http://kebal-online.blogspot.com

Balas

Trus untuk membuat Widget BERJALAN LAGI saat hampir menyentuh footer gimana eaa..??

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.

Balas

mantap kang tutorialnya. sukses selalu dengan tutorial kerennya

Balas

Kalau memasangnya pada Widget gimana kang? Contoh : Pada Widget Site Info di www.mafiasitez.blogspot.com apa #html7 nya saya ganti dengan .html7 ? tapi kalau di ganti dengan .html7 malah gak muncul kang :(

Balas

Aduh kang, punya saya kok nggak jd ya? sticky ny tdk berfungsi, pdahal sudah mengikuti tutorial sesuai dengan prosedur. Mohon bantuannya. Terimakasih

Balas

Kang, kalo keseluruhan sidebar yang mau dijadiin sticky, kumaha carana kang?

Balas

Kalau buat WP yang tanpa plugin gmn ??

Balas

Itu maksudnya mengganti #html7 dengan ID widget itu gimana yah kang Ismet?

Balas

setiap widget pasti punya ID mba....formatnya #nama_id {...} dan klo class .nama_class

Contoh mba mau buat widget populer post jd tinggal ganti #HTML7 dengan id widget populer postnya....

Balas

mantap nih, saya belum berhasil.
kunjungi balik ya
ilmudes.blogspot.com

Balas

Keren nih postnya bermanfaat
Kunjungi ya
http://own-mycreation.blogspot.com

Balas

Poskan Komentar


×
Chat