Cara Membuat Gambar Terbang di Blog (HTML + CSS + JavaScript)

Updated: 26 Jul, 2025 • 0 • min read

Table of Contents

Ilustrasi: Cara Membuat Gambar Terbang di Blog

Asik-Belajar - Ingin blog kamu tampil lebih menarik? Yuk, tambahkan gambar terbang/melayang di blog! Gambar ini akan terlihat seperti terbang di sudut halaman, atau bisa juga mengikuti scroll.

✅ Fitur yang Akan Kita Buat:

Gambar muncul dan tetap di posisi tertentu meskipun di-scroll (sticky/fixed).
Bisa digerakkan/animasi seperti terbang ke kiri-kanan atau atas-bawah.
Bisa ditampilkan di pojok kanan/pojok kiri blog.
Cocok untuk hiasan blog, maskot, atau ikon sosial media.

🔧 Langkah 1: Siapkan Gambar

Upload gambar yang akan digunakan ke Google Drive, Imgur, atau langsung di Blogger:

Contoh URL gambar:

https://example.com/flying-image.png

📌 Langkah 2: Tambahkan HTML Gambar di Blog

Masuk ke Blogger > Tema > Edit HTML, cari </body> dan tempelkan kode di atasnya:

<!-- Gambar Terbang -->
<div id="gambar-terbang">
  <img src="https://example.com/flying-image.png" alt="Gambar Terbang" />
</div>

Ganti URL gambar sesuai punyamu!

🎨 Langkah 3: Tambahkan CSS agar Gambar Terbang

Letakkan kode CSS berikut sebelum </head> atau di dalam <style> jika pakai widget HTML:

<style>
#gambar-terbang {
  position: fixed;
  bottom: 100px;
  right: 30px;
  z-index: 9999;
  animation: terbang 4s infinite ease-in-out;
}

#gambar-terbang img {
  width: 100px;
  height: auto;
  pointer-events: none;
}

@keyframes terbang {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}
</style>

🔄 (Opsional) Ikuti Scroll Mouse (Floating Parallax)

Jika ingin gambar sedikit bergerak mengikuti scroll (efek paralaks ringan), tambahkan ini di bawah kode HTML tadi:

<script>
window.addEventListener('scroll', function() {
  const scrollY = window.scrollY;
  const el = document.getElementById('gambar-terbang');
  el.style.transform = 'translateY(' + (scrollY * 0.1) + 'px)';
});
</script>

Jangan gabungkan dengan animasi @keyframes jika pakai efek ini.

🧪 Contoh Kombinasi: Gambar Terbang Pojok Kanan

<!-- HTML -->
<div id="gambar-terbang">
  <img src="https://i.imgur.com/abcd123.png" />
</div>

<!-- CSS -->
<style>
#gambar-terbang {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 9999;
  animation: terbang 3s ease-in-out infinite;
}
#gambar-terbang img {
  width: 80px;
  opacity: 0.9;
}
@keyframes terbang {
  0% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0); }
}
</style>

💡 Tips Tambahan:

Bisa letakkan gambar di kiri: ganti right: 20px jadi left: 20px.
Gunakan gambar berformat .png transparan agar lebih halus tampilannya.
Gunakan z-index tinggi agar tidak tertutup elemen lain.

🧼 Cara Menghapus Gambar Terbang

Cukup hapus bagian kode HTML dan CSS yang kamu tambahkan tadi.

Sekarang blog kamu sudah punya efek gambar terbang yang hidup dan menarik perhatian pengunjung. Gunakan ini untuk memperindah tampilan blog, menampilkan ikon sosial, atau hiasan karakter lucu.

Jika kamu ingin versi gambar terbang + tombol interaktif atau animasi kompleks, tinggal beri tahu saya. Siap bantu lebih lanjut!

Asik belajar blog