NEWSLETTER PERSONALIZADA: 4 MODELOS

01 junho 2016

Dando continuidade a nossa série Layout dos sonhos, hoje trago um tutorial de newsletter personalizada para o Blogger. Pra quem não sabe, newsletter é um gadget que foi desenvolvido para os leitores se cadastrarem por e-mail para receber os posts em sua caixa de entrada. Em breve pretendo criar um post mais detalhado sobre esse assunto, que abrange muitos tópicos. Eu preparei 4 modelos para você sair daqui já personalizando a sua news, veja:



1º - Para adicionar é muito fácil. No painel administrativo do seu blogger, procure por: Layout - Adicionar um Gadget - HTML/JavaScript e cole um dos códigos abaixo:

Modelo 1 

<style type="text/css">
.caixasubscricao { background: URL("https://4.bp.blogspot.com/-RqAcyPl2yDY/V073rc5wYLI/AAAAAAAAOJ4/2o_OP8vDNo8_ykcLhKNYVU_1rsP7uX53ACLcB/s1600/news1.png") no-repeat; padding: 5px; height:120px;font-family: 'Open Sans Condensed', sans-serif;font-size: 18px;text-align: center;color: transparent;width: 300px;}input[type="submit"].solid {position:relative;left:10px;background: transparent;font-family: 'Open Sans Condensed', sans-serif;font-size: 18px;width: 50px;margin-right: 18px;float: right;margin-top: -44px;border: 0px;}input[type="submit"].solid:hover {background: transparent;font-family: 'Open Sans Condensed', sans-serif;font-size: 18px;width: 50px;
}#e-mail {background: #ffffff; padding:5px;width:150px;margin-top: 30px;text-align: center;margin-left: -30px;border: 0px;}</style>
<div class="caixasubscricao"><div class="hl"></div>&nbsp;<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feeds.feedburner.com/blogspot/IDdoseuFEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p><input type="text" name="email" id="e-mail" value="Insira aqui o seu mail" onclick="this.value='';"/></p><input type="submit" class="solid" value=""/><input type="hidden" value="blogspot/IDdoseuFEED" name="uri"/><input type="hidden" name="loc" value="pt_BR"/></form></div>
Modelo 2

<style type="text/css">
.caixasubscricao { background: URL("https://4.bp.blogspot.com/-sPKdn3D5dag/V073rc24FyI/AAAAAAAAOJw/_I9pzuUt-SQ4s1y_GhYz9KrWFcbN_BJiACLcB/s1600/news2.png") no-repeat; padding: 5px; height:120px;font-family: 'Open Sans Condensed', sans-serif;font-size: 18px;text-align: center;color: transparent;width: 300px;}input[type="submit"].solid {position:relative;left:10px;background: transparent;font-family: 'Open Sans Condensed', sans-serif;font-size: 18px;width: 50px;margin-right: 18px;float: right;margin-top: -44px;border: 0px;}input[type="submit"].solid:hover {background: transparent;font-family: 'Open Sans Condensed', sans-serif;font-size: 18px;width: 50px;
}#e-mail {background: #ffffff; padding:5px;width:150px;margin-top: 30px;text-align: center;margin-left: -30px;border: 0px;}</style>
<div class="caixasubscricao"><div class="hl"></div>&nbsp;<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feeds.feedburner.com/blogspot/IDdoseuFEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p><input type="text" name="email" id="e-mail" value="Insira aqui o seu mail" onclick="this.value='';"/></p><input type="submit" class="solid" value=""/><input type="hidden" value="blogspot/IDdoseuFEED" name="uri"/><input type="hidden" name="loc" value="pt_BR"/></form></div>
Modelo 3


