Pertanyaan "Apa sih fungsi tombol back to top ini untuk pengguna blogger?" Ya, fungsi dari tombol back to top ini di blog. Sebagai langkah cepat atau navigasi saat kita membaca artikel yang panjang tentunya ke bawah kan ya? otomatis kita akan kembali lagi ke atas menggunakan keyboard atau mouse.
Dengan adanya tombol back to top ini di blog, akan memudahkan pengguna (Audiens) juga pemilik blognya. Secara, dengan sekali klik saja sobat sudah bisa kembali ke halaman content atas artikel tanpa ribert-riber menggunakan mouse dan jari tangan.
Tombol yang simpel tapi manfaatnya banyak, jika Sobat mau memasang tombol back to top ini, silahkan ikuti langkah-langkah dibawah ini.
Cara Memasang Tombol Smooth Back To Top di Blog
1. Login ke akun Blogger ↣ Template ↣ Edit HTML ↣ Kemudian letakan kode dibawah ini tepat sebelum
2. </head>
2. </head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>3. </style>
.smoothscroll-top {
position:fixed;
opacity:0;
visibility:hidden;
overflow:hidden;
text-align:center;
z-index:99;
background-color:#22A7F0;
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;
}4. </body>
<div class="smoothscroll-top">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-angle-double-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>Kalau sudah semua, Sobat simpan perubahan template dan lihat hasilnya.
Gimana? keren kan? Ya, kalau Sobat mau ada sedikit efek! silakan ganti Javascript (4) diatas dengan Javascript dibawah ini.
Baca juga : Cara Menghilangkan atau Menghapus Atribusi di Blog
Bounce Effect Contents
<div class="smoothscroll-top">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-angle-double-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').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>Hemm, akhirnya selesai juga ^_^, untuk color bisa Sobat sesuaikan dengan selera Sobat sendiri. Dan kali ini, sekian disini dulu ya Sobat untuk tutorial Cara Memasang Tombol Smooth Back To Top di Blog, Semoga bermanfaat.
0 komentar