Cara Membuat Tombol Back to Top dengan Efek Bounce

Cara Membuat Tombol Back to Top dengan Efek Bounce 

Pada kesempatan kali ini NTechno akan mencoba memberikan tutorial membuat widget back to top dengan efek bounce , langsung to the point saja , silahkan ikuti tutorial berikut ini :

1. Login ke Dashboard Blogger
2. Klik Template > Edit HTML
3. Copy script dibawah ini lalu letakkan tepat diatas kode </head>

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

kamu bisa lewati langkah ini apabila di blog kamu sudah ada versi bisa berbeda-beda seperti 1.3.2, 1.6.4, 1.7.1, dll.

4. Copy jQuery dibawah ini lalu letakkan juga tepat diatas kode </head>

<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. Lalu Add Widget/Javascript pada blog , terserah mau dimana .
Lalu copykan script 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/AVvXsEiPqdkELe5On0aI4sQdaFmBAPK7G3_EfBmVTmisg5LNRPv3eTY6UliZNTaVuQiJRvBMI1Fycw6AekppursyrpoVQzH7b6eLWl3K92rYYZK_Ap5cDEq76r1s_digaVPmnSL4oQAYPMF_exrc/s1600/arrow-up_basic_blue.png'/></div>

6. Selesai

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

Aness Silitonga

Masih muda dan giat belajar dalam hal coding,sangat tertarik dengan dunia internet marketing , kerja keras demi sebuah pencapaian!

Related Post