Quotes
Laki-laki yang memperlakukan kekasihnya dengan lembut pasti dibesarkan oleh wanita yang berkelas. Orang tua yang kasar akan membesarkan anak yang kasar kepada pasangannya. Berkenalan dengan orang tua kekasih bukanlah tanda akan melamar, tapi untuk mengenal kualitas pendidik anaknya.

close
30 Okt 2013

Membuat Tombol Back to Top Dengan Efek Bounce

Membuat Tombol Back to Top Dengan Efek Bounce - Pada postingan kali ini saya akan memposting artikel yang cukup menarik sekaligus widget yang mempermudah visitor mengembalikan scroll ke atas, yaitu Membuat Tombol Back to Top Dengan Efek Bounce.

Tombol Back to Top Dengan Efek Bounce

Sebenarnya saya sudah membuat postingan ini dengan tema yang sama, yaitu Cara Mudah Membuat Back To Top di Blog namun pada postingan ini saya akan mendaur ulangnya kembali atau memodifikasinya dengan efek bounce. Sedikit penjelasan, bounce artinya memantul, jadi back to top setelah discroll akan ada sedikit efek pantulan. Untuk melihat langsung demonya, silahkan Anda terapkan sendiri pada blog ini. Oke langsung saja ini dia tutorialnya:

1. Masuk ke Blogger
2. Pilih Template > Edit Html
3. Cari kode </head>
4. Setelah ketemu, pastekan jQuery berikut diatas </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
Lewati langkah ini apabila di blog sobat sudah ada. Versi bisa berbeda-beda seperti 1.3.2, 1.6.4, 1.7.1, dll.

5. Masih simpan kode berikut diatas kode </head>
<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>
6. Buat widget baru HTML/JavaScript, dan pastekan kode berikut
<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://4.bp.blogspot.com/-JbaDT9YqsI8/UQu-cM05oVI/AAAAAAAADb8/wytlgtHS8sU/s1600/Button-Upload-icon.png'/></div>
7. Simpan Template..

Sekian tutorial mengenai Membuat Tombol Back to Top Dengan Efek Bounce, Semoga bermanfaat..

3 Komentar

tks infonya ,kalo ada waktu silahkan mampir ke lovewebster.blogspot.com

Gan, kalau ganti waktu scroll keatas nya gimana gan?

BERI KOMENTAR | KHUSUS PENGGUNA TERDAFTAR
Silahkan beri komentar Anda dengan bijak dan sesuai dengan topik (untuk komentar OOT sebaiknya di Forum Ngopi).

Batal
Terima kasih telah berkomentar
 
notifikasi
Tutup