Cara Menambahkan Popup Langganan Email ke Blogger (via Mailchimp)

Diterbitkan: 2022-04-20

Apakah Anda ingin mengumpulkan Email dari pengunjung Situs Web Anda dan mengirim pesan yang dipersonalisasi langsung ke kotak masuk mereka? nah, ikuti tutorial langkah demi langkah ini untuk cara melakukannya.

Pemasaran Email adalah salah satu cara paling efektif untuk terhubung dengan audiens, mendapatkan lebih banyak lalu lintas ke situs, dan menawarkan produk dan layanan kepada audiens Anda.

Jadi, untuk ini, Anda memerlukan alat pemasaran email seperti Mailchimp , convertkit , dan formulir pendaftaran email yang akan menghubungkan situs web Anda ke alat ini. Anda dapat menggunakan formulir Pendaftaran atau popup berlangganan ke situs web Anda.

Popup berlangganan lebih efektif daripada formulir pendaftaran tradisional karena menarik perhatian pengguna dengan muncul di layar. Pengguna dapat dengan mudah bergabung dengan daftar email Anda dengan memberikan nama dan alamat email mereka di lapangan.

Setelah itu, alamat Email akan ditambahkan ke alat pemasaran Email Anda dan Anda kemudian dapat mengirim Email yang disesuaikan ke pelanggan Anda dan memberi mereka pembaruan tentang posting atau produk baru Anda.

Jika Anda ingin melakukan pemasaran afiliasi melalui email, maka Anda juga dapat mempertimbangkan penjawab otomatis Email di mana Anda dapat mengotomatiskan berbagai proses dan menghasilkan hasil yang lebih baik.

ok, mari kita periksa bagaimana Anda dapat menambahkan popup langganan Email ke situs web Blogger Anda dan mengintegrasikannya dengan akun Mailchimp Anda.

Langkah-langkah Menambahkan Popup Langganan Email di Blogger

