Jak dodać wyskakujące okienko subskrypcji e-mail do Bloggera (przez Mailchimp)

Opublikowany: 2022-04-20

Czy chcesz zbierać wiadomości e-mail od odwiedzających Twoją witrynę i wysyłać spersonalizowane wiadomości bezpośrednio do ich skrzynek odbiorczych? cóż, postępuj zgodnie z tym samouczkiem krok po kroku, aby dowiedzieć się, jak to zrobić.

Marketing e-mailowy to jeden z najskuteczniejszych sposobów nawiązywania kontaktu z odbiorcami, zwiększania ruchu w witrynach oraz przedstawiania produktów i usług swoim odbiorcom.

W tym celu potrzebujesz narzędzi do marketingu e-mailowego, takich jak Mailchimp , convertkit i formularza rejestracji e-mail, który połączy Twoją witrynę z tymi narzędziami. Możesz użyć formularza rejestracji lub wyskakującego okienka subskrypcji na swojej stronie internetowej.

Wyskakujące okienko subskrypcji jest skuteczniejsze niż tradycyjny formularz rejestracji, ponieważ przyciąga uwagę użytkownika, wyskakując na ekranie. Użytkownicy mogą łatwo dołączyć do Twojej listy e-mailowej, podając w polu swoje nazwiska i adresy e-mail.

Następnie adres e-mail zostanie dodany do Twojego narzędzia do marketingu e-mailowego, a następnie możesz wysyłać spersonalizowane wiadomości e-mail do subskrybentów i informować ich o aktualizacjach dotyczących nowego postu lub produktów.

Jeśli chcesz robić marketing afiliacyjny za pośrednictwem e-maili, możesz również rozważyć autorespondery e-mail, w których możesz zautomatyzować różne procesy i generować lepsze wyniki.

ok, sprawdźmy, jak dodać wyskakujące okienko subskrypcji e-mail do swojej witryny Bloggera i zintegrować je z kontem Mailchimp.

Kroki, aby dodać wyskakujące okienko subskrypcji e-mail w Bloggerze

Aby dodać wyskakujące okienko subskrypcji poczty e-mail w Bloggerze, wykonaj poniższe czynności.

Przejdź do pulpitu nawigacyjnego Bloggera i kliknij sekcję motywu.
Teraz kliknij sekcję Edytuj HTML i znajdź tag </body>.
Następnie wklej nad nim podany kod i zastąp na nim link akcji formularza Mailchimp.
Teraz zapisz kod, a wyskakujące okienko subskrypcji e-mail zostanie dodane do Twojej witryny Bloggera.

 <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 { szerokość: 75%; }}

#mc_embed_signup div.mce_inline_error {margin: 0 0 1em 0;z-index: 1;kolor: #000;}
#mc_embed_signup div.mce_inline_error {dopełnienie: 5px 10px;grubość czcionki: pogrubienie;kolor tła: biały;}
.response {font-weight: 600;color: black;margin: -5px 0 5px 0;}
  </style>

<!-- Wyskakujące okienko subskrypcji e-mail-->
<div class='nakładka-subskrypcji-e-mail'>
<button class='email-close-btn'>&#215;</button>
<div class='e-mail-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> Subskrybuj </h2>
<p> Techyleaf dla najnowszych aktualizacji SEO </p>

<div class='container'>
<div>
<formularz działanie=' # ' class='validate' method='post' name='mc-embedded-subscribe-form' target='_blank'>
<div><div class='mc-field-group'><input class='email-input-field wymagany adres e-mail' name='EMAIL' placeholder='Twój adres e-mail' type='email' value=''/ ></div>
<div class='clear'><div class='odpowiedź'/><div class='odpowiedź'/>
</div><!-- prawdziwi ludzie nie powinni tego wypełniać i oczekiwać dobrych rzeczy - nie usuwaj tego ani nie ryzykuj rejestracji botów-->
<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>

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

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

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

Jak zintegrować Mailchimp z formularzem Popup?

Musisz zmienić link akcji formularza (zamień # ) na swój adres URL Mailchimp. (tj. <form action='#' class='validate').

Aby uzyskać ten link, musisz zarejestrować bezpłatne konto z kontem MailChimp i tam utworzyć formularz rejestracyjny. Następnie musisz wyodrębnić link akcji formularza z tego kodu. Postępuj zgodnie z samouczkiem wideo , aby sprawdzić to krok po kroku.

Jak dostosować formularz Popup Signup?

Jeśli używasz motywów takich jak Median UI lub Fletro pro , może nie działać poprawnie na urządzeniach mobilnych. W tym celu musisz dostosować szerokość wyskakujących okienek w kodzie CSS.

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

Znajdź ten kod i zmień szerokość kontenera z 75% na 85% w ten sposób.

Musisz także zmienić tag h2 i akapit (podświetlony powyżej) użyty w powyższym kodzie. Po prostu zmień tekst zgodnie ze swoją witryną.

W samouczku wideo pokazałem również, jak zmienić wyświetlany czas trwania wyskakującego okienka. Domyślnie jest ustawiony na 3 sekundy. Tak więc wyskakujące okienko załaduje się po 3 sekundach ładowania strony.

Jeśli chcesz zmienić obraz, po prostu wyszukaj e-mail-signup-form-Image, a następnie zmień źródłowy adres URL (src) obrazu. Najpierw prześlij obraz do swojej witryny Bloggera, a następnie uzyskaj adres URL obrazu, klikając obraz prawym przyciskiem myszy.

Możesz również zapoznać się z alternatywnymi sposobami integracji Mailchimp z Bloggerem tutaj.

Wniosek

Mam nadzieję, że udało Ci się dodać formularz rejestracji w wyskakującym okienku do swojej witryny Bloggera i zintegrować Mailchimp w celu zbierania adresów e-mail odwiedzających.

Jeśli nadal masz jakiekolwiek wątpliwości, śmiało pytaj mnie w komentarzach.