3 Langkah Mudah Membuat Pop-up Email Berlangganan di Blogger

Pedia Lover - Untuk membuat pop-up email berlangganan di blogger, sobat hanya perlu mengikuti beberapa langkah yang sudah mimin rangkum secara detail di bawah.

Apa itu Pop-up Email Berlangganan?

Pop-up email berlangganan adalah jendela kecil yang muncul di halaman web untuk mengundang pengunjung untuk berlangganan newsletter atau mendapatkan pembaruan melalui email. Tujuan dari pop-up ini adalah untuk mengumpulkan alamat email pengunjung dan membangun daftar email yang dapat digunakan oleh pemilik situs web untuk mengirim informasi, penawaran khusus, atau konten terbaru kepada pengunjung yang telah berlangganan.

Pop-up email berlangganan biasanya muncul saat pengunjung melakukan tindakan tertentu, seperti saat mereka mengunjungi situs web untuk pertama kalinya, ketika mereka menggulir ke bawah halaman, atau ketika mereka akan meninggalkan situs web (pop-up jendela keluar). Pop-up ini seringkali menawarkan insentif kepada pengunjung, seperti diskon, konten eksklusif, atau ebook gratis, untuk mendorong mereka untuk berlangganan.

Meskipun pop-up email berlangganan dapat dianggap mengganggu bagi beberapa pengunjung, mereka merupakan strategi pemasaran yang umum digunakan untuk membangun hubungan dengan pelanggan potensial dan memperluas basis pengguna yang terlibat dengan suatu merek atau situs web.

Membuat Pop-up Email Berlangganan di Blogger

Berikut adalah langkah-langkah cara membuat pop-up email berlangganan, perhatikan baik-baik:

1. Buat Widget HTML/Javascript Baru di Blogger

1.1. Masuk ke Dasbor Blogger.

1.2. Pilih tata letak blog sobat.

1.3. Klik "Tambah Gadget" di area di mana Anda ingin menampilkan pop-up.

1.4. Pilih gadget "HTML/Javascript".

2. Tambahkan Kode HTML Pop-up

2.1. Dalam gadget HTML/Javascript, salin dan tempelkan kode HTML berikut:

<style>
  .popup {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    overflow: auto;
  }

  .popup-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 70%;
    max-width: 400px;
  }

  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
</style>

<div id="popup" class="popup">
  <div class="popup-content">
    <span class="close" onclick="closePopup()">&times;</span>
    <h3>Langganan Email</h3>
    <p>Masukkan alamat email Anda untuk berlangganan update terbaru.</p>
    <form action="https://link.ke.email" method="post">
      <input type="email" name="email" placeholder="Alamat Email" required>
      <button type="submit">Berlangganan</button>
    </form>
  </div>
</div>

<script>
  function closePopup() {
    document.getElementById("popup").style.display = "none";
  }

  window.onload = function () {
    document.getElementById("popup").style.display = "block";
  };
</script>

Catatan:

Pastikan sobat mengganti https://link.ke.email pada <form action="https://link.ke.email" method="post"> dengan tautan yang sesuai untuk menerima email berlangganan.

3. Simpan dan Terapkan Perubahan

3.1. Klik tombol "Simpan" pada gadget HTML/Javascript.

3.2. Lihat blog sobat untuk memastikan pop-up email berlangganan muncul.

Pastikan untuk mengganti https://link.ke.email pada langkah kedua dengan tautan yang benar untuk menerima email berlangganan. Juga, sobat dapat menyesuaikan tampilan pop-up melalui kode CSS dalam langkah kedua sesuai kebutuhan sobat.

Demikianlah sajian artikel yang bisa mimin bagikan kali ini tentang, 3 langkah mudah membuat pop-up email berlangganan di blogger. Semoga bermanfaat!

Artikel ini pertama kali tayang di pedia lover pada selasa, 04/07/2023.