Beranda / Semua Postingan / Tips Blogger

Cara Pasang Tombol Back to Top (Smooth Scroll) di Blogger Paling Mudah

Posting Komentar
Cara memasang tombol Back to Top Smooth Scroll di Blogger

Ketika membaca artikel yang panjang, pengunjung harus menggulir layar cukup jauh untuk kembali ke bagian atas halaman. Jika blog memiliki banyak konten, proses tersebut bisa terasa kurang praktis, terutama ketika pengunjung ingin kembali ke menu navigasi atau bagian atas artikel.

Salah satu solusi sederhana adalah memasang tombol Back to Top di Blogger. Tombol ini akan muncul setelah halaman digulir ke bawah dan dapat digunakan untuk kembali ke bagian atas halaman dengan efek smooth scroll.

Pada tutorial ini, Anda akan mempelajari cara membuat tombol kembali ke atas di Blogspot menggunakan HTML, CSS, dan JavaScript. Kodenya dibuat sederhana agar mudah diterapkan pada berbagai template Blogger, meskipun kompatibilitas tetap perlu diuji pada template yang Anda gunakan.

Apa Itu Tombol Back to Top?

Back to Top adalah tombol navigasi yang memungkinkan pengunjung kembali ke bagian paling atas halaman tanpa harus menggulir layar secara manual. Biasanya tombol ini ditempatkan secara melayang di sudut kanan atau kiri bawah layar.

Pada tutorial ini, tombol tidak langsung ditampilkan ketika halaman pertama kali dibuka. Tombol baru akan muncul setelah pengunjung menggulir halaman melewati batas tertentu. Ketika tombol diklik, halaman akan bergerak kembali ke bagian atas menggunakan efek scroll yang lebih halus.

Manfaat Memasang Back to Top di Blogger

Fitur Back to Top terutama berguna untuk meningkatkan kenyamanan navigasi, khususnya pada artikel yang panjang. Pengunjung mendapatkan akses cepat untuk kembali ke bagian atas tanpa melakukan scroll berkali-kali.

  • Mempermudah navigasi pada artikel panjang.
  • Menghemat usaha pengunjung saat kembali ke bagian atas.
  • Membuat navigasi blog terasa lebih praktis.
  • Dapat memberikan sentuhan visual yang lebih modern.
  • Tidak membutuhkan plugin atau library JavaScript eksternal.

Perlu diperhatikan bahwa tombol Back to Top bukan jaminan peningkatan ranking Google. Manfaat utamanya adalah memberikan pengalaman navigasi yang lebih baik kepada pengunjung.

Contoh Penggunaan Back to Top

Misalnya Anda memiliki artikel tutorial dengan panjang beberapa ribu kata. Setelah membaca sampai bagian tengah atau akhir artikel, pengunjung ingin kembali ke menu navigasi di bagian atas.

Tanpa tombol Back to Top, mereka harus menggulir layar secara manual hingga mencapai bagian paling atas. Dengan tombol ini, pengunjung cukup menekan ikon panah yang muncul di sudut layar untuk kembali ke atas secara otomatis.

Kode Back to Top Blogger dengan Smooth Scroll

Berikut kode lengkap yang dapat Anda gunakan. CSS digunakan untuk mengatur tampilan tombol, sedangkan JavaScript menangani kemunculan tombol dan fungsi scroll ke bagian atas halaman. 

<style>
/* Tombol Back to Top Blogger */
#tombol-ke-atas-blogger {
    display: none;
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 9999;
    width: 45px;
    height: 45px;
    background: #007bff;
    color: #ffffff;
    border-radius: 50%;
    text-align: center;
    line-height: 45px;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,.20);
    transition: background-color .3s ease,
                transform .3s ease,
                opacity .3s ease;
}

#tombol-ke-atas-blogger:hover {
    background: #0056b3;
    transform: translateY(-3px);
}

/* Tampilan pada perangkat mobile */
@media screen and (max-width: 600px) {
    #tombol-ke-atas-blogger {
        right: 15px;
        bottom: 15px;
        width: 42px;
        height: 42px;
        line-height: 42px;
        font-size: 20px;
    }
}
</style>

