Barra de compartilhamento abaixo dos artigos

Olá pessoal, como vocês estão? Faz uns dias que não venho aqui porque estou fazendo IR.

Hoje trago para vocês um tutorial que é bem fácil colocar no blog.

Sabem aquela barrinha de compartilhamento com os botões curtir do facebook, 

tweet do twitter e +1 do google plus? 

Essa barrinha é muito elegante e só aparece nas páginas internas do blog por causa

da condicional <b:if>.

É essa que vou ensinar a colocar no blog. Os créditos vai para Personalizar o Blogger.

No html de seu blogl  marque Expandir Modelos de widgets e procure pela tag <div class='post-footer'> e depois dela cole o código a seguir.

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

Gostaram do tutorial? Qualquer dúvida pergunte.