Cara Membuat Back To Top Dengan JQuery

Kali ini saya akan memberikan tips tentang Cara Membuat Back To Top Dengan JQuery, Back to top merupakan aplikasi (widget) untuk ditempatkan di dalam sebuah blog dan sepertinya saat ini tidak asing lagi di telinga para sobat blogger.

Buat sobat blogger yg berminat, silahkan ikuti langkah di bawah ini :

1. Login Blogger
2. Setelah di dasbor, pilih Rancangan.
3. Pilih edit Html.
4. Cari kode , utk mempercepat pencarian tekan tombol Ctrl + F.
5. Copy paste kode berikut ini, diatas kode tadi.

<!-- SCROLLING BACK-TO-TOP -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><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 -->

6. Setelah itu cari kode , lalu tambahkan kode id='top' ke dalam  kode sehingga kodenya akan seperti ini >> .
7.  Selanjutnya cari kode dan copy paste kode di bawah ini di atas kode  .

<div id='gotop'>
<a href='#top' title='Go to Top'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpSkkcyJwtVbpo8ahlzYyyWWU2SW9etUO7QYJ02SwP5eZsiUCTSwVkt6-DTbV0f_Z3m5appI_hhzoSuBs4dzsQpQfs_7XIZRbKqHQqWYIKsej7t2ajRtECLAx6zf_YYS8oVJ27XG6BmA8/s400/arrow1-blue-32.png' style='right:20px;bottom:20px';position:fixed'/>
</a>
</div>

8. Simpan template dan lihat hasilnya.

Keterangan :
* https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpSkkcyJwtVbpo8ahlzYyyWWU2SW9etUO7QYJ02SwP5eZsiUCTSwVkt6-DTbV0f_Z3m5appI_hhzoSuBs4dzsQpQfs_7XIZRbKqHQqWYIKsej7t2ajRtECLAx6zf_YYS8oVJ27XG6BmA8/s400/arrow1-blue-32.png >> URL Gambar.
* right:20px;bottom:20px; >> Posisi gambar pd template 20px dari bawah dan kanan.
* Untuk gambarnya bisa download disini >>  Download
* Untuk mendownload anda akan diarahkan ke adf.ly. Tunggu 5 detik dan klik LEWATI di pojok kanan atas. Jika belum mengerti silahkan klik ini >>  DiSini