So fügen Sie Blogger ein E-Mail-Abonnement-Popup hinzu (über Mailchimp)

Veröffentlicht: 2022-04-20

Möchten Sie E-Mails von Ihren Website-Besuchern sammeln und personalisierte Nachrichten direkt an deren Posteingang senden? Folgen Sie dieser Schritt-für-Schritt-Anleitung, um dies zu tun.

E-Mail-Marketing ist eine der effektivsten Methoden, um mit dem Publikum in Kontakt zu treten, mehr Besucher auf die Websites zu bringen und Produkte und Dienstleistungen Ihrem Publikum vorzustellen.

Dazu benötigen Sie also E-Mail-Marketing-Tools wie Mailchimp , convertkit und ein E-Mail-Anmeldeformular, das Ihre Website mit diesen Tools verbindet. Sie können entweder ein Anmeldeformular oder ein Abonnement-Popup für Ihre Website verwenden.

Das Abonnement-Popup ist effektiver als das herkömmliche Anmeldeformular, da es die Aufmerksamkeit des Benutzers auf sich zieht, indem es auf dem Bildschirm erscheint. Benutzer können Ihrer E-Mail-Liste ganz einfach beitreten, indem sie ihre Namen und E-Mail-Adressen in das Feld eingeben.

Danach wird die E-Mail-Adresse zu Ihrem E-Mail-Marketing-Tool hinzugefügt und Sie können dann benutzerdefinierte E-Mails an Ihre Abonnenten senden und sie über Ihren neuen Beitrag oder Ihre Produkte informieren.

Wenn Sie Affiliate-Marketing über E-Mails betreiben möchten, können Sie auch E-Mail-Autoresponder in Betracht ziehen, mit denen Sie verschiedene Prozesse automatisieren und bessere Ergebnisse erzielen können.

ok, sehen wir uns an, wie Sie Ihrer Blogger-Website ein E-Mail-Abonnement-Popup hinzufügen und es in Ihr Mailchimp-Konto integrieren können.

Schritte zum Hinzufügen eines E-Mail-Abonnement-Popups in Blogger

Führen Sie die folgenden Schritte aus, um ein E-Mail-Abonnement-Popup in Blogger hinzuzufügen.

  1. Gehen Sie zu Ihrem Blogger-Dashboard und klicken Sie auf den Themenbereich.
  2. Klicken Sie nun auf den Abschnitt HTML bearbeiten und suchen Sie das Tag </body>.
  3. Fügen Sie dann den angegebenen Code darüber ein und ersetzen Sie den Aktionslink des Mailchimp-Formulars darauf.
  4. Speichern Sie nun den Code und das E-Mail-Abonnement-Popup wird Ihrer Blogger-Website hinzugefügt.
 <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 { Breite: 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 {Schriftstärke: 600; Farbe: schwarz; Rand: -5px 0 5px 0;}
  </style>

<!-- E-Mail-Abonnement-Popup-->
<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> Abonnieren </h2>
<p> Techyleaf für die neuesten SEO-Updates </p>

<div class='container'>
<div>
<Formularaktion=' # ' 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='Ihre E-Mail-Adresse' type='email' value=''/ ></div>
<div class='clear'><div class='response'/><div class='response'/>
</div><!-- echte Menschen sollten dies nicht ausfüllen und gute Dinge erwarten - entfernen Sie dies nicht oder riskieren Sie Bot-Anmeldungen-->
<div aria-hidden='true'><input name='b_ac52e8b1ce2a06907e0091d7c_63bf572981' tabindex='-1' type='text' value=''/></div>
<div class='clear'><input class='email-submit-btn subscription' 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>

  <Skript>
    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;aktiv&quot;);
        localStorage.setItem(&#39;popupClosed&#39;, &#39;true&#39;);
    }
}, 3000);

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

Wie integriere ich Mailchimp in das Popup-Formular?

Sie müssen den Formularaktionslink (Ersetzen Sie das # ) durch Ihre Mailchimp-URL ändern. (dh <form action='#' class='validate').

Um diesen Link zu erhalten, müssen Sie sich mit einem MailChimp-Konto für ein kostenloses Konto anmelden und dort ein Anmeldeformular erstellen. Danach müssen Sie den Formularaktionslink aus diesem Code extrahieren. Folgen Sie dem Video-Tutorial , um es Schritt für Schritt zu überprüfen.

YouTube-Video

Wie passe ich das Popup-Anmeldeformular an?

Wenn Sie Designs wie Median UI oder Fletro Pro verwenden, funktioniert es möglicherweise nicht richtig auf Mobilgeräten. Dazu müssen Sie die Popup-Breite im CSS-Code anpassen.

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

Suchen Sie diesen Code und ändern Sie die Containerbreite wie folgt von 75 % auf 85 % .

Sie müssen auch das im obigen Code verwendete h2- und Absatz-Tag (oben hervorgehoben) ändern. Ändern Sie einfach den Text entsprechend Ihrer Website.

Ich habe auch gezeigt, wie man die angezeigte Popup-Dauer im Video-Tutorial ändert. Standardmäßig ist sie auf 3 Sekunden eingestellt. Das Popup wird also nach 3 Sekunden Laden der Seite geladen.

Wenn Sie das Bild ändern möchten, suchen Sie einfach nach email-signup-form-Image und ändern Sie dann die Quell-URL (src) des Bildes. Laden Sie zuerst das Bild auf Ihre Blogger-Website hoch und rufen Sie dann die Bild-URL ab, indem Sie mit der rechten Maustaste auf das Bild klicken.

Sie können sich hier auch die alternativen Möglichkeiten zur Integration von Mailchimp mit Blogger ansehen.

Fazit

Ich hoffe, Sie haben das Popup-Anmeldeformular erfolgreich zu Ihrer Blogger-Website hinzugefügt und Mailchimp integriert, um die E-Mail-Adressen Ihrer Besucher zu erfassen.

Wenn Sie noch Zweifel haben, können Sie mich gerne im Kommentarbereich fragen.