Botão compartilhamento abaixo postagem Blogger

- 15:04:00
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.

.


EmoticonEmoticon

 

Start typing and press Enter to search