Gadget caixa de Assinar Newsletter para Blogger

A maioria das pessoas querem um gadget de assinar newsletter, simples, limpo, mas elegante e bonito para seus Blogs. Hoje nós apresentamos um elegante e bonito de assinar newsletter para Blogger, fácil de instalar com novos efeitos CSS. Pode ser colocado em qualquer lugar do seu template que aceite gadgets padrões do Blogger e ficará semelhante à imagem abaixo.

Este gadget irá manter a sua barra lateral arrumada e limpa e certamente irá atrair visitantes para se inscrever. Siga os passos a seguir para adicionar este simples e elegante gadget assinar newsletter em seu Blog.

Como colocar o gadget de Assinar Newsletter no blog?

É muito simples!
1. Acesse o painel do seu blog no Blogger.
2. Clique no menu “Layout”
3. Clique em “Adicionar um gadget” → Escolha tipo “HTML/Javascript” e cole o seguinte código, só modificando o que está indicado:
<style>
.mbt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbCwZbH6XNf_dBHyJwcICuuOmsZ62bnNetgSuDrxHHR3nFjO74ayeIu9GjCuqcyWWzuSW9A4xVCBwCzZ82EOK2dwDkgwB2EaDC5qZX7QYPb3gtYY9TdIU2OzWm4TZFpmrpS9xx5i4t-wKc/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#0084CE;
}
.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:4px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif; box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1);
}
.mbt-emailsubmit:hover{
background:#0084CE; box-shadow:inset 8px 8px 6px rgba(0,0,0,0.1);
}
.textarea{background: #fff !important;box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1);
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #888; font-size: 12px;
height: 25px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px; }
< /style>
< div class="mbt-email">
Receba as atualizações via Email
< form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SEU-FEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
< input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
< input type="hidden" value="SEU-FEED" name="uri"/><input type="hidden" name="loc" value="pt_Br"/>
< input class="mbt-emailsubmit" value="Submit" type="submit" />
< /form>
< /div>
Nota: Observe que no código tem dois texto destacados com a cor vermelha:
Onde estiver SEU-FEED, você vai substituir pelo nome do seu feed da sua conta do Feedburner.
Você poderá arrastar o Gadget para a base ou o topo da área de postagens, por exemplo, para ficar mais visível ou deixar na barra lateral (sidebar) do seu blog.

fonte: ferramentas blog