Arquivos do Website:

Caixa de e-mail do FeedBurner personalizada com CSS para colocar no Blogger


Hoje resolvi compartilhar com você esta linda caixa de subscrição por e-mail, personalizada com CSS. Esta é uma caixa de subscrição por e-mail, oferecida pelo FeedBurner - o modelo original não possui uma aparência muito agradável, mas, basta um pouquinho de CSS, para resolver este pequeno probleminha!


Veja também, o formulário responsivo de e-mail do FeedBurner.
Imagem:www.legaljuice.com

A sua caixa de subscrição por e-mail, irá ficar parecida com esta que está na imagem abaixo (aproveita e subscreve a Newsletter do nosso website):



Temos uma caixa de e-mail personalizada do MailChimp, também; ficou bem parecida com esta do FeedBurner! Este é o código CSS que irá dar estilo à nossa caixa de e-mail do FeedBurner (este CSS deve ser adicionado logo acima de ]]></b:skin>):

.newsletter{float:center;background:#333;height:250px;width:300px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:5px 5px 1px 1px;}

#e-mail{border:0px solid #003000;background:#eee url(http://2.bp.blogspot.com/-_UP2GR09GgU/U9u-5v1NsMI/AAAAAAAAONU/0v7vqW_6INE/s1600/Arroba.png) no-repeat 10px 5px;display:block;padding:17px 22px;float:left;margin-top:17px;margin-left:15px;color:#888;font-size:12px;font-weight:bold;height:26px;width:225px;overflow:hidden;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;box-shadow:0 0 8px 0 #000 inset;}

.master{float:right;background:#318300;margin-top:18px;margin-right:15px;-moz-box-shadow:2px 2px 15px #000;-webkit-box-shadow:2px 2px 15px #000;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;box-shadow:0 0 8px 0 #000 inset;color:#ddd;font-size:17px;font-weight:bold;float:middle;padding:7px 10px;border:0px;height:60px;width:270px;}

.master:hover{float:right;background:#060;margin-top:18px;-moz-box-shadow:2px 2px 15px #000;-webkit-box-shadow:2px 2px 15px #000;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;box-shadow:0 0 8px 0 #000 inset;color:#ddd;font-size:17px;font-weight:bold;float:middle;padding:7px 10px ;border:0px;height:60px;width:270px;cursor:pointer;}

.call {float:center;font-size:20px;font-weight:bold;color:#ccc;}


Controles básicos do CSS:

.newsletter - Controla todo o corpo da caixa de e-mail (background:#333; height:250px; width:300px - cor do fundo, altura e largura da caixa).

#e-mail - Controla o campo onde o usuário insere o endereço de e-mail. Na opção "color:#888", você pode alterar a cor do texto digitado (para alterar altura e largura, substitua os valores em "height:26px;width:225px").

.master - Controla o botão de ação do usuário. Para alterar a cor visível do botão, substitua os valores em "background:#318300"; para alterar a cor do texto visível, substitua os valores em "color:#ddd" (para alterar altura e largura, substitua os valores em "height:60px;width:270px").

.master:hover - Controla o botão de ação, quando o usuário pousar o cursor do mouse sobre ele. Para alterar a cor do botão, substitua os valores em "background:#060"; para alterar a cor do texto, substitua os valores em "color:#ddd" (para alterar altura e largura, substitua os valores em "height:60px;width:270px").

.call - Controla o título do cabeçalho da caixa. Para substituir o tamanho da fonte do título, substitua "font-size:20px", a cor da forte em "color:#ccc".

Bom, eu expliquei o básico do CSS! Caso você tenha pouco conhecimento em CSS, recomendo que você coloque a caixa num blog de testes, para fazer os devidos ajustes, antes de colocar no seu blog principal.

Logo abaixo, temos o código HTML (Adicione este código num elemento de página do seu blog ou diretamente no código fonte, num local onde você desejar que a caixa apareça):

<div class='newsletter'><br/>

<span class='call'>Subscreva a Newsletter</span>

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feeds.feedburner.com/DicasOnlineGratis&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><p>

<input id='e-mail' name='email' onclick='this.value=&apos;&apos;;' type='text' value='Insira aqui o seu endereço de e-mail'/></p>

<input class='master' type='submit' value='Assinar Grátis'/>

<input name='uri' type='hidden' value='DicasOnlineGratis'/>

<input name='loc' type='hidden' value='pt_BR'/>

</form>

</div>


Aqui no código HTML, você deve substituir as "ids" do FeedBurner, destacado na cor vermelha, pelas "ids" do endereço do seu blog no FeedBurner. Veja, o endereço do meu website no FeedBurner é: http://feeds.feedburner.com/DicasOnlineGratis (portanto, a id é "DicasOnlineGratis"). As palavras destacadas na cor azul, podem ser substituídas por outras palavras de sua preferência.

Esta caixa de e-mail personalizada do FeedBurner, serve tanto para o Blogger, quanto para os blogs do WordPress.