Como adicionar Assinatura de Email no Seu Blogger - IGNIPLEX

Este código adiciona um popup de assinatura de email ao seu blog do Blogger. O popup aparecerá após 3 segundos quando o visitante acessar o blog pela primeira vez. Ele permitirá que os usuários insiram seus endereços de email para receber atualizações de SEO do blog.

Como adicionar o código no seu blog

1. Acessando o painel de controle do Blogger:

Acesse o painel de controle do Blogger em https://www.blogger.com e faça login com sua conta do Google, caso ainda não esteja logado.

2. Selecionando o blog desejado (caso tenha mais de um):

Se você possui vários blogs em sua conta do Blogger, selecione o blog específico onde deseja adicionar o popup de assinatura de email.

3. Acessando o editor de tema:

No painel de controle do blog, vá para "Tema" ou "Layout" (dependendo da versão do Blogger) no menu lateral esquerdo.

4. Editar HTML:

No editor de tema, clique no botão "Editar HTML" para acessar o código HTML/CSS do seu blog.

5. Adicionar o CSS:

Procure a tag </head> e cole o seguinte codigo em cima desta tag

	<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 {width: 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 {font-weight: 600;color: black;margin: -5px 0 5px 0;}
	</style>

6. Adicionar o HTML:

Procure a tag </body> e cole o seguinte código em cima desta tag

<!-- CSS -->
<style>
  /* Estilos do overlay do popup */
  .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;
  }

  /* Estilos do overlay ativo */
  .email-subscription-overlay.active {
    background: rgba(0, 0, 0, 0.9);
    z-index: 200;
  }

  /* Outros estilos de CSS ... */

</style>

<!-- HTML - Popup de assinatura de 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>Subscribe</h2>
      <p>Techyleaf for Latest SEO Updates</p>

      <!-- Formulário de inscrição da lista de email -->
      <div class='container'>
        <div id='mc_embed_signup'>
          <form action='#' class='validate' id='mc-embedded-subscribe-form' method='post' name='mc-embedded-subscribe-form' target='_blank'>
            <div id='mc_embed_signup_scroll'>
              <div class='mc-field-group'>
                <input class='email-input-field required email' id='mce-EMAIL' name='EMAIL' placeholder='Your Email Address' type='email' value=''/>
              </div>
              <div class='clear' id='mce-responses'>
                <div class='response' id='mce-error-response' style='display:none'/>
                <div class='response' id='mce-success-response' style='display:none'/>
              </div>

              <!-- O código abaixo é usado para evitar cadastros automáticos -->
              <div aria-hidden='true' style='position: absolute; left: -5000px;'>
                <input name='b_ac52e8b1ce2a06907e0091d7c_63bf572981' tabindex='-1' type='text' value=''/>
              </div>

              <div class='clear'>
                <input class='email-submit-btn subscribe' id='mc-embedded-subscribe' name='subscribe' type='submit' value='Subscribe'/>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript -->
<script>
  const emailSubscriptionOverlay = document.querySelector(".email-subscription-overlay");
  const emailCloseButton = document.querySelector(".email-close-btn");

  // Define um timeout de 3 segundos para exibir o popup após o carregamento da página
  setTimeout(() => {
    if (!localStorage.getItem('popupClosed')) {
      emailSubscriptionOverlay.classList.add("active");
      localStorage.setItem('popupClosed', 'true');
    }
  }, 3000);

  // Evento para fechar o popup ao clicar no botão "X"
  emailCloseButton.addEventListener("click", () => {
    emailSubscriptionOverlay.classList.remove("active");
  });
</script>

7. Salve as alterações e prontos

Faça as configurações do formulário para que funcione o envio dos email. Se houver alguma dificuldade, por favor, deixe aqui nos comentários, eu vou responder o mais rápido que poder. Muito obrigado e boa sorte.

Related Posts