Cara Membuat Tombol Back To Top dengan Efek Bounce

Cara Membuat Tombol Back To Top dengan Efek Bounce -

hay sobat kali ini ilmu ane akan berbagi Trik blogger keren lagi nih , saya hanya mengambil SCript dari blog kang ismet , dan saya hanya ingin membantu Share lagi Trik blog nya yang keren ini . Hampir pecinta keindahan blog memakai ini , karna dengan efek bounce yang sangat menarik . Oke langsung sajakita ke langkah langkha memasang tombol back to top seperti efek bola bounce .

Ini contoh efek Back To Top Bounce blog ILMU ANE

Tombol Back To Top dengan Efek Bounce

Berikut langkah - langkah pemasanganya :

1. Login Blogger

2. Pilih Template => Klik Edit HTML

3. Cari Kode </head> Supaya Mepercepat Pencarian guanakan CTRL+F
4. Kemudian Copy Paste Kode jQuery di bawah ini tepat di atas </head>

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

5 :Simpan kode ini masih di atas </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>

6. Kemudian Go tu Tata Letak , Buat widget baru HTML/JavaScript, simpan kode 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/AVvXsEhkJkztXbivw5SbwIk5QoZqbeB-v7WyqUPWadCN7wIOiS0sNJz6liFtwPHB1JfUKgVrWag0GNgu5XQnUe1LXn7FUHbv2yy02j9w8KB1e0r34UMKeHd7xkRL6kWRksIf4UXvYO5bE8cYxjO-/s1600/arrow-up_basic_blue.png'/></div>

Dan jika sobat ingin merubah gambar Tombol Back to Top nya bisa menggantinya dengan Script pilihan gambar di bawah ini dengan setting gambar di HTML/JavaScript

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBfgWf33ef7WEo2VnV4jffvekm3d1YCvJbXJNJbE3OcxaDIl5oR1exuAldNmA_HA0cG_bPUNElpyDHvVoXFTLKsLxkEIP1I0h-R83sUCLj-bjpY6b9D6UnNuYr7J4RhTsev4wBphelHW_O/s1600/back+to+top4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5UmlqPRkv8i2US5hqWXFQIXmmftzlLWpG0_Yq3cQoHOObvcpKfR5Ym3i8iZT3oq8iagV4eYPJSwIrQZxwK4zVgNgiBH5AkmydTdIGOYfKltLYwqwhYa60_VmiLQFcWMKKrE2S4_usbfIH/s1600/back+to+top14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhetzOQcNx_VOfVAs_bOn8vO1fx5WUIR0AvpBPFcU1j2HK_HjMTIVYPHfm0X1dgdNULc26ImPuizLMRm5xxBs0rbKVbR50uI0BPgUNsblBisFory17HgZDVnRIrun6-zj94flCPUtbf4VPI/s1600/back+to+top15.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5UmlqPRkv8i2US5hqWXFQIXmmftzlLWpG0_Yq3cQoHOObvcpKfR5Ym3i8iZT3oq8iagV4eYPJSwIrQZxwK4zVgNgiBH5AkmydTdIGOYfKltLYwqwhYa60_VmiLQFcWMKKrE2S4_usbfIH/s1600/back+to+top14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhetzOQcNx_VOfVAs_bOn8vO1fx5WUIR0AvpBPFcU1j2HK_HjMTIVYPHfm0X1dgdNULc26ImPuizLMRm5xxBs0rbKVbR50uI0BPgUNsblBisFory17HgZDVnRIrun6-zj94flCPUtbf4VPI/s1600/back+to+top15.png

Sekian Trik blogger dari saya , semoga bermanfaat .. :)

Cara Membuat Tombol Back To Top dengan Efek Bounce