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'>×</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.
