Halo sobat media2give,pada kesempatan kali ini saya akan berbagi informasi mengenai Pasang Tombol Back To Top Dengan Efek Bounce.Apaan tuh tombol back to top? tombol ini merupakan tombol yang memiliki fungsi untuk mempercepat kembali ke halaman atas.Saat di klik,maka halaman yang tadinya berada di bagian bawah akan di gulir naik lagi ke bagian atas.Sebenarnya tanpa tombol ini,pengunjung juga masih bisa melihat lagi halaman atas dengan menggunakan scroll.Tapi itu akan makan waktu yang lebih lama,apalagi kalau artikel yang di sajikan sangat panjang.
Related Posts:
Biasanya kalau artikel itu cukup banyak di beri komentar,itu juga akan membuat halaman kita menjadi lebih panjang.Nah,untuk mengatasinya sekaligus menghemat waktu,ada baiknya jika kita memasang tombol back to top ini di blog.Tombol back to top yang saya bagikan ini dilengkapi juga dengan efek bounce yang akan terlihat halus jika halaman di gulir ke atas.Karena ada juga tombol back to top yang kasar,pas di klik tiba-tiba ke atas.Akibatnya,penampilan nilai blog akan berkurang.Untuk lebih jelasnya,langsung saja deh disimak cara pasang tombol back to top berikut ini :
1. Login blog kalian
2. Pilih Template > Edit HTML
3. Cari kode </head>,gunakan ctrl+f untuk mempermudah pencariannya
4. Letakkan kode dibawah ini tepat diatas kode </head> tadi
<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js’/>
<script type=’text/javascript’>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $(‘#BounceToTop’).slideDown(200); } else { $(‘#BounceToTop’).slideUp(300); } });
$(‘#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>
5. Klik Simpan
6. Masuk ke Tata Letak > Tambah Gadget
7. Pilih HTML Javascript
8. Masukkan 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=’http://3.bp.blogspot.com/-tBpXRELuFxA/Uu859ovCGVI/AAAAAAAABhw/ZKXN5Gm8AuI/s1600/Arrow+Up+ViperGoy+Blog.png‘/></div>
9. Klik Simpan
Preview hasilnya
10. Jika ingin mengganti gambar tombolnya,ubah saja kode yang berwarna merah diatas dengan url gambar kalian
Leave a Reply