Cara Membuat Tombol Back To Top dengan Efek Bounce

↑ Grab this Headline Animator

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/AVvXsEgS-uHUNw5mfeTLzjbYaCxVrNPaEhZpaWC9I7AwK32NfSnnQrOaTuRXqVnRJSA4JZQ83bE2ACK3gEKEZ3IxJoidqA2clzJ_P9pDDuLAhdKEnDeH0X_rf7yThbkZCk65yZcQn8ePGqciXvF_/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/AVvXsEgkd-5d1i2plttr4TIbxJ18Uh-nmgEDc_IlXN71M-eCfMTtl7WlizsQ93_lHpzPxr37996nRcg72dLXezOpbsut8zLfZh3GMiiSfaGUZU2V0uxcmU2xVck_ssRZ4Bw9f2gnShDnaMvXVLVv/s1600/back+to+top4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_7guWSl4PxyvHomMX_Iob32y3BOqX4QM_fNZB5YqFE2UXo5B9ZGfc1JoXGDBRQkQqLL1mAjMp86-bHBNsq3LnxvyWozIZ9LS0lPHI5BDprm8Y-IhSnmFvxoAGq79nfw26HQ5opVWjKldH/s1600/back+to+top14.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_7guWSl4PxyvHomMX_Iob32y3BOqX4QM_fNZB5YqFE2UXo5B9ZGfc1JoXGDBRQkQqLL1mAjMp86-bHBNsq3LnxvyWozIZ9LS0lPHI5BDprm8Y-IhSnmFvxoAGq79nfw26HQ5opVWjKldH/s1600/back+to+top14.png

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

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

Dunia Aneh
Kumpulan Artikel Unik dan Aneh sepanjang Masa
Catatan dosen

Tips Android dan BBM
Kumpulan Ulasan tentang Tips Android dan BBM
Putera Dosen

Meme Lucu Banget
Kumpulan Meme Lucu yang lagi ngetren
Cds Blog

Kumpulan Artikel Menarik
Semua Artikel yang Kamu Cari Ada di sini
230 Penulis
Ads by BLOGGER

Posted by Very Handika

Tweet