Cara Membuat Tombol Back To Top Button

Seperti diatas lah tampilan back to top button yang akan saya post.

Langsung saja:

1. Login blogger

2.Template >> Edit HTML . Centang Expand Template Widget

3.Cari Kode </head>

4.Copy dan pastekan script dibawah diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/><script type='text/javascript'>$(function() { $(window).scroll(function() { if($(this).scrollTop() &gt; 100) { $(&#39;#ElitesRunTop&#39;).fadeIn(); } else { $(&#39;#ElitesRunTop&#39;).fadeOut(); } });

$(&#39;#ElitesRunTop&gt; img&#39;).click(function() { $(&#39;body,html&#39;).animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });</script>

5.Lalu Simpan Template, Ke menu Tata Letak.

6.Tambah Gadget, HTML/JavaScript

7.Masukan Script Dibawah

<style>
#ElitesRunTop { text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none;}
</style>
<div id='ElitesRunTop'><img src='http://relay.acsevents.org/images/content/pagebuilder/back_to_top_button_purple.png' style='margin-right:-9px'/></div>

Simpan dan liat hasilnya.

Jika mau gambar yang lain tinggal ganti URL
http://relay.acsevents.org/images/content/pagebuilder/back_to_top_button_purple.png
menjadi URL Gambar Anda

Contoh Gambar Lain:

1. Blue Button


Scriptnya:


<style>
#ElitesRunTop { text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none;}
</style>
<div id='ElitesRunTop'><img src='http://www.kidspot.com.au/babyclub/product-information/images/back_to_top_button_blue.png' style='margin-right:-9px'/></div>

2. Red Button




Scriptnya:

<style>
#ElitesRunTop { text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none;}
</style>
<div id='ElitesRunTop'><img src='https://www.dmwcc.com/Portals/0/buttons/BackToTopButton.gif' style='margin-right:-9px'/></div>



(Sumber: http://hermanbagus.blogspot.com/2013/01/cara-membuat-back-to-top-dengan-efek.html
dengan perubahan yang perlu)