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:

• Novo gadget do Blogger “Seguir por e-mail”: Newsletter padrão do Blogger

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.