Cara Membuat Tombol Back To Top Di Blog - Tombol back to top atau tombol kembali ke atas merupakan salah satu sarana yang dipasang di blog, yang fungsinya untuk mempermudah para pembaca blog kembali ke atas blog dengan cepat. Tombol ini biasanya dipasang pada blog yang memuat artikel-artikel yang cukup panjang, sehingga dengan satu kali klik saja, pembaca dapat dengan mudah kembali ke awal artikel.
Bagi Anda yang menggunakan template blog namun belum ada tombol back to top-nya, Anda dapat membuatnya dengan mudah. Berikut ini langkah-langkah membuat tombol back to top di blog Anda :
1. Login ke blog Anda.
2. Pada menu navigasi, pilih "Tema" > klik "Edit HTML".
3. Copy kode di bawah ini dan paste diatas kode ]]></b:skin>
#back-to-top {background: #E73037;color: #ffffff;padding: 8px 10px; font-size:24px}
.back-to-top {position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}
4. Selanjutnya copy script dibawah ini dan paste diatas kode </body>
<div class='back-to-top'>
<a href='#' id='back-to-top' title='back to top'>
<i class='fa fa-chevron-up'/>
</a></div>
<script>
$(window).scroll(function() {
if($(this).scrollTop() > 200) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').hide().click(function() {
$('html, body').animate({scrollTop:0}, 1000);
return false;
});
</script>
5. Copy kode dibawah ini dan paste diatas kode </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
6. Setelah selesai menempatkan kode, klik tombol "Simpan tema".
Selain cara di atas, Anda juga bisa menggunakan cara berikut ini :
1. Copy script dibawah ini dan paste ke widget blog Anda
<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;
background-color:transparent;
font-size: 12px;
padding: 1em;
display: none;
z-index:9999;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSeS1H-tzY2ho9R-uugK2eZMv-LqiBPZ1wVW4b24oHl9_GLDFmnKauoySpn1oyMf4HUrl12oXeMwg8RFmV86LOCNfGvVbbXHqswSIqNyU-D8ZRLmsOtGBEI8dgYVm6EPwhfJq9nHUbv_su/s1600/back-to-top.png" alt="Back To Top" / /></a>
2. Setelah selesai menempatkan script, klik tombol "Simpan".
- Url gambar warna Merah dapat Anda ganti dengan url gambar Anda.
Itulah Cara Membuat Tombol Back To Top yang dapat Anda lakukan dengan mudah. Semoga bermanfaat.
Share artikel... !
