Widget de subscrição para Blogger/Blogspot

É essencial que todo e qualquer blog esteja conectado com as redes sociais para que os leitores possam acompanhar seus novos artigos sem ter que visitar seu blog. É recomendável também facilitar a navegação do seu leitor colocando um widget com links para as principais redes sociais em um local visível, mais especificamente na sidebar.

Já ensinamos aqui como inserir um gadget com botões de compartilhamento das principais redes sociais no Blogger. Hoje traremos um widget com a funcionalidade semelhante, só que com aparência diferente.

Inserindo o widget de subscrição no Blogger

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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7t83pB4rd88eAVqpRiJcU8mguWDG-HhQ-pr0fnijFvfhmCmq2wZgzyBdUVB_cD3TaLZ7L76jMTe5h5QjOUb472oujF_RDtBk43LHuHNunqmB7cnB114GbEjeSVgC88O78idqNVCWRKEn7/s48/RSS.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bmail {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVQOKd4qlNP_hzMuMEElc3QitB2p044HBop8BPFYM7VENRS2rQiI7wsSrnOcdVSNwtjx0HP231kn4EAw-BfwtmtSOl9IbELP1pjUMq6ysLoHrf_34S7hxJEnwlyunkLRBP-aMzHfZ63PZZ/s48/Mail.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2btwitter {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDdDxaomRjTHuGQiB0YmuXMZNEmqoyjHw6Y2kdxAsCR5BNsvjKfCGHW22e4fbrzo4aW2yhIZ2YedqOY3BBWhnCYw7lWQWP8DzRvd9_9Kpc3SHlaO4DYE1kDXxu_tDkyaesRM3wqoGSoBRC/s48/Twitter2.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bfacebook {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_ULL_ji0t0Bu_0pv1iy10PtqGhu9ETnK1rkfQt3M6Hjt77uEiST5c8Dw19V1zWbzEu18PFYj0hySJbBuzqtvAIVNFYX24ykJJVEsQjDKQCZFViAo7gVfX74_vrjdSWNkx0uRW-pfgYebh/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMoTulqaK2d9FibA2E5nBsp_vF1RzGFofakZj7DTpidD8TPdukvx4bEa5jIN5wAVbn2Bj0Idj3cYwnEViw16mO9jiY5P6XSmLwKowg_P8xMmRhH_j_Jf931Uc3hB39V75njIudly20qIOx/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>
Para que o widget funcione corretamente, basta você substituir os trechos em laranja pelos trechos correspondentes.

6° passo: Clique em "Salvar".

Pronto! O gadget já está instalado em seu blog.

Gostou? Compartilhe:

Tweet