TopBottom

Blog Tutorial

About Me

Add your donation here for a better of our service. Thanks!

Berlangganan

Anda Suka Tips Blogger Zacky?
Temukan Kami Di:
Ingin Dapat Artikel Terbaru?
rss Klik disini untuk berlangganan melalui RSS atau terima artikel di email anda dengan cara mengisi form berikut:

Cara Membuat Back to Top Dengan jQuery

Original by IFX Adrian | 01 Februari 2010 26 Comments

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(){
$(&#39;a[href*=#top]&#39;).click(function() {
if (location.pathname.replace(/^\//,&#39;&#39;) == this.pathname.replace(/^\//,&#39;&#39;)
&amp;&amp; location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length &amp;&amp; $target || $(&#39;[name=&#39; + this.hash.slice(1) +&#39;]&#39;);
if ($target.length) {
var targetOffset = $target.offset().top;
$(&#39;html,body&#39;).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='http://4.bp.blogspot.com/_Z_KyM3IvEFQ/S2bGsbtW-vI/AAAAAAAABCA/sXmxVJTXnvI/s400/arrow1-blue-32.png' style='right:20px;bottom:20px;position:fixed'/>
</a>
</div>



Keterangan:
- http://4.bp.blogspot.com/_Z_KyM3IvEFQ/S2bGsbtW-vI/AAAAAAAABCA/sXmxVJTXnvI/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!

<a href="http://instaforex.com/forexcopy_system.php?x=DVXF">InstaForex</a>
Facebook Delicious Digg! Twitter Linkedin StumbleUpon Lintas Berita
Technorati Google Bookmarks Mixx Yahoo! Newsvine Reddit

Artikel Lain Yang Mungkin Anda Baca

26 komentar:

setting gprs 2 Februari 2010 13.48  

pertamax....o jadi bedanya dengan yang aku punya..pergerakannya lebih lembut ya...

Link Tea 4 Februari 2010 01.01  

ooh gtu toh caranya.. banyak juga kodenya

Zacky Adrishayuni 4 Februari 2010 01.10  

@Link Tea: Ya... Tapi kodenya simpel kok... coba aja dulu... kamu ada id YM gak?

Kintaro kazami 4 Februari 2010 12.17  

oke mas, nice inpo ;) tapi yangjadi p[ertanyyan adalah gimana caranya biar kayakpunya mas zacky, bisa naik dan turun, trima kasih

Zacky Adrishayuni 4 Februari 2010 16.26  

@Kintaro kazami: Back to top yang saya pakai dasarnya ada disini. Silahkan baca....

fikz 5 Februari 2010 15.37  

mantap nih..dri kmarin pngen punya yg kyak gini he he
maklum newbie

Link Tea 6 Februari 2010 16.27  

Mampir lagi sob.. tuk baca2 artikel yg keren2

Anonim 22 Februari 2010 00.47  

keren GAN!! :)

Ra_One 1 April 2010 16.29  

Mantap kak, makasi kode yg ini sangat berhasil... :D
sudah saya praktekkan di blog saya :
http://sharingcomnies.blogspot.com/

keren2/... :))

Septian 5 April 2010 12.46  

Thx mas! Langsung praktek dah :P

Van De Lok's WellArt ( Full Album Mp3 + Softwere + Photoshop + Serial Number + Ebook + Mobile, All Free Download ) 23 April 2010 14.57  

Terima kasih untuk tipsnya, sudah saya coba dan hasilnya bagus..sekali lagi saya ucapkan terima kasih.

Propolis dari Langit 30 Mei 2010 02.37  

maksih gan infonya!!!
barangkali agan kurang sehat kunjungi blog kesehatanya!!!
http://dasyat-mni.blogspot.com

Gie Morello 1 Agustus 2010 04.53  

Nais inpo gan....!!!! :D :)) :-* ;)

fajarnoverdi 12 November 2010 01.57  

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.

artikel menarik 20 Desember 2010 21.14  

nice info sob!!! sudah kupraktekkan dan berhasil...silakan agan mampir di blogku...salam blogger manajubelz ^_^

Admin 25 April 2011 00.18  

http://js-rezdown7.googlecode.com/files/rezdownbacktotop.js

tambahkan di gadget ja. lebih simpel bro.

Ana Yulistriana 9 Mei 2011 17.43  

http://ana-ila.blogspot.com

http://n0-freak.blogspot.com/ 17 Juni 2011 13.23  

mantaf kka .

visit me : http://n0-freak.blogspot.com/

Niken Yolanda 23 Agustus 2011 17.06  

trus kl yg buat go to down yg pke jquery ad ga?

katakan hey 6 Desember 2011 04.07  

tahanks infonya. meluncur k tkp.

onidz28 7 Januari 2012 01.16  

Wahh bagusss. . . . :))

sherlina halim 15 Oktober 2015 02.19  

Pengen yang lebih seru ...
Ayo kunjungi www.asianbet77.com
Buktikan sendiri ..

Real Play = Real Money

- Bonus Promo Red Card pertandingan manapun .
- Bonus Mixparlay .
- Bonus Tangkasnet setiap hari .
- New Produk Sabung Ayam ( minimal bet sangat ringan ) .
- Referal 5 + 1 % ( seumur hidup ) .
- Cash Back up to 10 % .
- Bonus Royalty Rewards setiap bulan .

Untuk Informasi lebih jelasnya silahkan hubungi CS kami :
- YM : op1_asianbet77@yahoo.com
- EMAIL : melasian77cs@gmail.com
- WHATSAPP : +63 905 213 7234
- WECHAT : asianbet_77
- SMS CENTER : +63 905 209 8162
- PIN BB : 2B4BB06A / 28339A41

Salam Admin ,
asianbet77.com

Download Disini

Posting Komentar