Membuat Tombol Back To Top Dengan Efek Bounce/Memantul


Membuat Tombol Back To Top Dengan Efek Bounce/Memantul

Primonymous - Halo! hari ini Primonymous akan berbagi cara untuk Membuat Tombol Back To Top Dengan Efek Bounce/Memantul. Jadi saat kita klik tombol back to top, otomatis tampilan blog kita akan menjadi ke atas dan efek memantul akan muncul saat sudah sampai atas. Ok langsung saja disimak cara memasangnya

1. Log-in ke Blogger
2. Masuk ke Template >> Edit HTML
3.. Simpan kode JQuery di bawah kode </head>

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

- Lewati langkah ini jika di blog-mu sudah ada kode JQuery

4. Salin dan letakkan kode berikut di bawah 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>

Keterangan:
Kode di atas berfungsi untuk membuat efek fade in/fade out (muncul secara perlahan), jika ingin membuatnya muncul dari bawah silahkan ganti dengan kode:

<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>

5. Simpan template
6. Buat widget baru HTML/Javascript (Tata Letak >> Tambah Widget >> HTML/Javascript) dan masukkan 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNUjCvcjPlx5Y2osTl4P-2Gykpu-XW4fEjZAal1WdlPLQvMXJD3-ygaNUfHcZonVDBoO3n4wVvB_Iva709t2uMFubJGZtGrh0JMcPrOY6JBOJJ37qJ6YDqp7SodQdBpCG7biDT8qMAMYov/s1600/arrow-up_basic_blue.png'/></div>

7. Simpan widget

Sekian artikel tentang Membuat Tombol Back To Top Dengan Efek Bounce semoga bermanfaat ...

Subscribe to receive free email updates:

6 Responses to "Membuat Tombol Back To Top Dengan Efek Bounce/Memantul"

  1. Nice tutor gan ,,nambah ilmu ane nih gan

    tannks gan :D

    ReplyDelete
  2. Menarik, izin coba untuk kreasi :)

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. Saya Blogger baru, Nice tutor Mas :D
    kunjungan Balik yaa :D

    ReplyDelete

Dilarang menyisipkan link aktif
Dilarang merokok

Stay away from drugs! Because you can't full enjoying the music without full conciusness.