Rabu, 18 April 2012

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:
Kodenya Gan:
<!-- 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:
Kodenya Gan:
<div id='gotop'> <a href='#top' title='Go to Top'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmbmCo5_pwQWjwE5NJqVNuMZQL-7foCuRtbUT4jWASRf8-FygJTS0_rLOqL59Hd-N6RrYJXzu2CE73LzMDLvouc9GAWBglz0zDm_TT8D3Zh8iTGkBTxvv_YtJtawN2g-XHAMKvoPVyGU4/s400/arrow1-blue-32.png' style='right:20px;bottom:20px;position:fixed'/> </a> </div>
Keterangan:
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmbmCo5_pwQWjwE5NJqVNuMZQL-7foCuRtbUT4jWASRf8-FygJTS0_rLOqL59Hd-N6RrYJXzu2CE73LzMDLvouc9GAWBglz0zDm_TT8D3Zh8iTGkBTxvv_YtJtawN2g-XHAMKvoPVyGU4/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.
Diposting oleh di 04.22

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
HOT NEWS

Welcome In Kode Blogger

Contoh Sliding Login Dengan JQuery

Disamping ini adalah contoh Sliding Login menggunakan JQuery. Login Form Disamping hanya Contoh dan tidak dapat digunakan layaknya Login Form FB, Karena Blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member

Tutorial Blog

Untuk membuatnya Silahkan : Klik Disini

Member Login

Lost your password?

Not a member yet? Sign Up!