Membuat Tombol Back To Top Dengan Efek Bounce

blogger templates

1. Login Ke Blogger
2. Template > Edit HTML
3. Copy dan pastekan kode di atas kode </head> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
4. Copy dan pastekan script dibawah ini 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>
 5. Buat widget baru dan simpan dode 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/AVvXsEg0MGgVnufoHnUhsklbDZrqPGIT-1Q6FmUjSldTJ0rFrTbVfJHMI0Ecjm7K4EjYYR8H4DFb2L1clk97bXBphXMERt860bRpb0NPOk4Tj7yDg78-umiq38Z8peqzYYzb3FOFBK7LllDnU2HK/s1600/arrow-up_basic_blue.png'/></div>
6. Selesai dan lihatlah hasilnya...

NB: Untuk mempermudah pencarian kode script tekan CTRL+F

Semoga bermanfaat...

0 Response to "Membuat Tombol Back To Top Dengan Efek Bounce"

Posting Komentar

["Selamat datang di setiabloger.blogspot.com"]


> Silahkan tinggalkan komentar sahabat setia di sini.

Followers