Caixa feed via email personalizado

Muitas pessoas já pediram esse tutorial, como colocar uma caixa personalizada para os visitantes do blog assinarem o feed via email. Então agora fiz!

Como na imagem abaixo:

1º - Para continuar esse tutorial é necessário que seu blog tenha um feed do FeedBurner;

2º -  Copie o código abaixo e cole em algum editor de texto:

 <form action="http://feedburner.google.com/fb/a/mailverify?uri=URI DO SEU FEED" target="popupwindow" method="post" onsubmit="window.open('http://www.feedburner.com', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

<table border="0" cellpadding="0" cellspacing="0" width="180" background="http://img137.imageshack.us/img137/9747/feedmc6.jpg" height="65" align="center">

<tbody><tr>

<td align="right">

<div align="center">

</div>

<div align="center">

<input onfocus="if (this.value == 'Seu email aqui!') {this.value = '';}" style="border: 1px solid silver; background-image: url(http://i16.tinypic.com/4tscnxt.gif); background-repeat: repeat-x; background-attachment: scroll; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 160px;" value="Seu email aqui!" name="email" onblur="if (this.value == '') {this.value = 'Seu email aqui!';}" size="25" type="text"/>

<br/>

<input value="http://feedburner.google.com/fb/a/mailverify?uri=URI DO SEU FEED" name="url" type="hidden"/><input value="NOME DO BLOG AQUI" name="title" type="hidden"/><input value="pt_BR" name="loc" type="hidden"/><input value="Assinar" type="submit"/>

</div></td>

</tr>

</tbody></table>

</form>

3º - Entre na página do seu feed;

Exemplo do Códigos Blog: http://feeds2.feedburner.com/codigosblog

O finalzinho onde está escrito o nome do seu blog é o URI do feed, copie e cole no lugar de “URI DO SEU FEED”.

Exemplo (Códigos Blog) de como vai ficar:

http://feedburner.google.com/fb/a/mailverify?uri=codigosblog

4º - Onde está escrito: "NOME DO SEU BLOG AQUI", coloque o nome do seu blog. ;D

5º - Entre no painel de controle do blogger, entre em "Layout", "Elementos da Página".

6º - Clique para adicionar um novo widget, escolha "HTML/Java Script". Cole o código.

7º - Salve, teste, se deu certo... pronto!

Modificando a imagem (opcional):

Caso queira trocar a imagem que fica no fundo da caixa, faça uma imagem de 180px de largura e 65px de altura.

Hospede em um servidor. Dica? Imageshack

Procure no código a imagem: http://img137.imageshack.us/img137/9747/feedmc6.jpg

Agora troque a imagem atual pela sua imagem, salve.

Pronto! Depois de tudo, sempre teste.


OS COMENTÁRIOS AJUDAM MUITO E INCENTIVAM,
PORTANTO NÃO DEIXE DE FAZER O SEU!