Header Ads

Header ADS

Cara Membuat Tombol Back To Top Dengan Efek Bounce

1.Login Ke Blogger
2.Pilih Template >>>> Klik Edit HTML
3.Cari Kode </head> ( gunakan ctrl+f untuk mempercepat pencarian) letakkan kode jQuery ini 
tepat diatas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
4.Letakkan Juga Kode dibawah ini tepat diatas </head>
<script type='text/javascript'> $(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;100) { $(&#39;#BounceToTop&#39;).slideDown(200); } else { $(&#39;#BounceToTop&#39;).slideUp(300); } }); $(&#39;#BounceToTop&#39;).click(function() { $(&#39;body,html&#39;).animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); }); </script>
5.Kemudian Cari Kode ]]></b:skin> dan letakkan kode dibawah ini tepat 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;}
6.Klik Simpan Template
7.Langkah terakhir yaitu masuk ke Tata Letak >> Tambahkan Gadget >> Pilih HTML/Javascript
dan masukkan kode dibawah didalamnya
<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>

 8.Simpan

1 comment:

  1. Hi to every , beсause I am actuallƴ eager of reading this blog'ѕ
    post to bе updated daily. Ӏt carries nice stuff.


    http://beritamu.besaba.com/

    Visit mƴ blog post; ONLINE VIDEO NEWS

    ReplyDelete

Powered by Blogger.