Como adicionar um pop-up de assinatura de e-mail ao Blogger (via Mailchimp)

Publicados: 2022-04-20

Deseja coletar e-mails dos visitantes do seu site e enviar mensagens personalizadas diretamente para suas caixas de entrada? bem, siga este tutorial passo a passo para saber como fazer isso.

O e-mail marketing é uma das maneiras mais eficazes de se conectar com o público, obter mais tráfego para os sites e apresentar produtos e serviços ao seu público.

Então, para isso, você precisa de ferramentas de marketing por e-mail como Mailchimp , convertkit e um formulário de inscrição por e-mail que conectará seu site a essas ferramentas. Você pode usar um formulário de inscrição ou um pop-up de inscrição em seu site.

O pop-up de assinatura é mais eficaz do que o formulário de inscrição tradicional, pois chama a atenção do usuário ao aparecer na tela. Os usuários podem entrar facilmente em sua lista de e-mail, fornecendo seus nomes e endereços de e-mail no campo.

Depois disso, o endereço de e-mail será adicionado à sua ferramenta de marketing por e-mail e você poderá enviar e-mails personalizados para seus assinantes e fornecer atualizações sobre sua nova postagem ou produtos.

Se você deseja fazer marketing de afiliados por meio de e-mails, também pode considerar as respostas automáticas de e-mail, onde você pode automatizar diferentes processos e gerar melhores resultados.

ok, vamos verificar como você pode adicionar um pop-up de assinatura de e-mail ao seu site do Blogger e integrá-lo à sua conta do Mailchimp.

Etapas para adicionar pop-up de assinatura de e-mail no Blogger

Para adicionar um pop-up de assinatura de e-mail no Blogger, siga as etapas abaixo.

  1. Vá para o painel do Blogger e clique na seção de temas.
  2. Agora clique na seção Editar HTML e encontre a tag </body>.
  3. Em seguida, cole o código fornecido acima e substitua o link de ação do formulário do Mailchimp nele.
  4. Agora salve o código e o pop-up de assinatura de e-mail será adicionado ao seu site do Blogger.
 <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 { largura: 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 {preenchimento: 5px 10px;peso da fonte: negrito;cor do fundo: branco;}
.response {peso da fonte: 600;cor: preto;margem: -5px 0 5px 0;}
  </style>

<!-- Pop-up de assinatura de 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> Se inscrever </h2>
<p> Techyleaf para atualizações de SEO mais recentes </p>

<div class='container'>
<div>
<form ação=' # ' class='validate' method='post' name='mc-embedded-subscribe-form' target='_blank'>
<div><div class='mc-field-group'><input class='email-input-field obrigatório email' name='EMAIL' placeholder='Seu endereço de e-mail' type='email' value=''/ ></div>
<div class='clear'><div class='resposta'/><div class='resposta'/>
</div><!-- pessoas reais não devem preencher isso e esperar coisas boas - não remova isso ou arrisque inscrições de bot de formulário-->
<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>

  <script>
    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;ativo&quot;);
        localStorage.setItem(&#39;popupFechado&#39;, &#39;true&#39;);
    }
}, 3000);

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

Como integrar o Mailchimp com o formulário Popup?

Você precisa alterar o link de ação do formulário (substitua o # ) pelo URL do Mailchimp. (ou seja, <form action='#' class='validate').

Para obter este link, você precisa se inscrever para uma conta gratuita com uma conta MailChimp e criar um formulário de inscrição lá. Depois disso, você precisa extrair o link de ação do formulário desse código. Siga o tutorial em vídeo para conferir o passo a passo.

Vídeo do youtube

Como personalizar o formulário de inscrição pop-up?

Se você estiver usando temas como Median UI ou tema Fletro pro , ele pode não funcionar corretamente em dispositivos móveis. Você precisa ajustar a largura do pop-up no código CSS para isso.

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

Encontre este código e altere a largura do contêiner de 75% para 85% assim.

Você também precisa alterar a tag h2 e de parágrafo (destacada acima) usada no código acima. Basta alterar o texto de acordo com o seu site.

Também mostrei como alterar a duração do pop-up mostrado no tutorial em vídeo. Por padrão, é definido para 3 segundos. Portanto, o pop-up será carregado após 3 segundos de carregamento da página.

Se você quiser alterar a imagem, basta pesquisar por email-signup-form-Image e alterar a URL de origem (src) da imagem. Primeiro, faça o upload da imagem para o site do Blogger e, em seguida, obtenha o URL da imagem clicando com o botão direito do mouse na imagem.

Você também pode conferir as formas alternativas de integrar o Mailchimp com o Blogger aqui.

Conclusão

Espero que você tenha adicionado com sucesso o formulário de inscrição pop-up ao seu site do Blogger e integrado o Mailchimp para coletar os endereços de e-mail de seus visitantes.

Se você ainda tiver alguma dúvida, sinta-se à vontade para me perguntar na seção de comentários.