Cara Membuat Back To Top Dengan Efek Bounce Keren
Terus Masuk ke menu Template, Centang Expand Template Widget, Cari Kode </head>
Kemudian Copy dan paste kdoe berikut ini Di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/><script type='text/javascript'>$(function() { $(window).scroll(function() { if($(this).scrollTop() > 100) { $('#HermanbagusTop').fadeIn(); } else { $('#HermanbagusTop').fadeOut(); } });
$('#HermanbagusTop > img').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });</script>
Kemudian Simpan.
Langkah Kedua, Masuk ke Menu Tata letak, Tambahkan Gadget, Html / Javascript.
Copy dan paste kode berikut pada menu Html/ Java script.
<style>
#HermanbagusTop { text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none;}
</style>
<div id='HermanbagusTop'><img src='http://4.bp.blogspot.com/-N1yMiMKul_s/UN_riEUlSUI/AAAAAAAAHN0/1wBpCdmxQmA/s150/back+to+top+hermanbagus.png' style='margin-right:-9px'/></div>
Kemudian Simpan dan Lihat Hasilnya, selamat mencoba dan berkreasi :)
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/><script type='text/javascript'>$(function() { $(window).scroll(function() { if($(this).scrollTop() > 100) { $('#HermanbagusTop').fadeIn(); } else { $('#HermanbagusTop').fadeOut(); } });
$('#HermanbagusTop > img').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });</script>
Kemudian Simpan.
Langkah Kedua, Masuk ke Menu Tata letak, Tambahkan Gadget, Html / Javascript.
Copy dan paste kode berikut pada menu Html/ Java script.
<style>
#HermanbagusTop { text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none;}
</style>
<div id='HermanbagusTop'><img src='http://4.bp.blogspot.com/-N1yMiMKul_s/UN_riEUlSUI/AAAAAAAAHN0/1wBpCdmxQmA/s150/back+to+top+hermanbagus.png' style='margin-right:-9px'/></div>
Kemudian Simpan dan Lihat Hasilnya, selamat mencoba dan berkreasi :)
Kereen mas :)
BalasHapusmakasih sobat.
Hapusmakasih gan infonya. dengan script itu ane jadi bisa belajar tentang scrolling, fade in ama fadeout. selamat tahun baru 2013 gan, semoga sukses di tahun yang baru ini. Happy blogging and keep posting :)
BalasHapusAmin, sama sama dan terimakasih sobat.
HapusMakasih atas info.a bang...
BalasHapusSama sama sobat.
HapusWoww.. Keren efeknya sob..
BalasHapusmakasih sobatt.
Hapuswuih keren,,,da gaya 69 juga disini,,,
BalasHapushehe iya sob, makasih ya
Hapuswih mantap nii sob.. apalagi sambil gesek atas bawah.. :176
BalasHapushaha oke sob makasih
HapusPERTAMAX :105
BalasHapusmahal sob hehe
HapusHehehe....
Hapusbisa dicoba sob :)
Sebetulnya untuk blog AdityaReinaldo apakah back to top ini bisa membuat berat blog AdityaReinaldo?
BalasHapusSepertinya tidak kok sob :)
Hapustampian nya serasa baru lagi nih, keren... :D
BalasHapusmaf ya baru mampir lagi, kemarin sibuk :)
tugas beres :)
hehe iya gpp dee, makasih ya
Hapusfollow sukses..followbeckkk ya gan ^_^
BalasHapusOk sobat :)
Hapusscribnya keren sob ada tulisan HermanBagusTop, cara promosi level tinggi tuh
BalasHapushahaha tau aja sob :104
Hapustambah lagi ilmu ane, makasih ga. Ditunggu kunjungan baliknya :D
BalasHapusOk sama sma sob, ke tkp
Hapusmakasih udah ke tkp ;)
HapusIzin share, tapi back to top button di post saya,gambarnya boleh dibedain ya.
BalasHapusoke sob
Hapusmantab sob,,tugas mantab jg sob
BalasHapusok sob, makasih ya
HapusIni seperti yg diterapin di blog ente ya sob?
BalasHapuskeren2
huuh sob, makasih makasih :)
Hapusehh tanya nh..
BalasHapus1. pada #HermanbagusTop {text-align:center;... untuk apa text-align:center itu pada tombol back to top ?
sebenarnya tidak untuk apa apa sih sob, lupa belum ke hapus :P
Hapusmantap nih,, efek nya makin menarik jadinya
BalasHapushehe iya sob
Hapuswah keren sobat, ijin simpan dulu dech....?
BalasHapusok sobat, makasih ya
HapusHappy new year Bro,,BTW ijin nyonontek yah ( niru ) boleh doonk hehehe,,,Terimakasih Bro,,
BalasHapushehe boleh dong sob :)
Hapushahaha, naiknya isi mantul, hahaha, mantep bro :101
BalasHapushaha yoi sob :)
Hapusabbsen sebelum tidur sob :107 :104
BalasHapuswaduh tumben jam segitu uda tidur sob?
HapusSaya udah menggunakannya. hehhee.. :)
BalasHapusTugas beres disini sob.. :105
hehe sipdah sob , ok makasih sob
Hapuskeren banget blognya gan.. mau follow achh.. follow back ane ya gan ?
BalasHapusOke sobat, ke tkp :)
Hapusmakasih sobat ,info yang sangat menarik neh ..boleh dicoba kan ? jangan lupa mampir ya ..
BalasHapushaha iya sob silahkan di coba
Hapuspertamak gan
BalasHapuskujungan bang lama tak kesini
hehe iya sob, makasih ya
Hapusoh, begituan harus pake js ya gan?
BalasHapushuuh sob, yang biasa juga ada kok :)
Hapuswhhh oke juga nih bang...
BalasHapusoya udah oke nih keyframenya....
hehe iya sob makasih ya
Hapuskeren kaya punya abang yang di pojok ini bang, yang pake senyum, mau dong,hehe
BalasHapushehe iya yang itu sob :)
HapusTutor yg bermanfaat sobat :119
BalasHapuswah makin sangar saja nih sob :105
BalasHapuskeren :)
btw tuluangagungnya mana nih?
hehe iya sob :) makasih sob . PM aja deh sob :)
HapusManteb sob, jadi lebih bervariasi nih.
BalasHapushehe iya sob
Hapusartikel yang sangat bermanfaat sob
BalasHapusthanks atas infonya soob :D
ditunggu kunjungan baliknya yaa :D
ok sob makasih ya
Hapusnice share sob thanks..
BalasHapusok sama sama sob
Hapus