Untuk menambahkan popup langganan Email di Blogger, ikuti langkah-langkah di bawah ini.

  1. Buka dasbor Blogger Anda dan klik pada bagian tema.
  2. Sekarang klik pada bagian Edit HTML dan temukan tag </body>.
  3. Kemudian rekatkan kode yang diberikan di atasnya dan ganti tautan tindakan formulir Mailchimp di atasnya.
  4. Sekarang simpan kode dan popup langganan Email ditambahkan ke situs web Blogger Anda.
 <style> .email-subscription-overlay {display: flex;align-items: center;justify-content: center;position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background: rgba(0, 0, 0, 0);z-index: -100;transition: all 400ms;} .email-subscription-overlay.active {background: rgba(0, 0, 0, 0.9);z-index: 200;} .email-subscription-container {background: #fff;padding: 32px;text-align: center;display: flex;box-shadow: 0 2px 12px 3px rgba(0, 0, 0, 0.3);border-radius: 8px;transform: translateY(-200px);opacity: 0;transition: all 200ms;} .email-subscription-overlay.active .email-subscription-container {transform: translateY(0);opacity: 1;} .email-subscription-container form {display: flex;flex-direction: column;margin-top: 32px;} .email-subscription-overlay .email-close-btn {top: 24px;right: 24px;position: fixed;font-size: 50px;font-weight: 600;color:#eee;background: none;border: none;cursor: pointer;pointer-events: none;transition: all 400ms;opacity: 0;} .email-subscription-overlay.active .email-close-btn {opacity: 1;pointer-events: auto;} .email-subscription-container img {width: 300px;object-fit: contain;} .email-subscription-container h2 {font-size: 35px;text-transform: uppercase;margin-bottom: 15px;margin-top: 12px;color: #0a0908;} .email-subscription-container p {margin-top: 10px;font-weight: bold;color: #1d3557;font-size:16px;} .email-subscription-container .text-content {padding: 48px;} .email-subscription-container form .email-input-field {margin-bottom: 16px;padding: 12px 24px;font-size: 16px;border: 1px solid #777;} .email-subscription-container form .email-submit-btn {background: #f50057;border: none;font-weight: 600;font-size: 20px;color: #fff;padding: 10px 60px; cursor: pointer;text-transform: uppercase;transition: all 400ms;} .email-subscription-container form .email-submit-btn:hover {background: #069b7a;} @media (max-width: 800px) {.email-subscription-container {flex-direction: column;width: 400px;align-items: center;}.email-subscription-container .text-content {padding: 0;width: 100%;}} @media (max-width: 500px) {.email-subscription-container { lebar: 75%; }}

#mc_embed_signup div.mce_inline_error {margin: 0 0 1em 0;z-index: 1;color: #000;}
#mc_embed_signup div.mce_inline_error {padding: 5px 10px;font-weight: bold;background-color: white;}
.response {berat font: 600;warna: hitam;margin: -5px 0 5px 0;}
  </ gaya>

<!-- Popup Langganan Email-->
<div class='email-subscription-overlay'>
<button class='email-close-btn'>&#215;</button>
<div class='email-subscription-container'>
<img alt='email-signup-form-Image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9TPAOsLb2-sDqk1TUCfkg_Qj2vnK9KnDPPEd94_TKlHtTw6iVhMMwIG7NjdQYseYXG4cCsdNKhkM7zEEe9qwrORpFvQ54cgqDViw7SSXEVFraofdZItMXStgo_2z_LJCXEebwopU0Pf7FWPAlaBkuxjibbvn8zmTLZZ9X81LYFsqUZU4eIjSs6MHJFw/s1600/undraw_Opened_re_i38e%20%281%29.png'/>

<div class='text-content'>
<h2> Langganan </h2>
<p> Techyleaf untuk Pembaruan SEO Terbaru </p>

<div class='container'>
<div>
<bentuk tindakan=' # ' class='validate' method='post' name='mc-embedded-subscribe-form' target='_blank'>
<div><div class='mc-field-group'><input class='email-input-field diperlukan email' name='EMAIL' placeholder='Alamat Email Anda' type='email' value=''/ ></div>
<div class='clear'><div class='response'/><div class='response'/>
</div><!-- orang sungguhan tidak boleh mengisi ini dan mengharapkan hal-hal baik - jangan hapus ini atau ambil risiko pendaftaran bot formulir-->
<div aria-hidden='true'><input name='b_ac52e8b1ce2a06907e0091d7c_63bf572981' tabindex='-1' type='text' value=''/></div>
<div class='clear'><input class='email-submit-btn subscribe' name='subscribe' type='submit' value='Subscribe'/></div>
</div></form></div>
<script src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js' type='text/javascript'/><script type='text/javascript'>(function($ ) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]=&#39;EMAIL&#39;;ftypes[0]=&#39;email&#39;;fnames[ 1]=&#39;NAME&#39;;ftypes[1]=&#39;text&#39;;}(jQuery));var $mcj = jQuery.noConflict(true);</script>
</div></div></div></div>

  <skrip>
    const emailSubscriptionOverlay = document.querySelector(&quot;.email-subscription-overlay&quot;);
const emailCloseButton = document.querySelector(&quot;.email-close-btn&quot;);

setTimeout(() =&gt; {
    if (!localStorage.getItem(&#39;popupClosed&#39;)) {
        emailSubscriptionOverlay.classList.add(&quot;aktif&quot;);
        localStorage.setItem(&#39;popupClosed&#39;, &#39;true&#39;);
    }
}, 3000);

emailCloseButton.addEventListener(&quot;klik&quot;, () =&gt; {
    emailSubscriptionOverlay.classList.remove(&quot;aktif&quot;);
});
  </skrip>

Bagaimana cara mengintegrasikan Mailchimp dengan formulir Popup?

Anda perlu mengubah tautan tindakan formulir (Ganti # ) dengan URL Mailchimp Anda. (yaitu <form action='#' class='validate').

Untuk mendapatkan tautan ini, Anda perlu mendaftar akun gratis dengan akun MailChimp dan membuat formulir pendaftaran di sana. Setelah itu, Anda perlu mengekstrak tautan tindakan formulir dari kode itu. Ikuti tutorial video untuk memeriksanya langkah demi langkah.

Video Youtube

Bagaimana cara menyesuaikan formulir Pendaftaran Popup?

Jika Anda menggunakan Tema seperti Median UI atau Fletro pro theme maka itu mungkin tidak berfungsi dengan baik di perangkat seluler. Anda perlu menyesuaikan lebar Popup dalam kode CSS untuk itu.

 @media (max-width: 500px) {.email-subscription-container {width: 75%;}}

Temukan kode ini dan ubah lebar wadah dari 75% menjadi 85% seperti ini.

Anda juga perlu mengubah tag h2 dan paragraf (disorot di atas) yang digunakan dalam kode di atas. Cukup ubah teks sesuai dengan situs web Anda.

Saya juga telah menunjukkan cara mengubah durasi popup yang ditampilkan dalam tutorial video. Secara default, ini diatur ke 3 detik. Jadi, popup akan dimuat setelah 3 detik pemuatan halaman.

Jika Anda ingin mengubah gambar maka cari saja email-signup-form-Image dan kemudian ubah Source URL (src) dari gambar tersebut. Pertama, unggah gambar ke situs web Blogger Anda, lalu dapatkan URL gambar dengan mengklik kanan pada gambar.

Anda juga dapat melihat cara alternatif untuk mengintegrasikan Mailchimp dengan Blogger di sini.

Kesimpulan

Saya harap Anda telah berhasil menambahkan formulir pendaftaran Popup ke situs web Blogger Anda dan mengintegrasikan Mailchimp untuk mengumpulkan alamat email pengunjung Anda.

Jika Anda masih memiliki keraguan, jangan ragu untuk bertanya kepada saya di bagian komentar.