membuat back to top dengan efek bounce

Kali ini admin akan membahas seputar tutorial blog yaitu membuat back to top dengan efek bounce.sebenarnya bagaimana itu efek back to top dengan efek bounce jawaban nya bisa sobat lihat di blog ini silahkan sobat scroll ke bawah maka akan muncul tanda panah lalu klik.

Nah seperti itu lah back to top dengan efek bounce berikut ini cara pemasangan nya..

1. pertama login ke blogger dulu pastinya..
2. klik template
3. pilih edit HTML
4. Klik "expand widget template"
5. cari tagg ]]></b:skin> (bisa melalui F3 atau Ctrl + F) lalu letak kan kode di bawah ini tepat di atas tag   ]]></b:skin>

#toTop { text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none; color:#000; font-family:verdana; font-size:11px;}<br />


6. Lalu cari lagi kode </head> lalu letak kan script di bawah ini di atas tag </head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/><script type='text/javascript'>$(function() { $(window).scroll(function() { if($(this).scrollTop() > 100) { $('#toTop').fadeIn(); } else { $('#toTop').fadeOut(); } }); $('#toTop > img').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>

7. Kemudian simpan template sobat

8. Lalu pilih Tata letak >> Klik tambah gadget  >> Pilih HTML/Javascript

9. Masukkan script di bawah ini

<div id='toTop'> <!-- Back to top animation written by farizemo | edited by ilham mboh --><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil4shubPCBA0iqIJ80VtbuiAD0RhqQCUMsVxskl4dZk_DLBJBP9GZCIA9PU8M67wBA7EeNoSPOFU6WYW7YEqBq86hBB2cG1TKBO-iRQk4oNSb6l277lOAP4HVOuCOOz1zc9F04wEO40TP6/s1600/navigate-up-icon.png' style='margin-right:-9px'/></div>

untuk mengganti gambar silahkan ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil4shubPCBA0iqIJ80VtbuiAD0RhqQCUMsVxskl4dZk_DLBJBP9GZCIA9PU8M67wBA7EeNoSPOFU6WYW7YEqBq86hBB2cG1TKBO-iRQk4oNSb6l277lOAP4HVOuCOOz1zc9F04wEO40TP6/s1600/navigate-up-icon.png dengan Url gambar sobat,..

10. Jangan di beri nama lalu simpan..

SELESAI

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

Krisna Prayoga

Artikel Terkait