Butang Kembali ke Atas (Back to Top Button) untuk Blogger
Langkah 1: Masuk dan Edit HTML Blogger
-
Log masuk ke akaun Blogger anda.
-
Pergi ke menu Tema.
-
Klik Edit HTML.
-
Cari kod
</body>di bahagian bawah (gunakanCtrl + Funtuk 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">↑</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.
cuba share tutorial gambar, lagi senang nak belajar
BalasPadam