Menambahkan Back to Top di Blog

Sekarang Hafiz Blog menyediakan tutorial menambahkan Back to Top di Blog

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>

HTML Code 1 :

<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>

Letakkan teks atau kode script (gambar atau video) di sini

5.Lalu Simpan Template, Ke menu Tata Letak.
6.Tambah Gadget, HTML/JavaScript
7.Masukan Script Dibawah

HTML Code 2 : 

<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>

Letakkan teks atau kode script (gambar atau video) di sini

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

=Selamat Mencoba=

sumber : http://mcigreget.blogspot.com