Cum să adăugați o fereastră pop-up de abonament de e-mail la Blogger (prin Mailchimp)

Publicat: 2022-04-20

Doriți să colectați e-mailuri de la vizitatorii site-ului dvs. și să trimiteți mesaje personalizate direct în căsuțele lor de e-mail? Ei bine, urmați acest tutorial pas cu pas pentru a afla cum să faceți acest lucru.

Marketingul prin e-mail este una dintre cele mai eficiente moduri de a intra în legătură cu publicul, de a obține mai mult trafic către site-uri și de a prezenta produse și servicii publicului dvs.

Deci, pentru aceasta, aveți nevoie de instrumente de marketing prin e-mail precum Mailchimp , convertkit și un formular de înscriere prin e-mail care vă va conecta site-ul web la aceste instrumente. Puteți utiliza fie un formular de înscriere, fie un pop-up de abonare pe site-ul dvs.

Fereastra pop-up de abonament este mai eficientă decât formularul tradițional de înscriere, deoarece atrage atenția utilizatorului prin apariția pe ecran. Utilizatorii se pot alătura cu ușurință listei dvs. de e-mail, dându-și numele și adresele de e-mail în câmp.

După aceea, adresa de e-mail va fi adăugată la instrumentul dvs. de marketing prin e-mail și apoi puteți trimite e-mailuri personalizate abonaților dvs. și le puteți oferi actualizări despre noua dvs. postare sau produse.

Dacă doriți să faceți marketing afiliat prin e-mailuri, atunci puteți lua în considerare și răspunsurile automate prin e-mail, unde puteți automatiza diferite procese și puteți genera rezultate mai bune.

ok, haideți să verificăm cum puteți adăuga o fereastră pop-up de abonament pentru e-mail pe site-ul dvs. Blogger și să o integrați cu contul dvs. Mailchimp.

Pași pentru a adăuga o fereastră pop-up pentru abonamentul prin e-mail în Blogger

Pentru a adăuga o fereastră pop-up de abonament prin e-mail în Blogger, urmați pașii de mai jos.

  1. Accesați tabloul de bord Blogger și faceți clic pe secțiunea cu teme.
  2. Acum faceți clic pe secțiunea Editare HTML și găsiți eticheta </body>.
  3. Apoi lipiți codul dat deasupra acestuia și înlocuiți linkul de acțiune a formularului Mailchimp pe el.
  4. Acum salvați codul și se adaugă pe site-ul dvs. Blogger fereastra pop-up pentru abonamentul prin e-mail.
 <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 { latime: 75%; }}

#mc_embed_signup div.mce_inline_error {marja: 0 0 1em 0;z-index: 1;culoare: #000;}
#mc_embed_signup div.mce_inline_error {padding: 5px 10px;font-weight: bold;background-color: white;}
.răspuns {font-weight: 600;culoare: negru;marja: -5px 0 5px 0;}
  </stil>

<!-- Popup de abonament prin e-mail-->
<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> Abonati-va </h2>
<p> Techyleaf pentru cele mai recente actualizări SEO </p>

<div class='container'>
<div>
<form action=' # ' class='validate' method='post' name='mc-embedded-subscribe-form' target='_blank'>
<div><div class='mc-field-group'><input class='email-input-field required email' name='EMAIL' placeholder='Adresa ta de e-mail' type='email' value=''/ ></div>
<div class='clear'><div class='response'/><div class='response'/>
</div><!-- oamenii adevărați nu ar trebui să completeze acest lucru și să se aștepte la lucruri bune - nu eliminați acest lucru și nu riscați înregistrările de la bot-->
<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'>(funcție($ ) {window.fnames = matrice nouă(); window.ftypes = matrice nouă();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>

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

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

emailCloseButton.addEventListener(&quot;clic&quot;, () =&gt; {
    emailSubscriptionOverlay.classList.remove(&quot;activ&quot;);
});
  </script>

Cum se integrează Mailchimp cu formularul Popup?

Trebuie să modificați linkul pentru acțiunea formularului (Înlocuiți # ) cu adresa URL a Mailchimp. (adică <form action='#' class='validate').

Pentru a obține acest link, trebuie să creați un cont gratuit cu un cont MailChimp și să creați un formular de înscriere acolo. După aceea, trebuie să extrageți linkul de acțiune al formularului din acel cod. Urmați tutorialul video pentru a-l verifica pas cu pas.

video YouTube

Cum să personalizați formularul de înscriere popup?

Dacă utilizați teme precum Median UI sau tema Fletro pro , este posibil ca aceasta să nu funcționeze corect pe dispozitivele mobile. Pentru aceasta, trebuie să ajustați lățimea pop-upului în codul CSS.

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

Găsiți acest cod și modificați lățimea containerului de la 75% la 85% astfel.

De asemenea, trebuie să schimbați eticheta h2 și paragraf (evidențiate mai sus) utilizate în codul de mai sus. Doar schimbați textul în funcție de site-ul dvs.

Am arătat, de asemenea, cum să schimbi durata ferestrei afișate în tutorialul video. În mod implicit, este setat la 3 secunde. Deci, pop-up-ul se va încărca după 3 secunde de încărcare a paginii.

Dacă doriți să schimbați imaginea, căutați e-mail-signup-form-Image și apoi schimbați URL-ul sursă (src) a imaginii. Mai întâi, încărcați imaginea pe site-ul dvs. Blogger, apoi obțineți adresa URL a imaginii făcând clic dreapta pe imagine.

De asemenea, puteți consulta modalitățile alternative de a integra Mailchimp cu Blogger aici.

Concluzie

Sper că ați adăugat cu succes formularul de înscriere Popup pe site-ul dvs. Blogger și ați integrat Mailchimp pentru a colecta adresele de e-mail ale vizitatorilor dvs.

Dacă mai aveți îndoieli, nu ezitați să mă întrebați în secțiunea de comentarii.