01 junho 2016
NEWSLETTER PERSONALIZADA: 4 MODELOS
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> <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> <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> <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">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.
.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> <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>
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ê:
- Baixe o layout base
- Background personalizado
- Cabeçalho com largura total
- Categorias em imagem
- Centralizando o título do post
- Personalizando o rodapé do post
- Postagem Relacionada
- Títulos dos Gadgets Personalizados (5 Modelos)
- colocar a foto do perfil arredondada
- Exibir último vídeo do youtube no blog
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!
Oi Lory, parabéns pelo post é muito útil! Eu adoraria saber mais sobre esse assunto, pois ainda sou leiga rs
ResponderExcluirUm beijo!
Obrigada Larissa! Pode deixar que farei um post explicando melhor esse assunto =) um super beijo :*
Excluiradorei o post tudo bem explicado.. e seu blog também!!!
ResponderExcluirObrigada Vivi =) Bjos linda :*
ExcluirObrigada, Lorena =) Beijinhos
ResponderExcluirDe nada meu anjo <3 Bjão :*
Excluir