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:
caixa
Vamos passar a implementação:
  1. Entra no blogger
  2. Clica em Esquema
  3. Clica em Adicionar Mini-Aplicação
  4. Escolhe uma caixa HTML/JavaScript
  5. 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 == &quot;enter your email address…&quot;) {this.value = &quot;&quot;}” onblur=”if (this.value == &quot;&quot;) {this.value = &quot;enter your email address…&quot;;}” />
<input type=”hidden” name=”uri” value=”&lt;span&gt;&lt;b&gt;FeedBurner&lt;/b&gt;&lt;/span&gt;” />
<input type=”hidden” name=”loc” value=”en_us” />
<input type=”submit” value=”subscribe” /></center></form>&nbsp;

&nbsp;

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

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

<a href=”https://plus.google.com/&lt;b&gt;&lt;span&gt;XXXXXXXX&lt;/span&gt;&lt;/b&gt;” 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/&lt;b&gt;&lt;span&gt;XXXXXXXX&lt;/span&gt;&lt;/b&gt;” target=”_blank”><img alt=”” src=”http://softglad.at.ua/images/rss.png” /></a></td>
</tr>
</tbody>
</table>
&nbsp;

&nbsp;

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

Adicionar Comentário