Cara Membuat Tombol Back to Top dengan Efek Bounce

Apa kabar semuanya? kembali lagi dengan saya Lingga Novandra yang selalu setia menemani anda semua dalam pembelajaran dunia blogging. Pada tutorial kali ini saya akan membahas tentang bagaimana Cara Membuat Tombol Back to Top dengan Efek Bounce. Sebenarnya tutorial ini sudah banyak yang mengetahuinya, tapi sekarang saya hanya mengulanginya lagi supaya para pengguna internet yang baru terjun ke dunia blogging dapat mengetahuinya. Manfaat dari tombol back to top ini adalah untuk mempermudah anda dalam melakukan scroll ke atas, maka secara otomatis dia akan kembali ke atas dengan sendirinya, dan yang pasti menggunakan efek bounce (memantul) supaya terlihat lebih keren.
Cara Membuat Tombol Back to Top dengan Efek Bounce

Untuk para blogger yang belum tahu Cara Membuat Tombol Back to Top dengan Efek Bounce ini, silahkan ikuti langkah - langkah berikut.
  1. Login ke blogger
  2. Pilih Template
  3. Cari kode </head>, kemudian letakkan script berikut tepat di atas kode </head>.
  4. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    $(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;100) { $(&#39;#BounceToTop&#39;).fadeIn(); } else { $(&#39;#BounceToTop&#39;).fadeOut(); } });$(&#39;#BounceToTop&#39;).click(function() { $(&#39;body,html&#39;).animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
    </script>
  5. Cari kode <body>, kemudian letakkan script berikut tepat di bawah kode <body>.
  6. <style scoped='scoped' type='text/css'>
    #BounceToTop{position:fixed;bottom:0px;right:3px; cursor:pointer;display:none}
    </style>
    <div id='BounceToTop'><img alt='Back to top' src='http://www.superdruglookatme.com/wp-content/themes/superdrug/images/top.png'/></div>
  7. Simpan template.

Perhatian :
  • Untuk mengganti icon tombol back to top, silahkan ganti link URL gambar yang berwarna biru di atas dengan URL gambar yang anda inginkan.

Demikian tutorial yang dapat saya bagikan tentang Cara Membuat Tombol Back to Top dengan Efek Bounce. Semoga bermanfaat. Jangan lupa tinggalkan komentarnya, karena komentar anda sangat berarti buat saya.

0 komentar:

 
© Copyright 2016 Lingga Mendunia. All Rights Reserved | Powered by Blogger.com
Created by Lingga Novandra