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