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=" Dalam sebuah blog pasti menampilkan memanjang kebawah Cara Menambahkan Tombol Back to Top pada Blog Kalian Agar Terlihat Profesional" / /></a>
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=" Dalam sebuah blog pasti menampilkan memanjang kebawah Cara Menambahkan Tombol Back to Top pada Blog Kalian Agar Terlihat Profesional" / /></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....
BACA JUGA ARTIKEL SAYA YANG LAIN YA :
Advertisement