Kali ini saya akan membahas wacana bagaimana Cara Membuat Tombol Back to Top Keren di Blog. Tombol back to top pada blog sendiri berfungsi sebagai kepraktisan navigasi pada blog. Orang yang sedang membaca artikel blog sudah hingga bawah dan kemudian ingin kembali ke bab paling atas sudah tidak perlu repot-repot scroll lagi.
Namun hanya dengan menekan tombol back to top sekali saja eksklusif auto scroll ke posisi paling atas artikel blog. Walaupun kini di internet sudah banyak bertebaran artikel-artikel wacana cara pemasangan tombol back to top di blog. Namun saya akan sharing yang agak berbeda.
Cara Membuat Tombol Back to Top Keren di Blog
- Seperti biasa login terlebih dahulu ke akun blogger sobat
- Pilih blog yang akan sahabat edit, masuk ke hidangan Tema >> Edit HTML
- Copas isyarat dibawah ini diatas kode </head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
- Kemudian copas isyarat dibawah ini kemudian taruh diatas isyarat ]]></b:skin>
.smoothscroll-top { position:fixed; opacity:0; visibility:hidden; overflow:hidden; text-align:center; z-index:99; background-color:#2ba6e1; color:#fff; width:47px; height:44px; line-height:44px; right:25px; bottom:-25px; padding-top:2px; border-radius:5px; transition:all 0.5s ease-in-out; transition-delay:0.2s;}.smoothscroll-top:hover { background-color:#3eb2ea; color:#fff; transition:all 0.2s ease-in-out; transition-delay:0s;}.smoothscroll-top.show { visibility:visible; cursor:pointer; opacity:1; bottom:25px;}.smoothscroll-top i.fa { line-height:inherit;}
- Pasang juga isyarat dibawah ini diatas isyarat </body>
<div class="smoothscroll-top">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('.smoothscroll-top').addClass('show');
} else {
$('.smoothscroll-top').removeClass('show');
}
});
$('.smoothscroll-top').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>
- Jika sudah terpasang semua eksklusif klik "Simpan"
- Selesai.