![[ Ferramentas Blog ]](/wordpress/wp-content/themes/fb5/images/logo.png){kind=logo}
Conseguir assinantes de Newsletter é muito importante para seu blog fidelizar leitores e não deixar seu público se afastar muito das novidades e publicações. É bom contar com todos os recursos disponíveis, já que nem todos os visitantes do seu blog vão ser usuários de redes sociais ou usar Feeds. O e-mail ainda é uma grande fonte de troca de informações. Vou mostrar como adicionar uma caixa de assinatura de newsletter para o rodapé dos posts como na imagem abaixo:
O Blogger já tem um modelo próprio de gadget para você adicionar na barra lateral (sidebar) um formulário de inscrição para Newsletter. É um modelo padrão, mas funcional e já integrado ao FeedBurner da Google:
Mas isso não tem jeito de adicionar em qualquer parte do Blog e é um gadget difícil de customizar. O modelo que vou mostrar é bem grande, com ótimo destaque e limpo, funcionando em qualquer tipo de template. Optei por um fundo branco, mas você pode mexer nas cores, fontes e medidas para se ajustar melhor ao seu estilo de blog.
Recomendo que seja adicionado no rodapé dos artigos, aparecendo apenas quando a pessoa está lendo um post. Isso oferece ao leitor a opção de continuar recebendo novidades do seu blog sem precisar ir até sua página todos os dias.
Vale lembrar que esse recurso só funciona para quem tem conta no FeedBurner que administra automaticamente as atualizações de Feed do seu Blog. Se não sabe como fazer isso, leia também: Google FeedBurner – Criar conta de Feed para seu Blog.
Instalando a Caixa de assinatura de Newsletter
A primeira coisa a fazer é ir até o código fonte do seu blog, clicando no menu “Modelo” e depois no botão “Editar HTML” para ver o código fonte do seu blog. Na janela que abrir, marque “Expandir modelos de widgets”, como na imagem abaixo e procure pela seguinte linha no código:
<data:post.body/>
Imediatamente ABAIXO dessa linha, cole o seguinte trecho só modificando o que está indicado:
<style>
#sub-box{background: border:1px solid #1A2638;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #1a2638)}
#sub-box h1{margin-top:5px; color:#000;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}
#sub-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}
#sub-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}
#sub-box .submit:hover{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
#sub-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
</style>
<b:if cond='data:blog.pageType == "item"'>
<div id='sub-box'><h1>Receba nossas atualizações:</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=NomeFEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == "") {this.value = "Escreva aqui seu e-mail...";}' onfocus='if (this.value == "Escreva aqui seu e-mail...") {this.value = ""}' size='30' type='text' value='Escreva aqui seu e-mail...'/> <input name='uri' type='hidden' value='NomeFEED'/> <input name='loc' type='hidden' value='pt_BR'/> <input class='submit' type='submit' value='Inscrever'/></center></form></div>
</b:if>
Em verde são os textos que aparecem na caixa. Já em vermelho será preciso colocar o nome do seu Feed conforme o endereço que você criou no FeedBurner. Algo como:
http://feeds2.feedburner.com/NomeFEED
Use somente o que destaquei em vermelho. Isso garantirá a assinatura de sua newsletter administrada pelo FeedBurner.
Salve o modelo e veja funcionando em seu Blog.
Todo o trecho que está entre <style>…</style> no código são os estilos de CSS, onde ficam as cores e formatos do elemento que colocamos no Blog. Modifique como achar conveniente, se não gostar do modelo padrão que ofereci.
Marcos, não tem como fazer isso em estilo light-box como o popup domination, ou tipo aquele pra WP pra seguir no facebook, mas mais voltado pra feed?
Acredito que seja possível colocar num pop-up ou semelhante. Eu não gosto desses formatos por ser invasivo. Mas esse código pode ser adicionado em recursos assim.
Muito bom.
Fidelizar leitores é fundamental para a vida de qualquer blog.
Obrigado pela dica, Marcos.
Uso este estilo de cadastro a algum tempo, e tive resultados bem mais rápidos de novos assinantes.
Me desculpe a ignorância. Fiz tds os passos e não vi nada! Isso deveria aparecer aonde?
No rodapé dos artigos quando você entra especificamente em cada um. Não aparece na página inicial ou em páginas onde os artigos aparecem resumidos.
Olá Marcos,
A fidelização de leitores através de uma newsletter é uma estratégia com um impacto progressivo e constante em um blog, ainda mais quando o conteúdo gira em torno de uma estrutura em constante evolução. Esse gadget me parece muito interessante para desde já ser incorporado em um blog. Parabéns!
Sem dúvida que é uma boa opção e muito utilizável,mesmo.
Olá Marcos eu tenho um código de anti-cópiar textos e ao colocar esta tua última dica, correu tudo bem, exceto colocar mail.Ou seja o código que não deixa copiar texto também não deixa colocar mail.Sugeres alguma solução.
Obrigado
Nào sei o que pode estar causando o conflito. Estranho pois não era pra atrapalhar.
Obrigado Marcos pela resposta.Se poderes fazer algo era bom, uma vez que gostei muito dessa caixa.
Marcos:
Também segui os passos e não cosegui colocar esta caixa de newsletter.
Não sei se é problema do meu código de template ou ignorãncia minha, mas já é o segundo código de blogger nestes últimos dias que você fornece e não consigo aplicar no meu Blog.
Meu último comentário também sequer foi publicado, embora também não tenha falado qualquer coisa ofensiva.
Abç
Christian,
É preciso certificar-se de que nenhum trecho do código foi indevidamente modificado e que foi adicionando no local especificado no tutorial. Também vale lembrar que você tem que ter uma conta ativa no FeedBurner para que tudo funcione.
Sobre o comentário. Não me lembro qual era, mas a minha moderação não visa apenas “ofensas”, mas também qualquer coisa que não seja relevante para o conteúdo em questão.
Pra quem perguntou sobre o wordpress,o proprio feedburner disponibiliza o codigo para colocar no final do post no wordpress, ou mesmo em uma widget :o)
eu coloquei no meu blog, mas quando alguem se escreve aparece o seguinte erro, (The feed does not have subscriptions by email enabled), você sabe oque pode ser ?
Adriel,
Você não ativou a newsletter no FeedBurner.
como faço isso, desculpe sou novato na area…
Primeiro criando uma conta no FeedBurner e depois entrando no menu específico do painel deles para ativar o serviço.
OBRIGADO, Consegui arrumar você fez até uma post sobre o problema ashahsuahsuhas
mas obrigado mesmo me ajudou muito.
Marcos, como vai?
Também tive o mesmo problema do Adriel. E está ativado a newsletter no FeedBurner, pois tenho outro gadget de atualização por e-mail que funciona. O que será que ocorre?
Como eu faço isso ?
desculpa so novato na area.
Marcus, nao sei o que tenho de colocar em nome do feed! o meu endereço de feed é este http://feeds.feedburner.com/blogspot/bXDtl Tenho de colocar la tudo ou so o bXDtl?
Marcos, desculpe-me a ignorância. Descobri onde eu estava errando e aproveito para responder também ao André.
Tenho de colocar la tudo ou so o bXDtl?
Apenas o bXDtl!
Eu errava justamente nisso.
Abraços!
A solução é a seguinte: Existem 3 linhas com o código: , o trecho deve ser colado abaixo da segunda linha e não da terceira como descreveu o Marcos.
Penso ter ajudado. Parabéns Marcos pelo seu excelente Blog!
Olá,
Quero te dar meu profundo OBRIGADO por oferecer coisas de tão boa qualidade, tenho acompanhado diariamente seu blog, daqui de moçambique e tenho gostado de mais das dicas…
Muitooo obg
Abç
Daniel
Quando alguém coloca o email aparece a seguinte mensagem: The feed does not have subscriptions by email enabled . Como acerto?
Otacilio,
Você precisa ter uma conta ativa e válida no FeedBurner e ativar o serviço de newsletter antes de usar isso.
Já entendi como atualizar, tinha a conta só não tinha ativado as “atualizações” por email. Obrigado seus tutoriais são muito útil.
gostaria de saber se tem uma caixa dessas que fica visível tanto na pagina inicial como nos post como se foce aquela janela do Facebook
teria como ?
Só aparece nos posts futuros é?
Aparece em todos.
Existe alguma forma de colocar Newsletter apenas para postagens de um determinado MARCADOR? Eu procurei no google, e só achei Feed para marcadores. Existe?
Nesse caso você teria que criar um Feed específico para cada Marcador do seu blog e oferecer para o seu visitante apenas os links específicos que desejar.
É que eu procurei isso, e a forma que eu achei, era apenas de atualizações de um determinado marcador dentro do widget, ou seja, dentro do blog! Eu estava pensando numa forma de toda vez que atualizar um marcador, a pessoa receber no email que este marcador tem uma nova postagem. Obrigada marcos, então é só eu criar um Feed para cada marcador no feedburner né?
Olá, Marcos, como vai? Gostaria de saber se essa caixa funciona no wordpress. Estou nos primeiros passos nessa plataforma, então ainda estou penando, não sei quase nada.. rss.
Nunca testei, mas pode funcionar, sem precisar mudar algo no código.
Não consigo mudar a cor do botão! Já modifiquei o restante, mas o botão continua verde =\ alguém sabe como faço ?
Olá Marcos. Gostaria de saber se posso inserir esse código no wordpress
Rodrigo,
nunca testei, mas pode funcionar, mesmo que precise de algumas poucas modificações.
Testei e deu certo.
Também dá certo se você usar o mesmo código do formulário do feedburner e incluir no final do artigo. Só que é um processo manual, que deve ser feito para cada artigo publicado. Esse processo é para quem estiver tendo problemas de incompatibilidade com algum template do blogger.
Excelente artigo!
Para mim, seu site é uma referência na área de blogs e sites. Sempre que necessito recorro a ele, pois sei que vou encontrar o que preciso. E dessa vez não foi diferente. Parabéns pelo artigo, que me ajudou muito a propósito, e pelo site também!