Cara Membuat Tombol Back to Top dengan Efek Bounce

Cara Membuat Tombol Back to Top dengan Efek Bounce - Kali ini saya akan share kepada sahabat blogger cara membuat tombol back to top . apa sih back to top itu ..? back to top ialah tombol yang ketika diklik akan langsung menuju keatas . itulah yang dinamakan back to top . Back to top berfungsi unetk mempermudahkan pengunjung supaya dapat kembali ke atas ( postingan ) dengan cepat.

Berikut cara membuat tombol back to top  di blogger :

1. Masuk ke akun blogger anda terlebih dahulu
2. Pilih menu Template => Edit Template
3. Kemudian cari kode </head>
4. Salin kode dibawah ini tepat di atas 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').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>

Jika blog sobat sudah ada kode jquery maka hapuslah kode yang berwarna biru diatas

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

<script type='text/javascript'>

5.Kemudian tambakan gadget HTML/JavaScript
6. Letakan kode di bawah ini di kolom HTML/JavaScript tersebut

<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/AVvXsEj-E_wHIEOENHJCS7FB7DjOQeqFxm36vBCZn-ZVdMCEo8qfXfkPCdxtJj3W0HJ2s2InQKtfZ3ZPsS41AQXzeP7UWNstjjxYrah22mENq0vbW-VJcoOnCuRlKi8lmjE6R-3oRpaFeuYRRtUw/s1600/arrow-up_basic_blue.png'/></div>

7 . Kemudian simpan template anda dan lihat hasilnya
Demikian artikel saya mengenai Cara Membuat Tombol Back to Top dengan Efek Bounce semoga artikel trick tersebut bermanfaat bagi anda .

Share This Article

Facebook +Google Twitter Digg Technorati Reddit

Sumber Berita Ini: Cara Membuat Tombol Back to Top dengan Efek Bounce

Riio Cyber-Art

Blog ini berisi informasi mengenai dunia blogging dan internet dari berbagai sumber, jika anda menyukai dan mau dapatkan Update berita terbaru, harap ikuti blog ini dengan memasukan Email anda atau mengikuti Twitter/Facebook, dengan begitu anda secara otomatis akan mendapatkan Update Berita terbaru disini.

• Rss
• Twitter
• FaceBook
• Follow This Blog

Baca Juga Artikel Terkait Lainnya

Berita Populer Lainnya