Tutorial Lengkap Membuat Popup Iklan dengan HTML, CSS, dan JavaScript

Advertisement

Advertisement

Pendahuluan

Popup adalah elemen yang muncul secara otomatis di layar untuk menarik perhatian pengunjung. Biasanya digunakan untuk iklan, promosi, atau ajakan bergabung di suatu layanan. Keunggulan popup dibanding banner biasa adalah tampil secara mencolok tanpa harus bergantung pada scrolling. Dalam artikel ini, kita akan membedah kode popup sederhana dengan fitur delay kemunculan (muncul setelah beberapa detik/menit), cooldown (muncul lagi setelah beberapa menit), serta penyimpanan status di localStorage agar tetap sinkron meskipun pengguna berpindah halaman.

---

Struktur HTML: Membuat Elemen Popup

Langkah pertama adalah menyiapkan struktur HTML untuk setiap popup. Pada contoh ini kita akan membuat 3 popup (popup1, popup2, popup3).

<!-- Popup 1 -->
<div id="popup1" class="popupbox">
  <a href="#" class="close-popup">&times;</a>
  <div class="gambar-space">
    <a href="https://iklan1.com" target="_blank" rel="nofollow">
      <img src="popup1.jpg" alt="Iklan 1">
    </a>
  </div>
</div>

<!-- Popup 2 -->
<div id="popup2" class="popupbox">
  <a href="#" class="close-popup">&times;</a>
  <div class="gambar-space">
    <a href="https://iklan2.com" target="_blank" rel="nofollow">
      <img src="popup2.jpg" alt="Iklan 2">
    </a>
  </div>
</div>

<!-- Popup 3 -->
<div id="popup3" class="popupbox">
  <a href="#" class="close-popup">&times;</a>
  <div class="gambar-space">
    <a href="https://iklan3.com" target="_blank" rel="nofollow">
      <img src="popup3.jpg" alt="Iklan 3">
    </a>
  </div>
</div>

Setiap popup memiliki ID unik (popup1, popup2, popup3) sehingga bisa diatur munculnya secara terpisah.

---

CSS Styling: Membuat Popup Tampil Menarik

Agar popup terlihat rapi, diberi efek bayangan, serta bisa disembunyikan dan ditampilkan dengan animasi, kita gunakan CSS seperti berikut:

.popupbox {
  position: fixed;
  top: -1600px; /* disembunyikan di luar layar */
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,0,0,0.4);
  z-index: 99999;
  transition: top 0.5s ease-in-out;
}

.popupbox img {
  width: 100%;
  border-radius: 8px;
}

.close-popup {
  position: absolute;
  top: -32px;
  right: 0;
  background: #333;
  color: #fff;
  font-size: 22px;
  padding: 5px 10px;
  border-radius: 50%;
  text-decoration: none;
  cursor: pointer;
}

.close-popup:hover {
  background: #555;
}

@media (max-width:480px) {
  .popupbox {
    width: 95%;
  }
}

Kode CSS ini akan membuat popup muncul dari atas dengan animasi lembut dan tetap responsif di layar HP.

---

JavaScript: Mengatur Delay dan Cooldown

Bagian inti ada di JavaScript. Di sini kita mengatur agar:

• Popup 1 muncul setelah 10 detik.

• Popup 2 muncul setelah 1 menit.

• Popup 3 muncul setelah 2 menit.

• Semua popup akan muncul kembali setelah cooldown 10 menit.

document.addEventListener("DOMContentLoaded", function () {
  // daftar popup
  const popups = [
    {id: "popup1", delay: 10000},   // 10 detik
    {id: "popup2", delay: 60000},   // 1 menit
    {id: "popup3", delay: 120000}   // 2 menit
  ];
  
  const cooldown = 600000; // 10 menit

  popups.forEach(p => {
    let el = document.getElementById(p.id);
    let last = localStorage.getItem("last_" + p.id);
    let now = Date.now();

    // cek apakah popup boleh tampil lagi
    if (!last || now - last > cooldown) {
      setTimeout(() => {
        el.style.top = "120px"; // tampilkan popup
        localStorage.setItem("last_" + p.id, Date.now());
      }, p.delay);
    }

    // tombol close
    el.querySelector(".close-popup").addEventListener("click", function (e) {
      e.preventDefault();
      el.style.top = "-1600px";
    });
  });
});

---

Memanfaatkan localStorage

Kenapa kita pakai localStorage? Karena jika hanya pakai setTimeout, popup akan muncul setiap kali halaman dimuat ulang. Dengan localStorage, waktu terakhir popup muncul disimpan di browser, sehingga meskipun pengguna pindah halaman, logika cooldown tetap berlaku.

Contoh: jika popup1 muncul jam 10:00, maka meski user klik link internal ke halaman lain jam 10:02, popup1 tidak akan muncul lagi sampai jam 10:10.

---

UX dan Keamanan

Fitur tombol Close (×) penting agar pengguna bisa menutup popup dengan mudah. Tanpa tombol ini, pengalaman pengguna akan buruk dan berpotensi membuat pengunjung kabur. Selain itu, popup ditempatkan dengan rel="nofollow" agar tidak mengurangi kredibilitas SEO.

---

Strategi Monetisasi dengan Popup

Popup bisa diarahkan ke link afiliasi, promosi produk digital, atau landing page bisnis. Dengan pengaturan waktu yang tepat (delay & cooldown), popup tidak terlalu mengganggu tapi tetap efektif mengarahkan trafik ke iklan.

---

SEO dan Pengalaman Pengguna

Google kurang menyukai popup yang terlalu agresif (intrusive). Jadi gunakanlah popup dengan jeda dan cooldown. Pastikan popup tidak menutupi seluruh konten utama agar tidak menurunkan ranking SEO.

---

Perbandingan dengan Banner Biasa

Banner iklan sering diabaikan pengunjung (banner blindness). Sedangkan popup langsung muncul di layar sehingga lebih terlihat. Namun tetap harus seimbang: popup yang terlalu sering akan dianggap spammy.

---

Kesimpulan

Dengan kombinasi HTML + CSS + JavaScript + localStorage, kita bisa membuat popup iklan yang efektif, terkontrol, dan ramah pengguna. Popup ini bisa digunakan untuk meningkatkan CTR iklan, promosi produk, hingga mengarahkan trafik ke halaman penting.

Topik Blogging Lainnya:

MAU HEMAT PULSA

untuk dipakai sendiri atau cari cuan dengan jualan lagi?

Daftar Agen Pulsa sekarang juga, gratis!

DAFTAR SEKARANG!

Advertisement