Tombol Back To Top Dengan Efek Bounce Ala Kang Ismet - Kali Ini saya akan
Share yang berkaitan dengan kang ismet , setelah saya Share
TUTORIAL MEMBUAT ARTIKEL TERKAIT SEPERTI KANG ISMET Tombol
Back To Top ala kang ismet sudah terkenal Di google dan sudah banyak yang share
kali ini saya share kembali bagi anda yang masih belum tau
Langkah Penerapan
1. Masuk Ke Blog Anda
2. Masuk HTML
> Edit HTML
3.Cari Kode
<head>
4. Masukan Kode Dibawah Ini Diatas Kode Tersebut
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
*Note :
Lewati langkah ini apabila di blog anda sudah terpasang jQuery
5. Taruh Kembali Kode Dibawah Ini Diatas Kode Tersebut
<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>
6. Taruh Kode Dibawah Ini Diatas
]]></b:skin>
#BounceToTop {background:#5c6c7e;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:40px;height:40px;border-radius:1000px;padding:5px;display:none;transition:all .3s ease-out;}
#BounceToTop:hover {background:#2a3542;}
#BounceToTop:before {content:""; position:absolute; bottom:18px; right:14px; width:0; height:0; border-style:solid; border-width:0 11px 16px 12px; border-color:transparent transparent #fff transparent; line-height:0;}
#BounceToTop:after {content:""; position:absolute; bottom:18px; right:15px; width:0; height:0; border-style:solid; border-width:0 10px 14px 11px; border-color:transparent transparent #5c6c7e transparent; line-height:0;transition:all .3s ease-out;}
#BounceToTop:hover:after {border-color:transparent transparent #2a3542 transparent;}
7. Taruh Kode Dibwah Ini DI
HTML/JavaScript<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id="BounceToTop" style="display: block;"></div>
Posts
