ELEGANTE BARRA DE COMPARTILHAMENTO ABAIXO DOS ARTIGOS

Aprenda a colocar uma barra elegante com botões 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> 
</div> 
</b:if>

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