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>
$(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/AVvXsEgvLPPD5WME8tSSZUjZJflkbRW19zCVoidy4wCLb6qxScokpFvWJ14ue_HxT0nozkGbrNIkCyc8laKwV-wNTB9Ze0CLvoaTJ8L1gHkUA2TDmCMW7_fkRmVz1-Z-KkwdftXHotbXN9mSbxc8/s1600/arrow-up_basic_blue.png'/></div>
#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/AVvXsEgvLPPD5WME8tSSZUjZJflkbRW19zCVoidy4wCLb6qxScokpFvWJ14ue_HxT0nozkGbrNIkCyc8laKwV-wNTB9Ze0CLvoaTJ8L1gHkUA2TDmCMW7_fkRmVz1-Z-KkwdftXHotbXN9mSbxc8/s1600/arrow-up_basic_blue.png'/></div>
6. Selesai
Masukan email Anda untuk Dapatkan Update terbaru dari Newbie Techno.Gratis!
Share this article to your friends