<div
id="tombol-ke-atas-blogger"
title="Kembali ke atas"
aria-label="Kembali ke atas">
&#8679;
</div>

<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {

    var tombolAtas =
        document.getElementById("tombol-ke-atas-blogger");

    if (!tombolAtas) {
        return;
    }

    window.addEventListener("scroll", function() {

        if (window.pageYOffset > 300) {
            tombolAtas.style.display = "block";
        } else {
            tombolAtas.style.display = "none";
        }

    });

    tombolAtas.addEventListener("click", function() {

        window.scrollTo({
            top: 0,
            behavior: "smooth"
        });

    });

});
//]]>
</script>

Cara Memasang Tombol Back to Top di Blogger

1. Backup Template Blogger

Sebelum mengubah kode template, sebaiknya buat cadangan template terlebih dahulu. Backup berguna untuk mengembalikan template ke kondisi sebelumnya jika terjadi kesalahan saat melakukan perubahan.

2. Buka Menu Tema

Masuk ke dashboard Blogger, kemudian pilih blog yang ingin Anda modifikasi. Setelah itu buka menu Tema untuk mengakses pengaturan template.

3. Pilih Edit HTML

Buka editor HTML template melalui opsi Edit HTML. Anda akan melihat kode sumber yang digunakan untuk membangun tampilan blog.

4. Cari Tag </body>

Klik area kode template, kemudian gunakan fitur pencarian editor dengan menekan Ctrl + F pada Windows atau kombinasi pencarian yang tersedia pada perangkat Anda.

Cari tag berikut: 

</body>

Setelah ditemukan, letakkan kode Back to Top tepat sebelum tag penutup </body>.

5. Tempelkan Kode

Salin seluruh kode CSS, HTML, dan JavaScript yang tersedia pada bagian Kode Back to Top Blogger. Kemudian tempelkan tepat di atas tag </body>.

Pastikan tidak ada bagian kode template lain yang ikut terhapus atau berubah. Jika editor menampilkan error setelah kode ditempelkan, jangan langsung menyimpan perubahan sebelum memeriksa kembali struktur kode.

6. Simpan Perubahan

Jika kode sudah ditempatkan dengan benar, simpan perubahan template kemudian buka blog Anda untuk melakukan pengujian.

Cara Menguji Tombol Back to Top

Setelah kode berhasil dipasang, buka halaman utama blog atau salah satu artikel yang cukup panjang. Ketika halaman pertama kali dibuka, tombol seharusnya belum terlihat.

Kemudian gulir halaman ke bawah lebih dari sekitar 300 piksel. Jika script berjalan dengan benar, tombol berbentuk lingkaran akan muncul di sudut kanan bawah layar.

Klik tombol tersebut. Halaman seharusnya bergerak kembali ke posisi paling atas dengan efek smooth scroll tanpa melakukan reload halaman.

Kesalahan Umum Saat Memasang Back to Top

Kode Tidak Ditempatkan di Atas </body>

Kesalahan yang sering terjadi adalah menempelkan kode di lokasi yang tidak tepat. Untuk kode pada tutorial ini, seluruh blok kode dapat ditempatkan sebelum tag </body> agar elemen tombol dan JavaScript dapat diproses dengan baik.

ID Tombol Bertabrakan dengan Template

Template custom terkadang sudah memiliki elemen dengan fungsi serupa. Untuk mengurangi kemungkinan konflik, kode ini menggunakan ID yang cukup spesifik, yaitu tombol-ke-atas-blogger.

Jika template Anda sudah memiliki tombol Back to Top, sebaiknya jangan memasang dua script dengan fungsi yang sama karena dapat menyebabkan perilaku yang tidak diharapkan.

Tombol Tidak Muncul

Jika tombol tidak muncul setelah halaman digulir, periksa apakah JavaScript berhasil dijalankan dan pastikan tidak terdapat error pada template. Anda juga dapat membuka Developer Tools pada browser untuk melihat pesan error JavaScript jika diperlukan.

