RADARUTARA.ID - Tombol Back to Top merupakan salah satu fitur sederhana yang dapat meningkatkan kenyamanan pengunjung saat menjelajahi sebuah blog. Fitur ini memungkinkan pengguna kembali ke bagian atas halaman hanya dengan satu klik, tanpa perlu melakukan scroll secara manual. Tombol ini sangat berguna, terutama pada artikel yang memiliki isi panjang.
Selain meningkatkan pengalaman pengguna (User Experience), tombol Back to Top juga membuat tampilan blog terlihat lebih modern dan profesional. Jika dirancang dengan desain yang responsive serta menggunakan script yang ringan, fitur ini tidak akan membebani kecepatan loading halaman sehingga tetap mendukung performa SEO blog.
Pada tutorial kali ini, Anda akan mempelajari cara membuat tombol Back to Top responsive di Blogger yang ringan dan modern tanpa memerlukan plugin tambahan. Tombol akan tampil otomatis saat halaman digulir ke bawah, memiliki animasi yang halus, kompatibel dengan berbagai perangkat, serta dapat diterapkan pada hampir semua template Blogger dengan proses pemasangan yang mudah.
Cara Memasang Tombol Back To Top Rensponsive Keren
1. Login ke Blogger > Klik Template > Edit HTML > Tambahkan kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>
/* Back To Top */
.backtotop{display:none}.backtotop{position:fixed;bottom:50px;right:0;cursor:pointer;font-weight:bold;box-shadow:-5px 5px rgba(0,0,0,.1);padding:10px;background-color:#fff;opacity:.6}.backtotop span{background-image:url(https://2.bp.blogspot.com/-QLZM-aUhB6w/VyL3AeOfEfI/AAAAAAAADBU/g6Ff-NvsU_c3ZZn3LM0luDDCRnQjzEK9wCLcB/s1600/icon.png);background-position:0 -272px;background-repeat:no-repeat;height:25px;width:22px;display:inline-block;vertical-align:middle;margin-right:5px }.backtotop:hover{opacity:1}
2. Setelah itu tambahkan kode di bawah ini tepat sebelum kode </body>
<div class="backtotop hide"><span></span>Atas</div>
<script type='text/javascript'>
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},800),!1})});
</script>
3. Terakhir simpan template dan lihat hasilnya.
Cara Memasang Tombol Back To Top Rensponsive Ringan :
Peranan dan fungsi dari tombol back to top sendiri cukup penting yaitu memberikan kemudahan bagi pengunjung yang ingin mengscroll halaman kembali ke atas dengan hanya mengklik satu tombol.
Catatan : Jika di template sudah ada tombol back to top, silahkan hapus terlebih dahulu.
Berikut cara pemasangannya :
1. Login ke Blogger Dashboard > pilih blog > pilih Template > kemudian klik Edit HTML, simpan kode di bawah ini setelah <head> atau sebelum </head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Jika di template anda sudah terpasang Fontawesome di atas, abaikan langkah pertama lanjut ke langkah berikutnya.
2. Simpan CSS di bawah ini sebelum ]]></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;
}
3. Simpan jQuery dan HTML di bawah ini sebelum </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>
4. Setelah itu simpan template dan lihat hasilnya.
Dengan tambahan efek bounce
<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’).animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>
Untuk setingan warna dan lainnya bisa anda edit kembali sesuai selera, sekian dari saya. Selamat pagi dan semoga bermanfaat.
Dengan menambahkan tombol Back to Top responsive di Blogger, pengunjung dapat menavigasi halaman dengan lebih cepat dan nyaman, terutama ketika membaca artikel yang panjang. Selain mempercantik tampilan blog, fitur ini juga memberikan pengalaman pengguna yang lebih baik tanpa mengurangi performa kecepatan halaman karena menggunakan script yang ringan dan efisien.
Demikian tutorial mengenai cara membuat tombol Back to Top responsive di Blogger yang ringan dan modern. Semoga panduan ini dapat membantu Anda meningkatkan kualitas tampilan sekaligus kenyamanan navigasi blog. Jika Anda mengalami kendala saat mengikuti langkah-langkah di atas atau memiliki pertanyaan seputar Blogger, silakan tuliskan di kolom komentar. Jangan lupa untuk terus mengikuti tutorial Blogger lainnya agar blog Anda semakin menarik, cepat, dan optimal di mesin pencari.
