Cara Membuat Back To Top dengan Effect Bounce

Sore sobat Blog Krizeer, pada kesempatan kali ini saya mau membahas tentang Cara Membuat Back To Top dengan Effect Bounce.
Mungkin sobat semua udah gk heran dengan Judul Blog Ini.

Ok langsung aja kita bahas satu per satu !!!

1. Cari kode ]]></b:skin> lalu letakan kode ini di atas kode tadi

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

2. Cari kode </head> dan letakkan script di bawah ini di atas kode </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() &gt; 100) { $(&#39;#toTop&#39;).fadeIn(); } else { $(&#39;#toTop&#39;).fadeOut(); } });    $(&#39;#toTop &gt; img&#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. Simpan Template
4. dan pergi ke edit laman ambil tambah gadget dan ambil HTML/JAVASCRIPT lalu letakk kan kode di bawah ini

<div id='toTop'><!-- Back to top animation written by farizemo | edited by Yoga Pratama --><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf2UJKe5pQ6t6Xx4xHog19N5yNSLqq7lJUT0gx9VZxE37Jq10SEbXjx2RVzRSaprTvZR-CYFqs2k2lrLCjkoDCywyT8gnjJyk2jLzifJq6wP2tOqCvLwe7O3qA-96LXqf2N6m7K88uUCME/s1600/Back+To+Top.png' style='margin-right:-9px'/></div>

Kode merah ganti dengan URL gambar kamu.
Sekian Trima Kasih :v 
referensi dari http://greenz-blogger.blogspot.com/

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Blog Krizeer. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Blog Krizeer dengan mengklik tombol di bawah ini:

Artikel Keren Lainnya:

• Memperbaiki Lightbox Yang Muncul Tidak Sempurna
• Cara Membuat Halaman Posting dan Komentar Dalam Tab View
• Cara Rahasia Meningkatkan SEO di Blog 100% Work
• Cara Mudah Membuat Scroll Pada Label/Widget Blog
• Cara Menghapus Link Aktif Pada Komentar Blogger
• Cara Membuat Tombol Demo dan Download di Blog
• Cara Membuat Tombol Next Page Dengan Angka di Blog
• Cara Mengubah File Gambar Menjadi Base64 String
• Cara Merubah Warna Backgorund dan Text Ketika di Blok
• Cara Memperpendek URL Agar URL Lebih Singkat

Ditulis oleh Unknown pada tanggal Kamis, 30 Mei 2013