Cara Membuat Animasi Back to Top

Disini kami ingin memberi tahu langkah langkah untuk membuat animasi Back to Top pada Blog. Langkah-langkah nya yaitu :

1. Klik "Template" seperti pada gambar
 

2. Klik "Edit HTML" untuk masuk ke dalam kolom yang berisi kode HTML dari blog anda, karena kita akan memasukan beberapa script untuk animasi Back to Top ini

3. Simpan kode JQuery berikut ini diatas </head>

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

   Simpan kode berikut ini masih diatas </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>

   Berikut adalah contoh SS nya

 4. Langkah terakhir, buat Widget baru HTML/JavaScript di blog anda, lalu simpan kode berikut 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/AVvXsEhZb6GcrFeO20uln0QuQSLMsR7UMG3-8YSLswyrMvvktX0IwcoiZAXrX34HDfbH0n75ExiFFfU5L3RSCDqg1XYWPa2-IMK95on9pEfbpAaZo3kwJD2cBXo0-19aBNVPZdBSoqR3po2_8UIX/s1600/arrow-up_basic_blue.png'/></div>

Dan Animasi Back to Top akan otomatis terlihat di halaman pojok kanan bawah dari blog anda
Untuk yang belum mengetahui cara menambahkan Widget, silahkan ke postingan kami yang sebelumnya atau klik Cara Menambah Widget untuk Menghias Blog