Membuat Tombol Back To Top Efek Bounce Di Blogger

Sebelumnya kita pernah mempelajari Cara Membuat Tombol Back To Top Di Blogger, nahh untuk Tutorial kali ini juga masih sama seputar cara membuat tombol back to top tetapi untuk kali ini Blog Pintasku akan memberikan tutorial Membuat Tombol Back To Top Efek Bounce Di Blogger.

Efek Bounce disini maksudnya adalah efek bola memantul, Mungkin dulu sobat pernah mengenal sebuah game dari handphone jaman dahulu, yaitu game Bounce, dimana game tersebut ada sebuah bola memantul, nahh bola yang memantul itu disebut Bounce. Oke sekarang kita langsung saja masuk ke tutorialnya berikut ini.

Membuat Tombol Back To Top Efek Bounce Di Blogger

1. Pastikan pada template blog sobat sudah Memasang jQuery, jika belum silahkan copy kode berikut ini dan letakan tepat di atas tag </head>.

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

2. Nahh sekarang kita Copy script berikut ini dan letakan tepat di atas tag </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>

3. Sekarang kita cari tag ]]></b:skin>, lalu kita copy kode CSS berikut ini dan letakan tepat di atas tag ]]></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;}

4. Lalu sekarang kita letakan kode HTML berikut ini dan letakan tepat di atas tag </body>

<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>

5. Save Templates, dan sekarang lihat hasilnya.

Sekian Tutorial Membuat Tombol Back To Top Efek Bounce Di Blogger, semoga tutorial ini bisa membantu dan bermanfaat untuk semuanya. Terimakasih