Mendesain Banner Iklan Melayang + Popup Otomatis + Mobile-Friendly

Table of contents

[Show]

Dengan desain floating banner yang stylish, fitur auto-close, dan kontrol untuk tampil hanya di perangkat mobile, kamu dapat meningkatkan efektivitas promosi tanpa mengganggu kenyamanan pengunjung blog. 

Desain ini bisa digunakan untuk promosi produk, tombol WhatsApp, link afiliasi, bahkan pemberitahuan penting. Berikut ini tutorialnya.

1. ✅ Mendesain Banner Iklan Melayang (Floating Ads Banner)

Berikut desain banner iklan melayang yang modern dengan bayangan, sudut membulat, dan tombol close manual:

💻 Kode HTML + CSS + JS:

<style>
#floatingAd {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 250px;
  z-index: 9999;
  background: white;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  overflow: hidden;
  animation: fadeIn 1s ease-in-out;
}

#floatingAd img {
  width: 100%;
  display: block;
}

#floatingAd .closeBtn {
  background: #ff4d4f;
  color: white;
  padding: 5px 10px;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
}

@keyframes fadeIn {
  from {opacity: 0; bottom: 0;}
  to {opacity: 1; bottom: 20px;}
}
</style>

<div id="floatingAd">
  <a href="https://link-promosi.com" target="_blank">
    <img src="https://link-gambar.com/iklan.jpg" alt="Iklan Banner">
  </a>
  <div class="closeBtn" onclick="document.getElementById('floatingAd').style.display='none'">
    Tutup
  </div>
</div>

---

2. 🎯 Mengubah Jadi Floating Popup yang Otomatis Tertutup

Tambahkan kode JavaScript di bawah agar popup tertutup otomatis setelah 10 detik:

<script>
  setTimeout(function() {
    var ad = document.getElementById('floatingAd');
    if (ad) {
      ad.style.display = 'none';
    }
  }, 10000); // 10000 = 10 detik
</script>

💡 Kamu bisa ubah angka 10000 menjadi durasi lain dalam milidetik (contoh 15000 = 15 detik).

---

3. 📱 Membuat Versi Mobile-Friendly (Hanya Tampil di Ponsel)

Tambahkan media query CSS agar hanya tampil di layar kecil (misalnya < 768px):

🔧 Tambahkan di <style>:

@media (min-width: 768px) {
  #floatingAd {
    display: none;
  }
}

Artinya: Iklan hanya muncul di layar berukuran lebih kecil dari 768px (ponsel dan tablet kecil).

---

🧪 Testing

• Gunakan Inspect Element / Developer Tools di browser (Ctrl+Shift+I).

• Ubah ke tampilan mobile untuk menguji tampilan floating iklan di ponsel.

• Pastikan gambar responsive dan tidak menutupi konten utama.

Berbagi :