Cara Membuat dan Memasang Back to Top Smooth di Blogger
Jagoandzgn.com - Berbicara mengenai tampilan website memang tidak ada habis nya, apalagi sekarang dengan banyak nya teknologi yang bisa kita pakai untuk membuat sebuah desain web, akan tetapi tampilan saja tidaklah cukup, maka dari itu sebuah web harus memenuhi untuk user interface atau biasa yang disebut UI. Nah, berikut ini ada satu contoh unsur UI pada desain web yakni fungsi back-to-top.
Fungsi back-to-top itu banyak sekali dipakai karena akan mempermudah pengguna dalam melihat halaman web. Bayangkan saja jika pada satu halaman web terdapat banyak konten maka otomatis kita sebagai pengguna harus scroll untuk melihat nya. Berbeda jika ada fungsi back-top-top tersedia pada halaman web maka kita cukup klik tombol back-to-top maka akan secara otomatis halaman akan menggulung atau scroll ke atas.
Mungkin sudah banyak tutorial Pasang back to top di pencarian google. Kali ini admin juga akan memberikan tutorial tersebut. walaupun fungsi dari back to top ini sepele, namun ini memagang peranan penting bagi pengunjung blog, untuk kemudahan yang di berikan yaitu jika ingin mengscroll ke atas hanya dengan mengklik satu tombol.
Cara Membuat dan Memasang Smooth Back to Top di Blogger
1. Silahkan kamu login ke Blogger.com dengan menggunakan Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML Selanjutnya pastekan kode Fontawesome di bawah ini tepat DIBAWAH kode <head>.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>Apabila kamu sudah Terpasang kode Fontawesome seperti diatas, silakan kamu abaikan langkah tersebur, dan lanjut ke langkah berikutnya.
3. Kemudian masukan kode CSS dibawah ini SEBELUM/DIATAS ]]></b:skin> atau </style>.
.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;
}4. Lalu masukan kode JQuery dan HTML ini, tepat SEBELUM/DIATAS Kode </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>5. Kalau sudah silahkan klik SIMPAN dan Selesai.
Apabila kalian sudah menerapkan tutorial tersebut anda bisa melihat DEMO dari smooth tersebut dengan mengklik tombol demo dibawah ini.
Untuk setting warna silakan rubah sesuai keinginan kalian. Semoga artikel ini dapat bermanfaat. Sekian dan terima kasih.
Bagaimana mudah bukan untuk tutorial Cara Membuat dan Memasang Smooth Back to Top di Blogger apabila kamu memiliki masalah atau error silahkan komen di kolom komentar dibawah artikel ini.
Label: tutorial
diposting oleh Admin @ Januari 10, 2020
0 Komentar
0 Komentar:
Posting Komentar
Berlangganan Posting Komentar [Atom]
<< Beranda