Gratis berlangganan artikel Zykry via mail, join sekarang!

Sunday, March 21, 2010

Cara Membuat Back to Top Dengan jQuery



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.

Related Post:

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di zykry-trick.blogspot.com
Thx to :
Jangan lupa add facebook Zykry Dark
print this page Print this page
Cara Membuat Back to Top Dengan jQuerySocialTwist Tell-a-Friend

Comments :

5 comments to “Cara Membuat Back to Top Dengan jQuery”

mulyana post said...
on 

bang cara masukin gambarnya biar gambar yang saya pilih gimna ya bang maih blom ngrti ni bang,,,maklum masih baru bang jadi bnyk nanya dah ,,hee pleas ya bang,,

Zykry Dark Aka Hacker Boyz said...
on 

@mulyana post
Gambar gmn ya?klo mw ganti gbr cri aja di google key "arrow"/"up"..

Nikmaya John said...
on 

Mantapp tips buat back to topnya,,,,

meja kantor said...
on 

mantap tipsnya.. dan blognya keren bgt

sera sehat ramping said...
on 

menarik dan bagus langsung coba saja


Apa pendapat anda?

No spam and no porn yaw!!

Widget By Devils Workshop

Guest Book

Iklan

Pasang iklan anda di Zykry-trick hanya Rp.15.000 /bulan Hubungi : 087 823 177 355 - 085 759 277 896 Facebook : Zykry@programmer.net
 
twitter

Tukeran Link

Tips Dan Trick Blogging

U follow I follow

Statistik


free counters
broadband speed test
Current Events & News Blogs - Blog Rankings Blog Directory
Internet Blogs Web Design & CSS (Graphics) - TOP.ORG
Blogging Blogs - Blog Catalog Blog Directory Online Marketing - OnToplist.com
Web design blogs
The Republic of Indonesian Blogger | Garuda di Dadaku
Top 10 Award