Cara membat tombol back to top di blogger sangatlah mudah jika anda mengikuti tutorial ni sampai selesai dan teliti.
Tombol back to top ini merupakan fitur yang penting untuk blog yang memang memiliki artikel yang panjang.
Dengan adanya tombol back to top ini pembaca dapat dengan mudah kembali ke awal dari bacaannya tanpa harus scroll mouse cukup dengan klik tombolnya maka layar akan kembali ke awal dari bacaan yang mereka baca.
Contohnya adalah tombol putih di pojok kanan bawah blog kenny kenscripts ini. Sangat berfungsi dengan baik tombol back to top ini.
Baiklah berikut tutorial membuat tombol return to top dengan icon font awesome.
1. Copy dan Paste link fontawesome berikut dan letakkan di antara tag <head>...</head>
<link href='https://use.fontawesome.com/releases/v5.2.0/css/all.css' rel='stylesheet'/>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css' rel='stylesheet'/>
Pilihlah salah satunya
2. Copy dan Paste kode CSS tepat di atas tag </head>
/* Back to top */
#back-to-top {
background:#ffffff;
color:#2196f3;
padding:8px 10px;
font-size:24px;
border-radius: 4px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.15), 0 1px 1px 0 rgba(0,0,0,.30);
}
.back-to-top {
position: fixed !important;
position: absolute;
bottom: 25px;
right: 20px;
z-index: 998;
}
3. Copy dan Paste kode HTML dan Javascript tepat di atas tag </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>
4. Done simpan
Catatan
Ganti icon fontawesome sesuai keinginan anda untuk icon lainnya anda bisa cek di website resmi Fontawesome di sana lebih dari 5000 icon yang siap digunakan gratis.
Untuk cara pemasangan Fontawesome anda bisa cek artikel kenny Cara pasang fontawesome secara online dan offline
Sekian artikel kali ini kenny bagikan cara membuat tombol back to top dengan fontawesome.
Terima kasih telah berkunjung.