Elegante barra de compartilhamento abaixo dos artigos

Aprenda a colocar uma barra elegante com botões de compartilhamento no final dos post.
de compartilhamento no final dos post.

Olá Pessoal, hoje estarei ensinando a vocês como colocar um lindo widget  de compartilhamento no fim dos post com os botões curtir do facebook, tweet do twitter e +1 do google plus. Esse widget é muito elegante e dá um visual incrível ao rodapé dos seus post  e por ser bastante atrativo incentiva a seus leitores a clicarem e compartilharem seu post. O código  é bem simples e de fácil instalação em seu blog e só aparece nas páginas de postagens graças a condicional <b:if>, vamos ao tutorial.

 

Imagem de exemplo

Acesse o Painel do Blogger, vá em Modelo, clique em Editar Html e marque Expandir Modelos de widgets e procure pela tag <div class='post-footer'> e depois dela cole o código a seguir.

Alerta! Antes de fazer qualquer modificação, faça um backup do seu modelo.
Vá em modelo ► Fazer backup/Restaurar ► Fazer download do modelo completo.

 

 

<style>
.social_share{ background:#fff; height:40px;margin:10px 2px;}.social_share div{float:left;position:relative;width:183px;height:40px;margin:0 1px 0 0;border-radius:5px}.social_share .facebook{background:#3b5998 url(http://obviousmag.org/ob/images/obvious_sprite_pt.png) no-repeat 0 -445px}.social_share .facebook .like{position:absolute;top:10px;left:96px;height:21px}.social_share .twitter{background:#59b url(http://obviousmag.org/ob/images/obvious_sprite_pt.png) no-repeat 0 -395px}.social_share .twitter .tweet{position:absolute;top:10px;left:90px}.social_share .googleplus{margin:0;background:#333 url(http://obviousmag.org/ob/images/obvious_sprite_pt.png) no-repeat 0 -547px}.social_share .googleplus .plusone{position:absolute;top:10px;left:110px}
</style>
<b:if cond='data:blog.pageType == "item"'>
<div class='social_share'>
<div class='facebook'>
<div id='fb-root'/>
<div class='like'>
<script src='//connect.facebook.net/pt_BR/all.js#xfbml=1' type='text/javascript'/>
<div class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='450'/>
</div>
</div>     
<div class='twitter'>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<span class='tweet'><a class='twitter-share-button' data-count='horizontal' data-via='pbloggeroficial' href='http://twitter.com/share'>Tweet</a></span>
</div>
<div class='googleplus'>
<span class='plusone'><g:plusone size='medium'/></span>
<!-- Place this tag after the last plusone tag -->
<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>      

Clique em visualizar para ver se esta tudo ok e salve.