Cara Menambahkan Tombol Back to Top pada Blog Kalian Agar Terlihat Profesional

Rona Febriana - Dalam sebuah blog pasti menampilkan memanjang kebawah. Sedangkan jika pembaca berada pada posisi bagian bawah blog dan akan kembali keatas akan merasa sedikit sulit karena harus melakukan scrool. Untuk itu anda dapat menambahkan tombol Back to Top, supaya pembaca lebih mudah untuk kembali ke bagian atas blog.

Simak caranya berikut ini


1. Masuk ke dasbord blog anda lalu pilih template/tema



2. Setelah itu klik edit HTML



3. Lalu masuk ke halaman edit HTML, dan cari kode <head>. Untuk memudahkan silahkan tekan CTRL + F untuk memunculkan kolom Search, lalu ketikan <head> dan tekan enter.



4. Lalu copy kode dibawah ini dan tempel tepat dibawah kode <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>



lalu tekan simpan template


5. Lalu masuk ke menu Tata letak










6. Pilih Tambahkan Gadget yang mana saja bebas



7. Lalu pilih yang HTML/JavaScript



8. Lalu masukan kode berikut

<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="http://i254.photobucket.com/albums/hh113/aris_image/back-to-top-icon.png" alt="Back to Top" / /></a>




Lalu klik simpan


9. Klik juga simpan setelan



10. Coba buka blog anda dan scrool ke bagian bawah blog dan taraaaaaa tombol back to top akan muncul. Dan jika di klik akan otomatis menuju bagian atas blog



Nah itulah tutorial kali ini, semoga bermanfaat yaaa. Terima kasih sudah mampir....

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel