Tutorial: Cara Mudah Menambahkan Tombol Back to Top di Blogger
linkkoe.my.id - Jika ingin meningkatkan pengalaman pengunjung blog Anda dan memberikan kemudahan bagi mereka untuk kembali ke bagian atas halaman, memasang tombol "Back to Top" adalah pilihan yang bijak. Dalam tutorial ini, saya akan membimbing Anda langkah demi langkah tentang cara menambahkan tombol kembali ke atas dengan desain yang sederhana namun keren, beserta efek smooth scroll, di platform Blogger. Dengan mengikuti panduan ini, Anda dapat meningkatkan navigasi dan kenyamanan pembaca blog Anda.
Langkah 1: Masuk ke Blogger Dashboard
Langkah pertama adalah masuk ke dashboard Blogger Anda. Pastikan Anda sudah login dengan akun yang terkait dengan blog yang ingin Anda tambahkan tombol "Back to Top"-nya.
Langkah 2: Pilih Edit HTML
Setelah masuk ke dashboard, pilih opsi "Tema" dan kemudian klik "Edit HTML". Ini akan membawa Anda ke editor kode untuk mengelola template blog Anda.
Langkah 3: Tambahkan Kode CSS
Pertama-tama, kita perlu menambahkan kode CSS untuk mendesain tampilan tombol "Back to Top". Letakkan kode berikut sebelum kode `]]></b:skin>` atau `</style>`:
/* Back to top button caramanual.com */
.scroll-top-wrapper {
position: fixed;
opacity: 0;
visibility: hidden;
overflow: hidden;
text-align: center;
z-index: 99999999;
background-color: #777777;
color: #eeeeee;
width: 50px;
height: 48px;
line-height: 48px;
right: 30px;
bottom: 30px;
padding-top: 2px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover {
background-color: #888888;
}
.scroll-top-wrapper.show {
visibility:visible;
cursor:pointer;
opacity: 1.0;
}
.scroll-top-wrapper i.fa {
line-height: inherit;
}
Kode di atas mengatur tampilan tombol, termasuk posisi, warna latar belakang, warna teks, dan beberapa properti lainnya. Anda dapat menyesuaikannya sesuai dengan preferensi desain Anda.
Langkah 4: Tambahkan HTML untuk Tombol
Terakhir, tambahkan HTML untuk tombol "Back to Top". Tempatkan kode berikut di tempat yang Anda inginkan di dalam template, biasanya di akhir sebelum `</body>`:
<!-- Back to top button caramanual.com -->
<div class="scroll-top-wrapper">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('.scroll-top-wrapper').addClass('show');
} else {
$('.scroll-top-wrapper').removeClass('show');
}
});
$('.scroll-top-wrapper').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
}
</script>
Simpan dan Lihat Perubahannya
Setelah menambahkan semua kode di atas, jangan lupa untuk menyimpan perubahan yang telah Anda lakukan pada editor HTML. Selanjutnya, buka blog Anda dan lihatlah tombol "Back to Top" yang baru muncul ketika Anda menggulir ke bawah.
Dengan menambahkan tombol "Back to Top" dengan desain yang menarik dan efek smooth scroll, Anda memberikan pengalaman yang lebih baik bagi pembaca blog Anda. Mereka dapat dengan mudah kembali ke bagian atas halaman tanpa harus melakukan scroll manual. Semoga tutorial ini membantu meningkatkan kualitas blog Anda! (lk)