Cara Membuat Tombol Back To Top Keren di Blog

SimBale

Selamat pagi sobat SimBale. Wah saya merasa heran kalau membuka hompage website ini kok widget sebelah kanannya bisa turun itu kenapa coba, mungkin sobat tahu masalahnya bisa membenarkannya nanti admin beri hadiah deh... Oke kali ini admin akan posting sebuah artikel tentang Tips SEO. Tips kali ini adalah Cara Membuat Tombol Back To Top Keren di Blog. Tombol back to top berfungsi bila di klik akan kembali ke halaman bagian paling atas, seperti di blog ini. Untuk sobat yang mau memasangnya saya jamin tidak membuat berat blog sobat. Oke berikut adalah caranya...

Cara Pasang :

Login ke akun gmail sobat
Masuk ke dasbor blogger
Lalu pilih blog yang akan sobat pasang
Kemudian pilih Template => Edit HTML
Cari kode </head> lalu copas kode dibawah ini :

<style> .mbw-back-to-top { position: fixed; bottom: 2em; right: 10px; text-decoration: none; padding: 1em; display: none; cursor:pointer; } </style> <img class="mbw-back-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgojH_K6-I6roak_qhUjs0topMMxUUTZEyW4Ii_nQwMd_g5BqkDvJAfMuCsinYrFPpdm4X7BZK3yBza8f7rN_4hxvfTfkACPFdW4j8sv7R8SjxjFTPsIjMa2u4a2piJ4B3V6PFpa0uecTs/s1600/back+to+top.png" /> <script type="text/javascript"> /*****mybloggersworld.com***/ jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.mbw-back-to-top').fadeIn(duration); } else { //www.mybloggersworld.com jQuery('.mbw-back-to-top').fadeOut(duration); } }); jQuery('.mbw-back-to-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script>

6. Atau sobat bisa masuk Tata Letak => Tambah Gadget => HTML/Javascript
7. Lalu masukkan kode diatas tadi.
8. Selesai.

NB : Ganti kode berwarna merah dengan gambar back to top sobat.

Semoga bermanfaat
Best Regards
Admin - Aditya