Home
Tukaran Link
Pasang Iklan
Contact Me
Cara Membuat Back to Top Dengan jQuery
Hy semuanya... Masih ingat cara membuat tombol back to top yang telah saya posting dulu? Gimana? Apa anda sudah menggunakannya? Jika sudah atau pun belum, sekarang anda harus baca tips ini dengan baik karena cara membuat back to top kali ini menggunakan jQuery. Di trik lama, gerak back to top yang dihasilkan sangat cepat dan langsung menuju ke atas. Lain halnya dengan jika kita memberi sedikit sentuhan scipt jQuery. Gerak yang dihasilkan akan lebih perlahan dan lembut.
Berikut Cara Membuat Smoothscroll Go to Top
1. Login ke akun Blogger anda
2. Pilih Layout > Edit HTML
3. Cari kode </head>, lalu paste kode berikut di atasnya:
<!-- SCROLLING BACK-TO-TOP -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <!-- jika di template anda sudah terdapat script jQuery 1.3.2, maka anda tidak perlu lagi menambahkan kode ini -->
<script type='text/javascript'>
$(function(){
$('a[href*=#top]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
</script>
<!-- SCROLLING BACK-TO-TOP END -->
4. Cari kode <body>, lalu masukkan atribut id='top' ke dalam tag <body>, maka hasilnya akan seperti <body id='top'>
5. Selanjutnya, cari kode </body> dan paste kode berikut di atasnya:
<div id='gotop'>
<a href='#top' title='Go to Top'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVSCXu8K9_pObOFA25Po0-e9OIoNofYZOW1LwnsLgtX8wDuEMtYeI6nxBW63nYg0PLmwndMPC2iblcqUb4FvQVXbFmmirmf-Sx2OxJMpQm-whfsMpUC3Dc5sA4nC6AsDmxHawy_sVrOjQ/s400/arrow1-blue-32.png' style='right:20px;bottom:20px;position:fixed'/>
</a>
</div>
Keterangan:
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVSCXu8K9_pObOFA25Po0-e9OIoNofYZOW1LwnsLgtX8wDuEMtYeI6nxBW63nYg0PLmwndMPC2iblcqUb4FvQVXbFmmirmf-Sx2OxJMpQm-whfsMpUC3Dc5sA4nC6AsDmxHawy_sVrOjQ/s400/arrow1-blue-32.png > url gambar
- right:20px; bottom:20px; > posisi gambar pada template adalah 20 pixel dari bawah dan kanan.
info: untuk gambar / tombolnya bisa anda download disini.
6. Terakhir, klik Save Template.
Untuk demonya bisa anda lihat disini.
Sedikit pemberitahuan, untuk kedepannya saya masih akan menyediakan tips tentang fungsi jQuery untuk Blogger. Jadi jangan lupa untuk berlangganan dengan Tips Blogger Zacky, ok?
Bagikan Artikel Ini!
:))
:)]
;))
;;)
:D
;)
:p
:((
:)
:(
:X
=((
:-o
:-/
:-*
:|
8-}
~x(
:-t
b-(
:-L
x(
=))
25 komentar:
pertamax....o jadi bedanya dengan yang aku punya..pergerakannya lebih lembut ya...
ooh gtu toh caranya.. banyak juga kodenya
@Link Tea: Ya... Tapi kodenya simpel kok... coba aja dulu... kamu ada id YM gak?
oke mas, nice inpo ;) tapi yangjadi p[ertanyyan adalah gimana caranya biar kayakpunya mas zacky, bisa naik dan turun, trima kasih
@Kintaro kazami: Back to top yang saya pakai dasarnya ada disini. Silahkan baca....
mantap nih..dri kmarin pngen punya yg kyak gini he he
maklum newbie
Mampir lagi sob.. tuk baca2 artikel yg keren2
keren GAN!! :)
Mantap kak, makasi kode yg ini sangat berhasil... :D
sudah saya praktekkan di blog saya :
http://sharingcomnies.blogspot.com/
keren2/... :))
Thx mas! Langsung praktek dah :P
Terima kasih untuk tipsnya, sudah saya coba dan hasilnya bagus..sekali lagi saya ucapkan terima kasih.
maksih gan infonya!!!
barangkali agan kurang sehat kunjungi blog kesehatanya!!!
http://dasyat-mni.blogspot.com
Nais inpo gan....!!!! :D :)) :-* ;)
broo mw nanya...yg d link sponsor tu
kepalanya wrna biru ad lengkungnya tu apa nmanya..
cz aq mw design itunya tpi g tw nmanya.
nice info sob!!! sudah kupraktekkan dan berhasil...silakan agan mampir di blogku...salam blogger manajubelz ^_^
http://js-rezdown7.googlecode.com/files/rezdownbacktotop.js
tambahkan di gadget ja. lebih simpel bro.
http://ana-ila.blogspot.com
mantaf kka .
visit me : http://n0-freak.blogspot.com/
berhasil, thanks kwan :)
trus kl yg buat go to down yg pke jquery ad ga?
Thanks...mantab
keren artikelnya ...
tahanks infonya. meluncur k tkp.
Wahh bagusss. . . . :))
wah infonya maknyus..