Como Adicionar Caixa De Subscrição FeedBurner No Blogger

Todos sabemos o quanto são importantes os nossos subscritores do FeedBurner, não apenas pelo facto de podermos realizar campanhas de e-mail marketing mas também devido às atualizações automáticas feitas pelo FeedBurner sempre que publicamos alguma coisa no nosso site.

O widget que hoje vou ensinar a colocar no blogger é uma caixa de subscrição da Newsletter muito elegante e que o pode ajudar a aumentar os seus subscritores.

A elegante caixa de subscrição não apresenta apenas a subscrição por e-mail, mas também a partilha de conteúdo ou o direccionamento do visitante para as redes sociais mais populares.

Pode verificar o resultado final na imagem abaixo:

Vamos passar a implementação:

Entra no blogger
Clica em Esquema
Clica em Adicionar Mini-Aplicação
Escolhe uma caixa HTML/JavaScript
Dentro da caixa cole o seguinte código:

</ol>
<blockquote><style type=”text/css”><!–
#subscribe-wrapper { background: url(http://softglad.at.ua/images/border.png) repeat scroll 0 0 transparent; padding: 3px; } #subscribe-box { background: url(http://softglad.at.ua/images/bg.png) repeat scroll 0 0 #F7F7F7; border-radius: 15px; padding:5px; overflow: hidden; } a.linkopacity img { filter:alpha(opacity=75); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5; -webkit-transition:All .5s ease; -moz-transition:All .5s ease; -ms-transition:All .5s ease; -o-transition:All .5s ease; transition:All .5s ease; padding: 3px; border: 1px solid #999; } a.linkopacity:hover img { filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1; -khtml-opacity: 1; -moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.44); -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.44); box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.44); } #subscribe-box:hover table { top: 0; } #subscribe-box h1{ margin-top: 5px; color: black; font-family: arial; font-size: 15px; margin-bottom: 5px; line-height: 14px; font-weight: bold; text-align: center; letter-spacing: -1px; } #subscribe-box table { position: relative; top: 40px; -webkit-transition:All .5s ease; -moz-transition:All .5s ease; -ms-transition:All .5s ease; -o-transition:All .5s ease; transition:All .5s ease; margin-bottom: 0px; } #subscribe-box td { padding: 2px; } #subscribe-box input{ background: white; border: medium none; font-size: 12px; padding: 10px; width: 150px; color: #666; font-family: arial; margin-bottom: 3px; width: 55%; } #subscribe-box input:focus{outline:none;} #subscribe-box .submit{ background: #E73827; color: #fff; cursor: pointer; font-weight: bold; text-shadow: 0 1px 2px black; width: 90px; font-family: arial; margin-left: -3px; font-size: 14px; }
–></style>
<div id=”subscribe-wrapper”>
<div id=”subscribe-box”>
<h1>Subscribe to Get Latest Tutorial via email</h1>
<form action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=SoftGlad', ‘popupwindow', ‘scrollbars=yes,width=550,height=520');return true”><center>
<input type=”text” name=”email” size=”20″ value=”enter your email address…” onfocus=”if (this.value == "enter your email address…") {this.value = ""}” onblur=”if (this.value == "") {this.value = "enter your email address…";}” />
<input type=”hidden” name=”uri” value=”<span><b>FeedBurner</b></span>” />
<input type=”hidden” name=”loc” value=”en_us” />
<input type=”submit” value=”subscribe” /></center></form>

<a href=”http://www.facebook.com/<b><span>XXXXXXXX</span></b>” target=”_blank”><img alt=”” src=”http://softglad.at.ua/images/facebook.png” /></a>

<a href=”https://twitter.com/<b><span>XXXXXXXX</span></b>” target=”_blank”><img alt=”” src=”http://softglad.at.ua/images/twitter.png” /></a>

<a href=”https://plus.google.com/<b><span>XXXXXXXX</span></b>” target=”_blank”><img alt=”” src=”http://softglad.at.ua/images/Google.png” border=”0″ /></a>
<table>
<tbody>
<tr>
<td><a href=”http://feeds.feedburner.com/<b><span>XXXXXXXX</span></b>” target=”_blank”><img alt=”” src=”http://softglad.at.ua/images/rss.png” /></a></td>
</tr>
</tbody>
</table>

</div>
</div></blockquote>
<div></div>

Por fim edite os campos a vermelho (XXXXXXXX e FeedBurner) e pode clicar em salvar.

Espero que tenham gostado deste fantástico widget, qualquer dúvida ou opinião na implementação é só deixar comentário!

Paulo Páscoa