Cara Membuat Tombol Back To Top Dengan Efek Memantul

Tombol back to top sangat berguna bagi pengunjung blog, karena saat pengunjung sudah selesai membaca artikel di blog kita biasa nya akan kembali ke home untuk melihat - lihat artikel yang lain. Apalagi jika kita modifikasi Tombol Back To Top tersebut dengan sedemikian rupa, seperti kita rubah bentuk tombol back to top nya untuk menyelaraskannya dengan template yang kita pakai, atau juga bisa dengan cara menambahkan efek memantul...

Efek memantul ini akan terlihat jika kita mengklik Tombol back to top, nah saat di atas akan ada sedikit pantulan yang membuatnya unik. Selain untuk memudahkan pengunjung untuk kembali ke menu atas, jika kita sudah modifikasi tombol back to top dengan efek pantul ini bisa memberi kesan fresh pada blog kita.

Nah jika anda penasaran bagaimana cara membuat efek pantul ini bekerja di blog anda bisa simak bersama tutorial dibawah ini..

Tutorial

Pertama buka Blogger.com

Pilih blog yang mau anda terapkan

Klik "Template > Edit HTML"

Simpan kode dibawah ini di atas </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

Jika anda sudah mempunyai kode diatas silahkan lewati saja

Lalu simpan kode dibawah ini di atas </head> juga

<script type='text/javascript'> $(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } }); $('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); }); </script> 

Nah selesai deh "Save Template" dulu..
lalu kembali ke menu homepage Blogger
Klik "Tata Letak > Tambah Gatget"

Copy kode dibawah ke kolom yang tersedia lalu klik "Simpan"

<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/AVvXsEi9mCXgafrA62GgaNW56_WYrA8C2xkgavPbQP_4O1btcTrGvRkXc-J-J0hDDugoJIljntRdEh6h3ufXs32HBmjvEr0rlYXLcuhp9fkSNPZIsDU7vGQuYsYgIqbvNMPMfATKRBD6MO6QyLg/s1600/Backtotop_thumb9.jpg'/></div>

Ganti tulisan yang saya warnai Merah dengan link gambar tombol back to top yang anda punya, jika belum punya pakai saja yang ada..



Nah akhirnya selesai deh... jika ada pertanyaan seputar Cara Membuat Tombol Back To Top Dengan Efek Memantul bisa tulis di kolom komentar

Silahkan Gunakan Facebook Comment, Jika Anda Tidak Memiliki Blog

Tweet