8/22/2014

Membuat Tombol Back To Top Dengan Efek Bounce

Membuat Tombol Back To Top Dengan Efek Bounce
RAdown - Teman-teman pernah liat tombol Back To Top..?? Oke I Show You Man. Coba teman-teman klik 1 Artikel di blog saya dan Scroll ke bawah. Pasti teman-teman melihat tombol kan...Naahh itu yang di namakan tombol Back To Top
Kali ini saya ingin berbagi Bagaimana Cara Membuat Tombol Back To Top. Selain untuk mempercantik blog, Untuk Mempermudahkan Visitor juga Friends. Supaya Tidak Scroll Scroll ke atas lagi. Oke langsung saja yaa Friends. Ikuti cara saya....

1. Login ke akun blogger
2. Klik "template"
3. Klik "Edit Html"
4. Cari kode </head>
Letakan kode dibawah ini pastekan di atas kode </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js'/>
Nb: Lewati langkah ini jika template blog temen-temen sudah terpasang jquery.Versi jquery bisa berbeda 1.3.2, 1.6.4, 1.7.1,dan seterusnya...
5. Buat widget baru pilih HTML/Javascript lalu simpan kode dibawah ini:
<style type='text/css' scoped='scoped'>#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}</style><div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjByilTJgEtMHPZX6p1HhPl3Ci2goJiIsQD2PKkGbSUtOTMDkJEwAi8yFi0f9-IPmY7ahXmHCmMw2qT12ujM6RcfffCFoGRJVYa_4IhScHSiqm4sIgDAx4ymddCgPwE4ZvvaddyvTVRPNH7/s1600/arrow-up_basic_blue.png'/></div>
Untuk mengganti gambar bisa diganti tulisan yang bewarna merah.
6. Save dan Selesai Friends. 

Cukup Mudah kan. Jika bingung, Coret-coret saja di bawah yaa. 

No comments:

Post a Comment