Cara Membuat Tombol Back to Top di Blog

Back to Top atau "Kembali ke Atas" adalah salah satu tombol yang biasanya terletak di bagian bawah suatu website atau blog untuk membantu pengunjung kembali ke atas halaman sebuah postingan. Tombol ini mempunyai peranan yang cukup penting karena berfungsi meng-scroll untuk kembali ke bagian atas sehingga kita tidak perlu lagi menggunakan scroll mouse secara manual untuk kembali menuju ke atas.

Tombol Back to Top yang akan saya bagikan ini mempunyai efek bounce yaitu seperti efek pantulan pada saat kembali ke atas dan efek fade in/fade out yaitu tombol muncul secara perlahan ketika discroll ke bawah. Untuk preview sobat bisa lihat pada blog ini.

Langsung aja ya disimak tutorialnya :)

1. Login ke Blogger

2. Klik Template kemudian Edit HTML, ada baiknya backup dulu template sobat

3. Cari kode </head> menggunakan CTRL+F agar lebih mudah

4. Simpan kode jQuery ini tepat di atas kode </head> tadi. Tapi jika blog sobat sudah ada maka lewati langkah ini

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

5. Simpan kode ini masih di atas </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>

6. Jika sudah, simpan template sobat

7. Masuk ke menu Tala Letak/Layout

8. Buat widget baru HTML/JavaScript kemudian simpan kode di bawah 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/AVvXsEjj3kH8YfZBYuF7KP5NmWlLZdBGA68jNGhIM4bNUTvlNWKUFovz98vwxcGFKzbh4TzQiAJq20yoHinlncweoRbPVSp3jaZN6MQdjSxWEWbUMT7UPS0JrSj3SSBX_6hy-Ku3pp_XJoFE_TSH/s1600/top_up.png'/></div>

Note : Warna Pink adalah URL model gambar tombol Back to Top, sobat bisa mengganti URL gambar sesuai selera sobat.

9. Klik Simpan dan lihat hasilnya

Demikian tutorial sederhana tentang Cara Membuat Tombol Back to Top di Blog. Terima kasih telah berkunjung. Semoga bermanfaat!

Browse More Articles

Tweet

Written by Unknown

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.