Caixa de Subscrição (Subscription Box) para Blogger - BlogSpot 1

Olá pessoal! Acho que muita gente já deve ter visto por alguns blogs/sites, geralmente na parte superior direito uma "Subscription Box" ou Caixa de subscrição, onde você assina os feeds e sabe quantos leitores assinaram e quantos seguidores do twitter em tempo real. E além de deixar seu blog com muito mais cara de profissional, ainda agrupa suas redes sociais em um só lugar. 

Mais antes de tudo, você tem que ter uma conta no FeedBurner, Feito isso, você terá algo parecido com isso, modificando o que está de vermelho pelo seu nome de usuário do site.

http://feeds.feedburner.com/Seu-Feedburner-Feed

É o seguinte, primeiramente, logado ao blogger vá em Design ~> Elementos da página ~> Adiciona um Gadget HTML/JavaScript e em seguida, adicione todo o código abaixo:

<div style="background-color :
#ffffff;padding-top:10px;">

<a href="http://feeds.feedburner.com/SeuFeedburnerFeed" target="_blank"
title="Subscribe To The Latest Posts"><img
style="float:left; width:30px; height:30px; margin-right:5px"
src="http://img171.imageshack.us/img171/162/rssicons.jpg"
/></a><a href="http://feeds.feedburner.com/SeuFeedburnerFeed" target="_blank"
title="Subscribe To The Latest Posts"><b><u>Assine nosso Feed RSS</u></b></a> 

e vamos deixar que você saiba quando temos novos
posts!

<br />

<center>

<b>Ou pegar as últimas postagens via
e-mail</b>

<form style="padding-top:6px;"
id="subscribe"
action="http://feedburner.google.com/fb/a/mailverify"
method="post" target="popupwindow"
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SeuFeedburnerFeed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return
true"> 

<input type="text" value="Enter
your email address..." id="subbox" onfocus="if (this.value
== &#39;Enter your email address...&#39;) {this.value =
&#39;&#39;;}" onblur="if (this.value == &#39;&#39;)
{this.value = &#39; Digite
seu endereço de e-mail...&#39;;}" name="email"
style="width:170px;" /> 

<input type="hidden" value="SeuFeedburnerFeed" name="uri" /> 

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

<input style="

       
padding-left:3px;

       
padding-right:3px;

        border: 1px solid
#333333;

        cursor:
pointer;

        background-color:
#000000;

        color:
#FFFFFF;" 

type="submit" value="Submit"
/> 

</form>

</center> 

<center>

<table border="0"> 

<tr> 

<td>

<a href="SeuFacebookPaginaUrl/FacebookPerfilUrl" target="_blank"
title="Contato no Facebook">

<img style="width:54px; height:54px;"
src="http://img29.imageshack.us/img29/3497/facebookiconf.jpg"
/></a>

</td>

<td>

<a
href="http://twitter.com/YourTwitterUsername"
target="_blank" title="Let's be friend. lols.">

<img style="width:54px; height:54px;"
src="http://img291.imageshack.us/img291/3765/twittericon.jpg "
/></a>

</td>

<td> 

<td>

<a href="http://feeds.feedburner.com/SeuFeedburnerFeed"><img
src="http://feeds.feedburner.com/~fc/SeuFeedburnerFeed?bg=000000&amp;fg=FFFFFF&amp;anim=1"
height="26" width="88" style="border:0;
padding-top:5px" alt="Fellow Readers" /></a>

<script type="text/javascript"
language="JavaScript" src="http://twittercounter.com/embed/SeuTwitterUsuario/ffffff/111111"></script>

</td> 

</td>

</tr> 

</table>

</center> 

</div>

Com o código no Gadget, altere as seguintes partes em VERMELHO de acordo com seus perfis. Exatamente como pede, sem modificar o código, feito isso, escolha um lugar estratégico no seu blog. salve.

Espero que curtam! E qualquer dúvida deixe seu comentário. 

Até a próxima!

Fontes: Junks Blogger