Membuat Sticky Widget Effect Bounce di Sidebar
http://nandarious.blogspot.com/2013/08/membuat-sticky-widget-effect-bounce-di.html?m=1
Assalamu'alaikum..
Mungkin sahabat blogger sudah tahu apa itu Sticky Widget. Menurut blognya Kang Ismet dalam istilah website, Sticky berarti berada didepan atau selalu mengikuti walaupun mouse terus di scroll. Sedangkan Sticky Widget Sidebar berarti sebuah widget yang selalu menempel atau bisa juga widget yang mengikuti walaupun mouse terus di scroll (sama saja). Disini saya hanya akan memberikan javascriptnya saja, untuk pemasangannya bisa diatur sendiri. Ooh iya, Sticky Widget ini berbeda dari sebelumnya, yaitu dengan Effect Bounce yang contohnya bisa lihat di sidebar saya ini.
Mungkin sahabat blogger sudah tahu apa itu Sticky Widget. Menurut blognya Kang Ismet dalam istilah website, Sticky berarti berada didepan atau selalu mengikuti walaupun mouse terus di scroll. Sedangkan Sticky Widget Sidebar berarti sebuah widget yang selalu menempel atau bisa juga widget yang mengikuti walaupun mouse terus di scroll (sama saja). Disini saya hanya akan memberikan javascriptnya saja, untuk pemasangannya bisa diatur sendiri. Ooh iya, Sticky Widget ini berbeda dari sebelumnya, yaitu dengan Effect Bounce yang contohnya bisa lihat di sidebar saya ini.
JavaScript Sticky Widget Effect Bounce
Tambahkan kode ini sebelum
</body>
<script type='text/javascript'> $(function(){var offset=$('#kanan-box').offset();var topPadding=100;$(window).scroll(function(){if($(window).scrollTop()>offset.top){$('#kanan-box').stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding})}else{$('#kanan-box').stop().animate({marginTop:0})}})}); </script>
Editing Script
Ganti
Semoga Bermanfaat.
#kanan-box
menjadi ID widget anda.Semoga Bermanfaat.
waw...
ReplyDeletekapan-kapan saya akan mencobanya ya gan :D
boleh deh :)
Deletesilakan di bungkus saja
Deletebrapa bungkus? :D
DeleteWS pesan 2 bungkus ya mas hehhe
Deletewkwkw ga lebih aja gan?
Deletekebanyakan nanti yang lain nggak kebagian wkwkwkw
Deletewah pengen juga mas? :D wkwkw
Deletelucu juga ya mas kalau menyesuaikan letak halamanya.
ReplyDeleteboleh lah di jadikan referensi buat teman-teman.sementara blog saya biar saja apa adanya eh ada apanya, lha wong blog polosan e mas..hehehe
hahaha :D bisa aja :)
Deleteiya bagus mas :))
biasalah mas nandar, mas agus itu sukanya merendah...
Deleteiya daripada meninggi ya :D wkwkw
Deletedua dua nya namanya agus fotonya juga hampir sama background nya merah dan memakai jas. ini suatu keajaiban dunia :-) :>)
Deletehahaha bener banget bri :p
Deletebukannya tambah bikin ribet yg datang ke blog kita?
ReplyDeletewah kata siapa mas?
DeleteBenar-benar keren. Seperti di blognya Kang Ismet :)
ReplyDeletenanti saya akna coba gan kalau saya sudah berganti template :D
ok
Deletekeren mas.
ReplyDeletemakasih gan :)
Deleteefeknya lebih bagus ya, gak sama seperti tutorial dari kang ismet. agak ribet hehehe
ReplyDeletemakasih mbak :)
Deletehehe benar kok... ^_^
Deleteiya :)
DeleteTapi kadang mengganggu pemandangan sang pembacanya. terimakasih atas sharing ilmunya. Salam sukses selalu.
ReplyDeletetergantung selera sih :)
Deletenah, mksd saya juga spt yg mas Djangkaru bilang...
Deleteowh gitu ya.. :)
Deletehehe dah berhasil nih saya terapkan di blog saya, makasih ya ^_^
ReplyDeleteoke deh :)
Deletekalau kasih id #sidebar semua nya ngikut ya?
ReplyDeletekalau google adsense di kasih gitu melanggar TOS gak ya?
1 aja gan..
Deletengga juga..
ko ane ga jdi mas?
ReplyDeletemksdnya diganti dengan ID WIDGET itu apa mas?
Otak atik aja gan :)
Deleteoo itu too namanya sticky widget...
ReplyDeletesy kira tutor macam begituan namanya bukan sticky... hehe
iya gan :)
Deletekalo pake class widget bisa kan??
Deletebisa gan..
Deletesip mas :))
ReplyDeleteok ok :)
Deletegan coba liat blog ane id ane apa ya? ;)
ReplyDeletegimana cara nambah id elemen lagi di sidebar?
buat element khusus sticky gimana? dibantu gan :D
Deletecontoh punya saya
Delete<div id='kanan-box'>
<div class='face-box'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fnandarious&width=292&height=258&show_faces=true&colorscheme=dark&stream=false&show_border=false&header=false' style='border:none; overflow:hidden; width:285px; height:240px;margin-left: -4px;'/></div></div>
lihat diatas
Deletewah, jadi kepikiran bikin sesuatu nih..
ReplyDeletetempalte blog ini dapat inspirasi dari blog kang ismet juga ya?
kepikiran apa gan ?
Deletengga juga..
jozz gandos bung hahahay
ReplyDeleteUdah lama ga jalan2 kesini, tambah keren aja blognya :)
ReplyDeletehehe bagusan blog nya kang ismet :)
DeleteKeren mas .. :D
ReplyDeleteok :)
DeleteMantap mas.
ReplyDeletetp untuk saat ini saya belum tertarik untuk memasangnya, takut kalo tambah berat loadingnya :D
ok gan.. gmana selera aja..
Deletecara buat sticky post sama ya gan caranya? soalnya banyyak tuh saya lihat blog nampilin sticky posting, postingannya selalu di urutan pertama
ReplyDeletewah saya kurang ngerti kalo begituan mas :)
DeleteOkee mantap,berhasil sob.. mksh yh !!
ReplyDeletesama2 gan :)
DeleteSip gan... :>)
Deleteok deh..
DeleteNice INFO gan :)
ReplyDeleteVisit back ya gan :d
www.agiel13.com
KEEP SMILE ƪ(˘⌣˘)┐ ƪ(˘⌣˘)ʃ ┌(˘⌣˘)ʃ
segera mluncur..
Deletewah aku malah baru tau tuh namanya . hahhahahaha ..
ReplyDeletesiaap siiaapp simpen dlu aja yah :D
ok deh :)
Deletewah ini yang kayak punya mas nandar yah ;) keren2 sob
ReplyDeletebukan 'kayak' :D wkwkwkw emang sama
Deleteok gan..
ReplyDeletenice sharing bro..makasih
ReplyDeleteoke deh :)
Deletekok agak kasar gan widget ini. kurang halus.
ReplyDeleteemang begitu gan... tergantung selera aja..
Deletekunjungan balik aja.... ama nyimak nih widget.....
ReplyDeleteok
DeleteSaya Nyimak Aja Dah Karna Blognya Saya Nggak Pake Sidebar :p :p :p ,Kok Link Saya Blog Saya Belum Dipasang Sob?
ReplyDeletebentar sob, saya lagi edit2 css nya..
DeleteOke Sip Dah :D :D :D
Deletesudah terpasang..
DeleteAda Sedikit kesalahan Sob :D,Tulisannya Mand4rt Blog Saja :D
Deleteoke segera dibenahi
Deleteapa gak mengganggu nantinya?
ReplyDeletetergantung selera!
Deletearrrrg masih bingung? :( bantu nemuin id saya sama pemasangan gan,,
ReplyDeletehelep dong T,T
Deleteemang mau masang apa'an gan?
Deletemasang google folowers sama dibawah nya ada folow twitter gan gimana minta kode scrip nya dong gan :D
Deletecari aja digoogle gan..
Deletedisini aja gan udah terlanjur,bisa bantu gk :(
Deleteyaudh tambah aja gadget nya..
Deleteya udah gan gpp,makasih ya :D
DeleteOkelah ini keren sob,tak coba nanti yah, masih bingung sih widget apa yang mau dibikin ginian hehe..
ReplyDeletekeren sob trmksih infonya sobat
ReplyDeleteKeren mas..lain waktu patut di coba nih :)
ReplyDeletesilahkan :D
Deletetuh udah dijawab..
Deletebelajar disini, aplikatif dan keren..thanks
ReplyDeletethanks juga gan..
DeleteAdminnya quick respond gan. :D Mantep deh pokoknya. :D
Deletehehehe bisa aja :) makasih gan...
Deleteijin nyimak dulu :)
ReplyDeletemakasih sharenya :)
oke gan.. sama2 :)
Deletekeren2 gan (h), boleh juga ni gan buat template bru ane nnti.
ReplyDelete#mohon maaf ane jarang kesini gan karna ada sedikit kesibukan.
template barunya Joss gan, oiya ini ane pake monitor 1280x1024 nah kalau ane pake ukuran 1024x768 tampilannya numpuk2 dan agak kacau gimana tu gan :D
thanks gan..
Deleteoke gpp...
owh iya itu gara2 tes responsive.. skrg bener ga?
kyknya belum responsive tu gan.
Deletemasih ada scroll kalo di halaman item, nah klo di halaman depan memang gada scroll cmn bentrok menu yg dikiri sama daftar postingannya gan, trus widget top komentnya juga nyatu gan :D
jadinya susah diklik postingannya gan.
cba disembunyikan aja pada ukuran mnitor kecil gan
iya sama saya ngga diresponsive'in..
Deletekirim ss nya aja gan :)
nanti malem lah gan saya SS..
Deleteoiya btw masukin gambar dikomeng gimna? :D
[img] link gambar [img]
DeleteWah telat datang aku, ternyata sudah ramai disini, ijin nyimak dulu ya kak ?
ReplyDeleteoke gpp mbak :)
Deletekeren
ReplyDeletethanks mbak..
Deleteane mampir gan,ada artikel baru di blog ane mampir yah :p
ReplyDeletehttp://bmaster23.blogspot.com/2013/08/baidu-browser-android-browser-cepat.html
oke gan segera meluncur :)
DeleteNice mas.. maaf telat... Ga ada waktu..
ReplyDeletecenter60.com
oke gpp..
Deletebri aku butuh bantuanmu..
Ok mas
Deletesipp :)
Deletecomment back mas nandar diblog saya :)
ReplyDeletesiap, segera meluncur :)
Deletemas kalo tampilan komentarnya sperti blog mas ini pake comment hack bukan yaa ??
Deletetutorialnya darimana yah mas ?? :)
ReplyDeletengga ada tutorialnya..
Deletewih keren nih
ReplyDeletethanks gan..
Deleteternyata selama ini aku salah follow blognya...,,
ReplyDeletepantesan gak pernah muncul di dashboard-ku.. :P
skrg udah dibenerin,,,
hehehe..
maaf yaaa....??
wah pantesan :p oke deh gpp mbak..
Deletekeren, tapi masih polosan blog saya... polosan ja udah berat. makasih infonya, tar kalo minat saya comot lah...
ReplyDeleteterimakasih sudah berkunjung.
saya follow blognya. oh ya cool banget blognya!
http://ulimayang.blogspot.com
oke mbak :)
Deletewah seharusnya saya yg harus berkunjung :)
oke, makasih mbak..
hehehe ok gan..
ReplyDeleteooh jadi widget yang terus mengikuti layar yah? sama seperti yang ada disebelah kanan ini kan? ^_^
ReplyDeleteiya gan :)
Deletekayak ekor yg ngikut terus hehe.., makasih :>)
ReplyDeletehahaha iya gan :D
Deletegan mampir yah keblog saya hehehe :D
ReplyDeleteada postingan baru :p
http://bmaster23.blogspot.com/
ok gan :D maaf jarang mampir, lagi sibuk nih..
Deleteseperti di blog ini ya mas, wah keren banget (h)
ReplyDeletesekalian salam kenal ya mas, kunjungan perdana ini, hehe
Blognya juga keren :)
ehehe makasih gan :)
Deletesipp deh
sama2 :)
ReplyDeletewah perlu di cuba nie
ReplyDeleteboleh gan :)
Deleteperlu dicoaba ni gan :)
ReplyDeletethanks :)
comeback
sippp deh :)
Deleteiya bener banget ;(
ReplyDeletecoba aja gan ;)
ReplyDeletethanks gan ;)
ReplyDeletewow ada foto ane gan disitu hehe...
ReplyDeleteokelah kapan2 dicoba
wah ngga sengaja itu gan :D selamat ya :p wkwkw
Deletesipp sipp
Berhasil mas saya coba, makasih ya
ReplyDelete