[Blogger - Gadgets] - Customização do formulário de newsletter do FeedBurner

Hoje, atendendo ao pedido feito pela leitora Inis, eu mostrarei a você como customizar, com HTML e CSS, o formulário de newsletter fornecido pelo serviço FeedBurner. Se você utiliza o formulário de newsletter do FeedBurner, já deve ter percebido que o gadget é extremamente simples, e que em muitos casos causa uma falta de profissionalismo no blog. Caso não conheça o formulário de newsletter do Feedburner, você pode ver um exemplo na imagem abaixo.


Para algumas pessoas este formulário é mais do que o suficiente, por ser simples e funcional, mas para outras esse formulário definitivamente não combina com o blog, e é ai que as pessoas procuram saber como customizar este formulário, de modo que se encaixe melhor em seus templates. Ao final deste tutorial, o seu gadget estará como o mostrado na sidebar do nosso blog de testes.


1. Antes de mais nada você precisa ter o gadget de newsletter do FeedBurner instalado em seu blog. Após instalar a newsletter no seu blog, faça login no Blogger e acesse o painel de controle do seu blog, depois clique no menu Layout. Procure pelo gadget de newsletter e clique no link Editar.

2. Quando a janela se abrir, você verá um código semelhante ao mostrado abaixo.

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=nome-do-seu-feed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>Enter your email address:</p>
<p><input type="text" style="width:140px" name="email"/></p>
<input type="hidden" value="nome-do-seu-feed" name="uri"/>
<input type="hidden" name="loc" value="pt_BR"/>
<input type="submit" value="Subscribe" />
<p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p>
</form>


3. No código acima, eu destaquei uma parte em vermelho, esta parte é variável e mostrará o nome do seu feed. Salve o nome do seu feed em algum lugar (recomendo o bloco de notas). Depois substitua todo o código acima, pelo código mostrado abaixo.

<table class="rss" border="0" width="100%" cellpadding="0" cellspacing="5">
<tr>
<td><div class="image-rss"><img src="link-da-imagem-do-feed" border="0" alt="RSS" /></div></td>
<td><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=nome-do-seu-feed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">Digite seu e-mail: <input id="input-rss" class="input-rss" type="text" name="email"/><input type="hidden" value="nome-do-seu-feed" name="uri" /><input type="hidden" name="loc" value="pt_BR" /><input class="submit-rss" type="submit" value="Assinar"/></form></td>
</tr>
</table>


4. No código acima, você deve subsitituir a parte destacada em vermelho pelo nome do seu feed, aquele que você salvou no bloco de notas (escreva o nome do feed exatamente como estava escrito quando você o salvou). A parte destacada em azul é o texto que aparece acima do campo de e-mail, e você pode mudá-la para qualquer outra que desejar. Em verde, você deve colocar o link da imagem que você quer que apareça ao lado do campo de e-mail, se você não tiver nenhuma imagem clique aqui e escolha a que mais lhe agradar. Para finalizar, você pode mudar a parte que foi destaca em rosa pela palavra que você quer no botão de cadastro.

5. Para finalizar, clique em no botão Salvar.

6. Agora adicionaremos o código CSS que aplicará as cores ao formulário. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

7. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

]]></b:skin>

8. Imediatamente acima deste código, adicione este outro código.

.input-rss {
font: normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
padding: 4px 5px;
width: 93%;
}
.submit-rss {
width: 80px;
font-weight: bold;
color: #000000; /* Cor do texto do botão */
text-shadow: 1px 1px #FFFFFF; /* Cor da sombra do texto do botão */
outline: none;
margin: 5px 0 0;
padding: 5px;
background: #EEEEEE; /* Cor de fundo do botão */
border: 1px solid #BBBBBB; /* Cor da borda do botão */
cursor: pointer;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.submit-rss:hover {
background: #DDDDDD; /* Cor de fundo do botão com o mouse em cima */
border: 1px solid #BBBBBB; /* Cor da borda do botão com o mouse em cima */
}
table.rss {
background: #F5F5F5; /* Cor de fundo do gadget */
border: 1px solid #DDDDDD; /* Cor da borda do gadget */
padding: 0 5px;
margin: 5px 0 0;
}
.image-rss {
margin: 0px 5px 0px -5px;
padding: 5px 0 0;
}


Se você tiver conhecimentos em CSS, poderá alterar o código como desejar. Porém, se você não tiver conhecimentos altere somente o que possui comentários. Os comentários estão escritos da seguinte forma: /* exemplo de comentário */. Você pode ver uma tabela de cores disponíveis para você utilizar, clicando aqui.

9. Para finalizar, clique em Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo. Agora basta ir na página inicial do seu blog e verificar como ficou.

Se você gostou desse artigo, achou ele útil ou ficou com dúvidas, sinta-se a vontade para entrar em contato através dos comentário.

Atualização — 16.03.2011 às 23h40
A equipe do Blogger acaba de anunciar o lançamento de um novo gadget, que já adiciona um formulário de newsletter customizado ao blog, você pode ver um exemplo desse formulário na imagem abaixo.


Para quem gostou deste gadget que é fornecido pelo Blogger e quer saber como instalá-lo, confira esse nosso outro artigo: Gadget de newsletter disponível para os blogs do Blogger.

Atualização — 22.04.2012 às 19h30
O artigo foi atualizado para refletir mudanças realizadas no painel de controle da plataforma Blogger.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 3 comentários neste artigo!

  1. coloquei sombra interna na caixa ficou mais bonito no meu Blog como aqui no seu, mas aquele botão não ficou muito bem com CSS3 só no submit-rss e o submit-rss:hover, então troquei as cores e o botão ficou com CSS3 em todos os estados.

    ResponderExcluir
  2. Boa noite,
    Obrigado por partilhar esta informação...
    Mas o meu contador não está a funcionar..ou seja, os subscrivers desapareceram... como posso contornar a situação?
    Abraço

    ResponderExcluir
    Respostas
    1. Olá Nuno, o desaparecimento do número de assinantes foi um problema que ocorreu recentemente no sistema do FeedBurner, inclusive, também estou experienciando tal fato. A equipe do FeedBurner já está ciente do problema e postou uma nota, em seu blog oficial, avisando que estão trabalhando para resolvê-lo, em breve tudo deverá voltar ao normal!

      Excluir