Excelente Widget de subscrição para Blogger

Neste post irei falar aqui no DicasHot como você pode estar colocando em seu blog este outro excelente Widget onde seus leitores poderão estar interagindo com o seu blog.

É importante ter Widget como este no blogger para que seus leitores possam acompanhar seus novos artigos sem ter que visitar seu blog.

Com este Gadget, seus leitores posem estar acompanhando o seu blog pelo twitter, facebook, e-mail e feed. Ótimo Gadget, concorda comigo?

1° passo: Acesse o painel do Blogger, escolha o blog que você deseja instalar, selecione a opção "Modelo" e clique em "Editar HTML".

2°passo: Agora usando o Ctrl F, procure por ]]></b:skin> e insira o código abaixo ANTES dele:

@import url("http://fonts.googleapis.com/css?family=Oswald&text=AaBbCcEeFfIiKkLlMmOoRrSsTtWw%20");
.w2bOldSocial ul {
font-family: 'Oswald', sans-serif;
margin: 15px 0;
overflow: hidden;
}
.w2bOldSocial ul li {
float: left;
width: 90px;
padding: 0 0 0 55px !important;
margin: 0 0 0 5px !important;
line-height: 48px !important;
}
.w2bOldSocial ul li a {
font-size: 20px !important;
text-decoration:none;
padding:0 !important;
margin:0 !important;
text-decoration:none;
}
.w2bOldSocial ul li a:hover {
text-decoration:underline;
}
.w2bOldSocial ul li.w2brss {
background: url("http://2.bp.blogspot.com/-HzL4OJ6FzmE/TeTFVVR1A4I/AAAAAAAAA4g/Eiju-1UObXU/s48/RSS.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bmail {
background: url("http://2.bp.blogspot.com/-YcW06xYPTM4/TeTFU1cvqbI/AAAAAAAAA4c/1fyAl6q9QRw/s48/Mail.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2btwitter {
background: url("http://3.bp.blogspot.com/-d8fPV2jD2p0/TeTFVkAMFOI/AAAAAAAAA4k/0jYlyJGVmXM/s48/Twitter2.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bfacebook {
background: url("http://1.bp.blogspot.com/-SfiMNXFU9TE/TeTFUbgc_SI/AAAAAAAAA4Y/THAqJLoo_vg/s48/Facebook.png") no-repeat scroll left center transparent !important;
}
#w2bEmailsub {
display: block;
clear: both;
margin: 10px 0;
}
form.w2bEmailform {
margin: 20px 0 0;
display: block;
clear: both;
}
.emailText {
background: url("http://3.bp.blogspot.com/-SoB4RN7Bchk/TZ1ouay9q0I/AAAAAAAAAlE/dkyZEzF2HIw/s28/w2b-mail.png") no-repeat scroll 4px center transparent;
padding: 7px 15px 7px 35px;
color: #444;
font-weight: bold;
text-decoration: none;
border: 1px solid #D3D3D3;

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

-webkit-box-shadow: 1px 1px 2px #CCC inset;
-moz-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.emailButton {
color: #444;
font-weight: bold;
text-decoration: none;
padding: 6px 15px;
border: 1px solid #D3D3D3;
cursor: pointer;

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

3° passo: Clique em "Salvar modelo" e feche a edição de HTML.

4° passo: Agora selecione a guia "Layout", clique em "Adicionar gadget" e escolha a opção "HTML/JavaScript".

5° passo: Escolha o título que desejar e adicione o seguinte código na caixa do gadget, efetuando as alterações necessárias:

<div class="w2bOldSocial">
<ul>
<li class="w2brss"><a href="http://feeds.feedburner.com/SEU-NOME-DE-USUARIO-NO-FEEDBURNER">RSS</a></li>
<li class="w2bmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=SEU-NOME-DE-USUARIO-NO-FEEDBURNER" >Email</a></li>
<li class="w2btwitter"><a href="http://twitter.com/SEU-NOME-DE-USUARIO-NO-TWITTER">Twitter</a></li>
<li class="w2bfacebook"><a href="URL-DA-SUA-PÁGINA-DO-FACEBOOK">Facebook</a></li>
</ul>
</div>
<div id="w2bEmailsub">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SEU-NOME-DE-USUARIO-NO-FEEDBURNER', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="w2bEmailform">
<input type="hidden" value="SEU-NOME-DE-USUARIO-NO-FEEDBURNER" name="uri" />
<input type="hidden" name="loc" value="pt_BR" />
<input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Digite seu e-mail...&quot;;}" onfocus="if (this.value == &quot;Digite seu e-mail...&quot;) {this.value = &quot;&quot;}" value="Digite seu e-mail..." name="email" class="emailText" />
<input type="submit" class="emailButton" value="Assinar" title='' />
</form>
</div>

6° passo: SUBSTITUA os trechos correspondentes destacados de vermelho no código. Feito isto está pronto!!!