Butang Kembali ke Atas (Back to Top Button) untuk Blogger

Butang Kembali ke Atas (Back to Top Button) untuk Blogger

Langkah 1: Masuk dan Edit HTML Blogger

1. Log masuk ke akaun Blogger anda.

2. Pergi ke menu Tema.

3. Klik Edit HTML.

4. Cari kod </body> di bahagian bawah (gunakan Ctrl + F untuk cari dengan cepat).

Langkah 2: Tampalkan Kod Ini Sebelum </body>

 <!-- Mula: Butang Kembali ke Atas -->

<a href="#" id="butang-ke-atas" title="Kembali ke atas">&uarr;</a>

<style>

#butang-ke-atas {

  position: fixed;

  bottom: 40px;

  right: 40px;

  display: none;

  background: #3498db;

  color: white;

  padding: 10px 15px;

  font-size: 18px;

  border-radius: 5px;

  text-align: center;

  z-index: 1000;

  cursor: pointer;

  text-decoration: none;

  box-shadow: 0 2px 5px rgba(0,0,0,0.3);

}

#butang-ke-atas:hover {

  background: #2980b9;

}

</style>

<script>

  // Paparkan/sembunyikan butang

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

    var scrollBtn = document.getElementById('butang-ke-atas');

    if (window.scrollY > 300) {

      scrollBtn.style.display = 'block';

    } else {

      scrollBtn.style.display = 'none';

    }

  });

  // Tatal ke atas dengan lancar

  document.addEventListener('DOMContentLoaded', function() {

    var scrollBtn = document.getElementById('butang-ke-atas');

    scrollBtn.addEventListener('click', function(e) {

      e.preventDefault();

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

    });

  });

</script>

<!-- Tamat: Butang Kembali ke Atas -->

Langkah 3: Simpan Tema

Setelah menampal kod di atas, klik Simpan atau Save di bahagian atas kanan skrin.

Nota Tambahan:

• Anda boleh menukar warna butang (ruangan background dan hover) supaya selaras dengan tema blog anda — contohnya biru pastel untuk gaya #JMBELOG.

• Anda juga boleh ubah simbol ↑ kepada teks seperti "Kembali ke Awal" atau gunakan simbol lain seperti ⬆️ atau 💫 untuk kelihatan lebih lembut dan puitis.