Cara Membuat Tombol Back to Top di Blog - TipiKomu

Back to top adalah sebuah tombol yang ketika di klik maka halaman yang sedang kita kunjungi atau halaman yang sedang aktif dibrowser kita akan otomatis scroll keatas tanpa harus mengscrollnya lagi menggunakan touchpad atau mouse, tentu saja tombol ini akan sangat berguna bagi pengunjung blog kalian, tombol ini akan memudahkan pengunjung kalian untuk menscroll keatas dengan hanya mengklik tombol back to top.

Kalian bisa menemukan contoh tombol back to top di blog ini ketika kalian menscroll kebawah makan tombol back to top akan muncul sendirinya di sudut bawah kanan, nah pada pos kali ini saya akan mengajarkan cara membuat tombol back to top

Cara Membuat Tombol Back to Top di Blog :

1. pastikan html blog kalian memiliki kode jquery, kodenya seperti ini

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

atau seperti ini

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

kalau html blog kalian belum memiliki kode seperti diatas cukup tambahkan saja
– masuk ke blogger.com lalu pilih blog yang ingin ditambakan kode jquery
– klik Template > Edit Html
– cari kode </head> (tekan ctrl+f lalu ketik </head> di kolom yang muncul lalu tekan Enter)
– lalu copy salah satu code diatas lalu paste tepat diatas kode </head>
– lalu klik Simpan Template

2. klik Tata Letak

3. klik Tambahkan Gadget di sidebar

4. pilih HTML/JavaScript

5. copy dan paste code 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/AVvXsEjeg-UPQdO3rMVEhcPKYy_Zgml1x3tjCRmjsLoudiHfJQXKQZKSuKSxqdyZSNK8tnQCOIwz1qz7O-PCHYqU7p5cQDqb39n-rqf90GDcfAipc8fI4Yz2DO94aTpRWUFozA2CYBD3ItoOLak/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>

kalian bisa merubah kode warna merah dengan url gambar back to top yang ingin kalian tampilkan di blog, kalian bisa mencari gambar back to top di google atau membuatnya sendiri
nah dengan begini blog kalian sudah mempunyai tombol back to top yang akan mempermudah pengunjung untuk menscroll keatas

semoga Cara Membuat Tombol Back to Top di Blog bisa bermanfaat dan berguna bagi kalian