Memasang Tombol Back to top efek Jquery Bounce - Hallo sahabat Sumber Informasi Terbaru, Pada Artikel yang anda baca kali ini dengan judul Memasang Tombol Back to top efek Jquery Bounce, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blog design, Artikel Tutorial Blogspot, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Memasang Tombol Back to top efek Jquery Bounce
link : Memasang Tombol Back to top efek Jquery Bounce

Memasang Tombol Back to top efek Jquery Bounce

Memasang Tombol Back to top efek Jquery Bounce - Hallo sahabat Sumber Informasi Terbaru, Pada Artikel yang anda baca kali ini dengan judul Memasang Tombol Back to top efek Jquery Bounce, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blog design, Artikel Tutorial Blogspot, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Memasang Tombol Back to top efek Jquery Bounce
link : Memasang Tombol Back to top efek Jquery Bounce

Memasang Tombol Back to top efek Jquery Bounce

Memasang Tombol Back to top efek Jquery Bounce - Mungkin adakalanya postingan-postingan yang terdapat di blog sobat memiliki konten yang sangat panjang hingga membuat tab scroll mengecil alias halaman tersebut memanjang kebawah. Atau, suatu halaman memanjang kebawah dikarenakan komentar-komentar yang menumpuk kebawah. Ya, itu menjadi salah satu permasalahan yang akan kita alami dalam blogging. Karena, suatu halaman blog yang memanjang kebawah, bila kita sedang membaca lalu menggeser scroll kebawah dan ingin pergi keatas lagi otomatis harus mengscrollkannya lagi.

Oke, tombol back to top ini mungkin menjadi solusi dalam permasalahan ini. Dengan tombol ini, blog anda akan lebih user friendly karena memudahkan pengunjung dalam mengembalikan scroll keatas apabila sedang dibawah. Pengunjung hanya tinggal mengklik tombol tersebut dan halaman akan otomatis scroll keatas dengan sendirinya. Berbicara tentang tombol ini, sebelumnya saya juga sempat menjelaskan bagaimana membuat tombol ini, di Memasang tombol back to top simpel. Bedanya, pada kali ini tombol back to topnya lebih menarik. Dihiasi dengan efek jquery bounce.

Langkah-langkah:

Pertama, seperti biasa sobat langsung masuk ke halaman pengeditan HTML sobat. Lalu simpan kode dibawah ini tepat diatas kode </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>

Kedua, masih berada diarea tersebut. Simpan kode javascript Jquery Bounce diatas kode </head> untuk memberi efek smooth dan bouncenya.

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

Ketiga, langkah untuk memasang tombol back to topnya. Sobat langsung pergi ke halaman Tata Letak. Buatlah widget HTML/Javascript dan masukan kode dibawah ini lalu simpan

<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/AVvXsEiSSLu1DNPb91sc1h2Pa0MYGELa9nxb4y_gTKw-p5ZZJvf04PSFMw48SbDiSEJS0sIyFxzsxfvo45Ov40RHXsV-_M-2shAxY8HR-cYUJ26cuVqKTXtfIpGHtXdXqguJ7WJzqBaqA5g18aBO/s1600/back-to-top.png'/></div>

Oiya, sobat juga bisa merubah gambar tombolnya dengan merubah kode berwarna Orange, lalu ganti dengan link gambar tombol yang ingin sobat pasang.
Untuk demonya, sobat bisa coba scroll halaman Blognya Reggy kebawah, tombol akan muncul dengan otomatis dan apabila di klik, halaman ini akan terscroll dengan sendirinya keatas. Dengan efek smooth fade dan pantulan bounce bila sudah berada diatas halaman.

Oke cukup sekian artikel tentang Memasang Tombol Back to top efek Jquery Bounce. Semoga bermanfaat bagi sobat-sobat sekalian :)

Demikianlah Artikel Memasang Tombol Back to top efek Jquery Bounce

Sekianlah artikel Memasang Tombol Back to top efek Jquery Bounce kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Memasang Tombol Back to top efek Jquery Bounce dengan alamat link https://singkawangterbaru.blogspot.com/2014/02/memasang-tombol-back-to-top-efek-jquery.html

Demikianlah Artikel Memasang Tombol Back to top efek Jquery Bounce

Sekianlah artikel Memasang Tombol Back to top efek Jquery Bounce kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Memasang Tombol Back to top efek Jquery Bounce dengan alamat link https://singkawangterbaru.blogspot.com/2014/02/memasang-tombol-back-to-top-efek-jquery.html

Tweet