Widget com botões das redes sociais para Blogger

Olá blogueiros, hoje velho lhes apresentar um incrível gadget para Blogger que permite inserir na sidebar do seu blog um box com botões de compartilhamento nas redes sociais e uma caixa de assinar feed.

Utilizar um widget como esse pode ajudar muito seu blog a ter uma boa repercussão nas redes sociais, e consequentemente, você poderá receber muitas visitas oriundas delas, já que hoje em dia as redes sociais fazem parte do dia a dia da maioria dos internautas de todo o mundo.

• A importância das redes sociais para seu blog

O widget foi desenvolvido pelo site Way2Blogging (em inglês), inspirado no widget usado no Mashable.com (também em inglês).

Caso você deseje visualizar uma demonstração basta acessar nosso blog de testes.

Instalando 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:

</head>
3° passo: E acima dele adicione o seguinte código:

<style type="text/css">
#w2b-mashable{width:300px;margin:auto;padding:0;}
.w2b-facebook {background:#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
.w2b-gplusone {background-color: #f5fcfe;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}
.w2b-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
.w2b-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;}
.w2b-twitter a.twitter-follow-button {display: block;}
.w2b-twitter iframe {margin: 9px 11px;}
.w2b-emailbox {background-color: #E3EDF4;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}
.w2b-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.w2b-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.w2b-emailbox input.emailu:focus {color: #333;}
.w2b-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.w2b-emailbox input.submitu:hover {text-decoration: none;}
.w2bDefault {border: 1px solid #cc7c00;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
.w2bDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}.w2b-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
.w2b-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
</style>
No trecho em laranja é a largura do widget, se a largura da sidebar do seu blog for menor que 300px, mude para um número menor.

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

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

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

<div id="w2b-mashable">
<div class="w2b-facebook">
<iframe src="//www.facebook.com/plugins/like.php?href=URL-DA-SUA-PÁGINA-DO-FACEBOOK&amp;send=false&amp;layout=standard&amp;width=280&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:66px;" allowtransparency="true"></iframe>
</div>
<div class="w2b-gplusone">
<script type="text/javascript">/*<![CDATA[*/
(function() {
var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
})();/*]]>*/
</script>
<div class="g-plusone" data-size="medium" data-href="URL-DO-SEU-SITE"></div>
<span>Recomende este site no Google</span>
</div>
<div class="w2b-twitter">
<a href="http://www.twitter.com/SEU-NOME-DE-USUARIO-NO-TWITTER" class="twitter-follow-button" data-show-count="true">Follow @SEU-NOME-DE-USUARIO-NO-TWITTER</a>
<script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script>
</div>
<div class="w2b-emailbox">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" 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" target="popupwindow">
<table width="100%">
<tr>
<td>
<input class="emailu" name="email" placeholder="Receba os posts por e-mail" type="text"/>
</td>
<td width="64px">
<input class="submitu w2bDefault" type="submit" value="Assinar"/>
</td>
</tr>
</table>
<input name="uri" type="hidden" value="SEU-NOME-DE-USUARIO-NO-FEEDBURNER"/>
<input name="loc" type="hidden" value="pt_BR"/>
</form>
</div>
</div>
Para que o gadget funcione corretamente, basta você substituir os trechos em laranja pelos trechos correspondentes.

7° passo: Clique em "Salvar".

Obs.: Caso você tenha dificuldades em editar códigos HTML, você pode gerar o widget automaticamente.

Quero aproveitar a oportunidade para anunciar que no dia 13 (a data em que o Como Blogar completará 2 meses de existência) iremos realizar uma promoção onde sortearemos um determinado prêmio, que por enquanto ficará em sigilo. Ficou curioso, não? Aguarde.

Gostou? Compartilhe:

Tweet