26 de abr. de 2013

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.

4 comentários :

  1. meu template ñ tem essa tag por favor me informa outra... obg

    ResponderExcluir
    Respostas
    1. Equipe Ùz Kchorrão Oficial, no seu html aperte as teclas
      ctrl f ao mesmo tempo e coloque o seguinte código:
      div class='post-footer-line post-footer-line-1'
      depois aperte a tecla enter que irá direcionar ao código,
      quando achar coloque acima deste o código da barrinha de compartilhamento.
      Espero ter ajudado.
      Qualquer dúvida pergunte.

      Excluir
  2. Olá Claudine,

    fico feliz que tenha gostado da barra de compartilhamento, seu artigo ficou bem legal, e obrigado pela citação.

    Abraço e sucesso!

    ResponderExcluir
    Respostas
    1. Obrigado Claudio,
      fico feliz que tenha gostado e obrigado por
      deixar compartilhar no meu blog seu tutorial.

      Excluir

Qualquer dúvida pergunte que
responderei com prazer.
Só peço que seu comentário
seja relacionado à postagem.

© Princess Tutoriais- Agradece sua visita
2014. Todos os direitos reservados
Pedidos? dúvidas? nos comentários ou na Ask.
imagem-logo