<style type="text/css">
.caixasubscricao { background: URL("https://4.bp.blogspot.com/-MAx8eMOOMCo/V08PlPFN0xI/AAAAAAAAOK8/XFuEojAxK54JujcarTe4mze9R7mPohGSQCLcB/s1600/news3.png") no-repeat; padding: 5px; height:120px;font-family: 'Open Sans Condensed', sans-serif;font-size: 18px;text-align: center;color: transparent;width: 300px;}input[type="submit"].solid {position:relative;left:10px;background: transparent;font-family: 'Open Sans Condensed', sans-serif;font-size: 18px;width: 50px;margin-right: 18px;float: right;margin-top: -44px;border: 0px;}input[type="submit"].solid:hover {background: transparent;font-family: 'Open Sans Condensed', sans-serif;font-size: 18px;width: 50px;
}#e-mail {background: #ffffff; padding:5px;width:150px;margin-top: 30px;text-align: center;margin-left: -30px;border: 0px;}</style>
<div class="caixasubscricao"><div class="hl"></div>&nbsp;<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feeds.feedburner.com/blogspot/IDdoseuFEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p><input type="text" name="email" id="e-mail" value="Insira aqui o seu mail" onclick="this.value='';"/></p><input type="submit" class="solid" value=""/><input type="hidden" value="blogspot/IDdoseuFEED" name="uri"/><input type="hidden" name="loc" value="pt_BR"/></form></div>
Modelo 4

<style type="text/css">
.caixasubscricao { background: URL("https://3.bp.blogspot.com/-URVhWLVsnlQ/V08PlMB5MVI/AAAAAAAAOK4/Yz19SgQvf00z5-9t4G8tmoUxbsoCafZ-wCLcB/s1600/news4.png") no-repeat; padding: 5px; height:120px;font-family: 'Open Sans Condensed', sans-serif;font-size: 18px;text-align: center;color: transparent;width: 300px;}input[type="submit"].solid {position:relative;left:10px;background: transparent;font-family: 'Open Sans Condensed', sans-serif;font-size: 18px;width: 50px;margin-right: 18px;float: right;margin-top: -44px;border: 0px;}input[type="submit"].solid:hover {background: transparent;font-family: 'Open Sans Condensed', sans-serif;font-size: 18px;width: 50px;
}#e-mail {background: #ffffff; padding:5px;width:150px;margin-top: 30px;text-align: center;margin-left: -30px;border: 0px;}</style>
<div class="caixasubscricao"><div class="hl"></div>&nbsp;<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feeds.feedburner.com/blogspot/IDdoseuFEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p><input type="text" name="email" id="e-mail" value="Insira aqui o seu mail" onclick="this.value='';"/></p><input type="submit" class="solid" value=""/><input type="hidden" value="blogspot/IDdoseuFEED" name="uri"/><input type="hidden" name="loc" value="pt_BR"/></form></div>
2º - Agora que  já escolheu seu modelo preferido, você precisa ir novamente em seu painel administrativo no blogger e procurar  por:  Layout - Adicionar um Gadget - Seguir por e-mail.  Basta seguir os passos descritos na imagem abaixo.


3° - O elemento selecionado se refere ao ID do seu feed, será ele que fará o código da newsletter funcionar. Todo blog possui uma ID diferente. Copie o seu e cole onde está escrito IDdoseuFEED no código da newsletter que você escolheu. Mas ele ainda pode não funcionar, pois talvez o seu feed esteja inativo. Para ativa-lo você precisa acessar o site Feedburner, clicar no nome do seu blog e seguir os passos descritos na imagem abaixo:


Prontinho! Sua newsletter está pronta para receber cadastros. Pretendo aprofundar mais nesse assunto aqui no Manual, pois sei o quanto é importante esse elemento na vida de um blog, e se você deseja crescer como eu desejo, com certeza vai querer aprender um pouco mais sobre o assunto. Espero que tenha gostado do tutorial de hoje, e se você perdeu as últimas aulas, não faz mal, eu listo todas elas pra você:

Caso surja alguma dúvida, ou qualquer erro no código é só me avisar. Não esquece de seguir o blog e de me acompanhar nas redes sociais. Um super beijo e até a próxima!

4 comentários:

  1. Oi Lory, parabéns pelo post é muito útil! Eu adoraria saber mais sobre esse assunto, pois ainda sou leiga rs
    Um beijo!

    ResponderExcluir
    Respostas
    1. Obrigada Larissa! Pode deixar que farei um post explicando melhor esse assunto =) um super beijo :*

      Excluir
  2. adorei o post tudo bem explicado.. e seu blog também!!!

    ResponderExcluir