Tombol Terlihat Berantakan

Jika desain tombol berubah setelah dipasang, kemungkinan terdapat CSS template yang memengaruhi elemen tersebut. ID yang digunakan sudah dibuat spesifik, tetapi pada template tertentu mungkin tetap diperlukan penyesuaian CSS.

Tips Agar Tombol Back to Top Tetap Nyaman

  • Gunakan ukuran tombol yang mudah disentuh pada perangkat mobile.
  • Pastikan tombol tidak menutupi tombol navigasi atau elemen penting lainnya.
  • Gunakan warna yang kontras dengan latar belakang halaman.
  • Jangan membuat tombol terlalu besar sehingga mengganggu pembaca.
  • Uji tampilannya pada desktop dan perangkat mobile.

Posisi dan ukuran tombol sebaiknya disesuaikan dengan desain template Anda. Tujuannya bukan sekadar membuat tombol terlihat menarik, tetapi memastikan fitur tersebut tetap nyaman digunakan tanpa mengganggu aktivitas membaca.

Apakah Back to Top Berpengaruh pada SEO?

Tombol Back to Top bukan faktor SEO yang secara langsung membuat artikel mendapatkan ranking lebih tinggi di Google. Fungsi utamanya adalah membantu pengunjung melakukan navigasi dengan lebih mudah.

Meski demikian, navigasi yang baik merupakan bagian dari pengalaman pengguna. Karena itu, fitur seperti Back to Top dapat menjadi salah satu elemen pendukung usability, terutama pada halaman dengan konten yang panjang.

Untuk mendapatkan manfaat SEO yang lebih besar, tetap prioritaskan konten berkualitas, struktur heading yang jelas, internal linking yang relevan, kecepatan halaman, serta pengalaman pengguna secara keseluruhan.

FAQ Back to Top Blogger

Apakah tombol Back to Top bisa digunakan di semua template Blogger?

Tidak selalu tanpa penyesuaian. Sebagian besar template dapat menggunakan kode sederhana seperti ini, tetapi template custom tertentu mungkin memiliki CSS atau JavaScript yang memengaruhi tampilannya.

Apakah tombol Back to Top membutuhkan jQuery?

Tidak. Script pada tutorial ini menggunakan JavaScript murni sehingga tidak membutuhkan library jQuery tambahan.

Kapan tombol Back to Top muncul?

Pada kode ini, tombol akan muncul ketika posisi scroll halaman sudah melewati sekitar 300 piksel dari bagian atas.

Apakah tombol Back to Top mempercepat loading Blogger?

Fitur ini tidak dirancang untuk mempercepat loading halaman. Kodenya relatif sederhana dan tidak membutuhkan library eksternal, tetapi performa keseluruhan blog tetap dipengaruhi oleh template, gambar, script, iklan, dan berbagai elemen lain yang digunakan.

Kesimpulan

Memasang tombol Back to Top di Blogger merupakan salah satu cara sederhana untuk meningkatkan kenyamanan navigasi, terutama pada artikel yang panjang. Pengunjung dapat kembali ke bagian atas halaman tanpa harus menggulir layar secara manual.

Dengan kombinasi HTML, CSS, dan JavaScript murni, Anda dapat membuat tombol kembali ke atas dengan efek smooth scroll tanpa menggunakan library tambahan.

Sebelum memasang kode pada blog utama, lakukan backup template dan uji hasilnya pada perangkat desktop maupun mobile. Jika template Anda sudah memiliki fitur Back to Top, hindari memasang script kedua agar tidak terjadi konflik.

Dengan navigasi yang lebih praktis dan desain yang sesuai dengan template, fitur kecil ini dapat menjadi pelengkap yang berguna untuk memberikan pengalaman membaca yang lebih nyaman bagi pengunjung blog Anda.

Posting Komentar untuk "Cara Pasang Tombol Back to Top (Smooth Scroll) di Blogger Paling Mudah"

Posting Komentar