Caixa de e-mail responsiva do FeedBurner

Devido ao grande crescimento de acessos à Internet através de dispositivos móveis, os blogs e websites que não desejam ficar parados no tempo, precisam estar preparados para atender essa nova tendência de mercado! Para atender esse público, seu blog ou website vai precisar de um template responsivo, além de gadgets com esse mesmo padrão. Pensando em lhe ajudar nessa tarefa, resolvi trabalhar neste formulário responsivo de e-mail do FeedBurner.



Este formulário de e-mail do FeedBurner, é o mesmo que estou utilizando neste website. Acesse a nossa página da newsletter e faça o teste - aproveita e subscreve a newsletter do Dicas Online Grátis. Para adicionar este formulário na sua página da web, basta você copiar este código abaixo, e adicionar num elemento de página na barra lateral do seu blog ou website; é possível também, adicionar numa página estática do Blogger ou numa página de artigos.

<style type="text/css">

.newsletter{background:#333;height:350px;width:100%;max-width:290px;-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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmJDLTYqnO-2_vDGtvn23KfRy6y6rC1MlyxIkQn-buDGterycF7CF_Bl5eSvA1OIoth-KrqiAbbtb0vqLh6ExfGi3QPFQwew1cV365e8aODTddKkqWhc8YsFLjQF06qIWY0I8PR3cwihU/s1600/Arroba.png) no-repeat 10px 8px;display:block;padding:17px 22px;float:middle;margin-top:20px;margin-left:4px;margin-right:5px;color:#888;font-size:17px;font-weight:bold;height:32px;width:70%;overflow:hidden;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;box-shadow:0 0 8px 0 #000 inset;}.master{float:middle;background:#4c86f0;margin-top:15px;margin-right:5px;-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;padding:7px 10px;border:0px;height:80px;width:78%;}.master:hover{float:middle;background:#4c86f0;opacity: 0.8;margin-top: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;-webkit-transition-duration: .90s;color:#ddd;font-size:17px;font-weight:bold;padding:7px 10px ;border:0px;height:80px;width:78%;cursor:pointer;}

.call {float:middle;font-size:32px;font-weight:bold;color:#4c86f0;text-shadow: 0 0 3px #4c86f0;}

</style><br />

<center>

<div class="newsletter">

<br />

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

<br />

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

<input id="e-mail" name="email" onclick="this.value='';" type="text" value="" /><br />

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

</center>

Personalize este formulário, de acordo com as configurações do local onde ele será adicionado. Este código está personalizado para exibir o formulário numa barra lateral com 300px de largura.

A)max-width:290px - Controla a largura máxima do formulário;
b)background:#333 - Controla a cor de fundo do formulário;
c)background:#4c86f0 - Controla a cor de fundo do botão de ação no formulário (2x);
d)font-size:32px, color:#4c86f0, text-shadow: 0 0 3px #4c86f0 - Controla o tamanho, cor e sombra do título de chamada no formulário.

Não esqueça de substituir o "DicasOnlineGratis" pelo endereço do Feedburner do seu blog ou website. Os textos marcados podem ser substituídos por outros de sua preferência.