Como adicionar caixa de assinatura de Newsletter no Blogger

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+

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:

Quer ser um(a) Blogueiro(a) de Elite? Acesse AGORA: http://blogueiro.pro

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 == &quot;item&quot;'>
<div id='sub-box'><h1>Receba nossas atualizações:</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=NomeFEED&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Escreva aqui seu e-mail...&quot;;}' onfocus='if (this.value == &quot;Escreva aqui seu e-mail...&quot;) {this.value = &quot;&quot;}' 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.

Quer ser um(a) Blogueiro(a) de Elite? Acesse AGORA: http://blogueiro.pro

41 Comentários

  1. 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!

    Responder

  2. 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

    Responder

  3. 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ç

    Responder

    • 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.

      Responder

  4. 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 ?

    Responder

  5. 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

    Responder

  6. Existe alguma forma de colocar Newsletter apenas para postagens de um determinado MARCADOR? Eu procurei no google, e só achei Feed para marcadores. Existe?

    Responder

  7. É 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é?

    Responder

  8. 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.

    Responder

  9. 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!

    Responder

  10. 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!

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.