quinta-feira, 10 de novembro de 2016

Botão compartilhamento abaixo postagem Blogger

botao compartilhamento abaixo postagem blogger

Hoje vamos mostrar como adicionar botões de compartilhamento abaixo do post como mostrado na figura acima isso serve para impulsionar suas postagens para o próximo nivel deixando os botões a uma chamada de ação para que os visitantes possam compartilhar para adicionar o widget acima siga os passos abaixo:


Adicionando botões de compartilhamento abaixo postagem blogger

Faça login no Blogger então acesse o menu modelo editar HTML/JavaScript 
com as teclas combinadas CTRL+F busque por: <data:post.body/> vai encontrar varios isso vai depender do modelo do template então introduza o botão abaixo da direita sob esse código:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Tombol share media sosial -->
<div class='share-buttons-box'>
  <div class='share-buttons'>
    <div class='share gplus'>
      <div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
    <div class='share like'>
      <div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>
    <div class='share fbshare'>
      <div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/></div>
    <div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
    <div class='share linkedin'>
      <script src='//platform.linkedin.com/in.js' type='text/javascript'>
        lang: en_US
      </script>
      <script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/>
    </div>
  </div>
</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<div style='clear: both;'/>
</b:if>

Codigo CSS deve ser colocado acima de ]]></b:skin> ou </style>


<style type='text/css'>
/* share buttons */
.share-buttons-box{height:67px;background:url(https://3.bp.blogspot.com/-moj4-jk-UB0/U1qCkCPaGQI/AAAAAAAADTY/tixmak8NHV8/s1600/share.png) no-repeat 330px 10px;margin:20px 0 15px;overflow:hidden;position:relative}
.share-buttons{margin:0 0;height:67px;float:left}
.share-buttons .share{float:left;margin-right:10px;display:inline-block}
</style>

Salve o modelo e pronto.

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner