Widget de Barra flutuante para compartilhar nas redes sociais

Widget de Barra Flutuante com boões de Tweet, Google Plus, Curtir e Enviar.



Hoje ensinarei a vocês como colocar uma barra flutuante  ao lado das postagens, incentivando os leitores a compartilharem seu artigo nas redes sociais.
A barra é muito elegante e fica fixa ao lado de cada artigo do blog e tem os botões Tweet, Google Plus (+1), Curtir e Enviar do Facebook  com contadores. Acho muito importante para qualquer blog independente do nicho ter uma barra como essa, pois ela incentiva os leitores a compartilharem os artigos do seu blog nas redes sociais pelo fato de estar sempre presente ao lado das postagens.

 

O código é bem simples e muito fácil de adicionar no seu blog, basta seguir o tutorial, vamos lá.
Acesse o Painel do Blogger, vá em Modelo, Clique em editar Html e Marque a opção Expandir modelos de widgets e procure pela tag </head> e acima dela cole o seguinte código.

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.

 

 

<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1' type='text/javascript'/>
<!-- Place this tag after the last badge tag. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'pt-BR'};(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>

Ainda dentro do código fonte do seu blog procure agora pela seguinte tag
<div class='post-footer-line post-footer-line-3'> e cole o código a seguir logo após a tag encontrada.

<style>
#box{border:1px solid #ccc; padding:5px; background:#fff; z-index:9999; display:block; position:fixed; top:220px; float:left; margin:0 0 0 -130px; text-align:center;}
#box div{margin: 10px 0;}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='floating-box'><div id='box'>
<div><a class='twitter-share-button' data-count='vertical' data-via='SEU NOME NO TWITTER' expr:data-text='data:post.url' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a></div>
<div><g:plusone expr:href='data:post.url' size='tall'/></div>
<div><fb:like expr:href='data:post.url' font='arial' layout='box_count' send='true' show_faces='false' width='54'/></div>
</div>
</div>
</b:if>


Clique em visualizar para ver se esta tudo ok e salve.
Não esqueça de alterar a parte do código em vermelhor pelo seu nome de usuário no twitter.

OBS: Lembrando que a barra só aparece dentro das postagens