Cara Membuat Tombol Back To Top Dengan Efek Bounce

Kembali lagi di ViperGoy Blog. Pada kali ini saya akan membahas tentang Cara Membuat Tombol Back To Top Dengan Efek Bounce. Pasti anda telah menemukan Blog - Blog yang memiliki Back To Top / Kembali Ke Atas. namun, terkadang ada juga Back To Top yang dibilang 'KASAR', mengapa ? Karena Tombolnya secara tiba - tiba keatas, itu membuat nilai penampilan blog anda berkurang, nah, untuk menutupi itu semua, saya mempunyai Cara untuk Membuat Tombol Back To Top Dengan Lembut dan Pelan. Jika anda bingung dan penasaran mari kita praktekan. Cekidott....

Cara Membuat Tombol Back To Top Dengan Efek Bounce Di Blog :

1. Masuk ke Blogger Home kalian.
2. Kemudian pilih Template Edit > HTML.
3. Setelah itu cari kode </head>, Kemudian copy dan pastekan diatas kode </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#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>

4. Klik save / simpan.
5. Masuk ke Tata Letak > Add Gadget.
6. Pilih yang HTML/JavaScript.
7. Kemudian masukan kode dibawah 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/AVvXsEh5DmA0yIU-VE2w2l4zeUBmftekOz7WFyQ7gqvQz3LDSxt_y7I7rERJByJcEP37yq8TgY_mLzyNaX3UYD0dDpzGBJAC8wxsl5vq-0XsRhEynNGy4Ph9uXzF_f_4tuUZaUiWCEOwWpu7sdg/s1600/Arrow+Up+ViperGoy+Blog.png'/></div>

8. Save / Simpan tanpa diberi judul.

Nah, begitulah Cara Memasang Tombol Back To Top Di Blog Dengan Efek Bounce. Saya berterima kasih kepada Blog KangIsmet karena sudah membuat Kode Back To Top tersebut. Jadi saya berterima kasih banyak dan jangan lupa membaca artikel vipergoy sebelumnya tentang

• Biografi Calvin Richard Klein
• Cara Menghilangkan Judul Blog Di Header

Sekian dari Paman ViperGoy untuk artikel yang berjudul Cara Membuat Tombol Back To Top / Kembali Ke Atas Di Blog (Bounce). Terima kasih

Judul: Cara Membuat Tombol Back To Top Dengan Efek Bounce
Rating: 10 out of 10 based on 24 ratings. 5 user reviews.
Ditulis Oleh Felix

Terima Kasih Atas Kunjungan Anda...

ViperShare :