Loading...
ucapan

Silahkan Pilih Warna Background Yang Cocok Buat Mata Anda


2016/11/08

Membuat Tombol Back to Top dengan Efek Bounce

Post Generator PRO
Plugin Wordpress POST GENERATOR PRO sederhana tapi powerful, Membuat ribuan artikel blog hanya dalam sehari saja. Tanpa masalah Duplicate Content.
Rugi jika tidak memilikinya walau belum punya Hosting dan blog wordpress, akibat penjualannya sudah berakhir. Miliki secepatnya... Sangat bagus digunakan untuk mengupgrade BACKLINK ke blog utama demi menghasilkan Duit Or Dollar bagi pemain Adsense, He..
Back to Top Bounce effect
Sebenarnya sudah banyak tutorial untuk membuat tombol back to top ini, namun ada pertanyaan pengunjung blog ini tentang bagaimana cara membuat tombol back to top dengan efek bounce.

Sebelum melangkah pada tutorial, saya mengucapkan terimakasih kepada pengunjung blog ini, karena dengan berbagai pertanyaan memunculkan ide untuk membuat artike baru.

Lanjut kepada tutorial... Apa sebenarnya efek bounce itu? bounce artinya memantul, jadi back to top setelah discroll akan ada sedikit efek pantulan. Untuk menerapkannya, silahkan ikuti langkah mudahnya :

Langkah 1 : Simpan kode jQuery di atas </head>



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



lewati langkah ini apabila di blog sobat sudah ada. Versi bisa berbeda-beda seperti 1.3.2, 1.6.4, 1.7.1, dll.

Langkah 2 : 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>

Langkah 3 : 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='http://2.bp.blogspot.com/-MFhU3vLp5ho/UiaBZeA1McI/AAAAAAAAAQs/MrzW2ljP5mA/s1600/arrow-up_basic_blue.png'/></div>

Tampilan tombol dengan kode di atas menggunakan fade in / fade out (muncul perlahan), apabila tombol ingin muncul dari bawah seperti blog ini, ganti kode pada langkah 2 dengan kode ini :


<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>
Semoga bermanfaat...

Apabila sobat ingin tombol scroll back to top tanpa efek bounce, kunjungi tutorianya DISINI
source : http://blog.kangismet.net/2013/09/membuat-tombol-back-to-top-dengan-efek-bounce.html

Pengelola Blog : ABDUL WAHAB

Judul : Membuat Tombol Back to Top dengan Efek Bounce
Ditulis oleh :Blog Veezy Lights pada hari 2016/11/08
Rating Blog : 5 dari 5
Terima kasih sudah membaca artikel tentang Membuat Tombol Back to Top dengan Efek Bounce
Kalian boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman kalian.
Namun jangan lupa harap memberikan link aktif dofollow ke URL
http://fajriandaviar.blogspot.com/2013/09/membuat-tombol-back-to-top-dengan-efek.html
Dan Terima kasih sekali lagi atas kunjungannya.

Kritik dan saran atau apapun bisa kalian sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak selalu online dikarenakan sibuk.

Title : Membuat Tombol Back to Top dengan Efek Bounce
Description : Sebenarnya sudah banyak tutorial untuk membuat tombol back to top ini, namun ada pertanyaan pengunjung blog ini tentang bagaimana cara m...

5 komentar

Sob Di Edit HTML Saya Kok GX Ada TUlisan < / head > Yah Kenapa :cry: Sorry Ane Spasi Spasi Yg Head Soalnya Ke Block

Pasti ada kok, </head> itu termasuk kode pokok yang ada di blog. ^_^

Terimakasih banyak mas, sangat membantu sekali artiklnya... keep posting mas..

http://landongobatherbal.com/obat-herbal-kanker-serviks/

salam kenal sukses terus gan

Berkomentarlah dengan bijak dan sopan, Dilarang menggunakan Link Aktif, Link Mati, Promo, dll.
Dan Berbagilah Jawaban atas apa kesulitan yang sobat-sobat lainnya dapatkan.
Mohon maaf jika ADA komentar atau pertanyaan tidak bisa cepat saya respon,
DIkarenakan Saya tidak selalu online selama 24 Jam.