Como Colocar Redes Sociais Abaixo do Título dos Posts

Coloque em seu blog redes sociais para compartilhamento abaixo do título das postagens.

Para atingir bons resultados com suas postagens é necessário "expandi-las a outros horizontes" e nada melhor do que compartilhá-las nas redes sociais que tem um imenso alcance. Também, devemos facilitar aos visitantes de nossos blogs essa opção de compartilhamento, não esperando que os mesmos copiem os links e colem em seus perfis.

Para isso, precisamos de botões de compartilhamento para as redes sociais, e,  uma das opções mais usadas pelos blogueiros apresentamos para você agora. Colocaremos as principais redes sociais abaixo do títulos das postagens, tornando-se assim mais fácil a divulgação de seus melhores trabalhos.

O código ao qual disponibilizamos gera uma pequena box com os botões do Facebook, Google+, Twitter e Pinterest. Além disso, os botões são envolvidos por backgrounds nas cores predominantes de cada rede e, até, possibilitando a mudança da cor caso você desejar. 

Seguindo os passos corretamente, ficará abaixo dos títulos das postagens como na imagem a seguir:


 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.


Tutorial

>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

>> Clique no código do template, pressione "CTRL+F" e pesquise por 
<div class='post-header'>

* Você poderá encontrar 2 trechos de código iguais, caso encontre opte pelo segundo.
* Templates personalizados podem não conter esse código. Se for seu caso, você terá que encontrar o código referente ao título das postagens.

>> Logo ABAIXO do trecho encontrado cole o seguinte código:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='addthis_toolbox'>

  <div class='fbshrbtn'>  <a class='addthis_button_facebook_like' fb:like:layout='button_count'/></div>

      <div class='oneshrbtn'>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
</div>
  <div class='twtshrbtn'>
    <a class='addthis_button_tweet'/></div>

  <div class='pinshrbtn'>
    <a class='addthis_button_pinterest_pinit'/></div>
  </div>
  <script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-522b494e1d602dcd' type='text/javascript'/><br/>
</b:if>
OBSERVAÇÃO: Com esse código, as redes sociais aparecerão apenas nas páginas das postagens.

>> Pesquise agora por ]]></b:skin>

>> Logo ACIMA da tag encontrada cole o seguinte código:
/* ----- CSS ADDTHIS_TOOLBOX ----- */
.addthis_toolbox {margin-top:10px;}
.fbshrbtn, .twtshrbtn{
  padding:10px;
  width:80px;
  height:18px;
  float:left;
}
.fbshrbtn{
    background:#4861A3;
}
.twtshrbtn{
    background:#3BAAE1;
}
.pinshrbtn{
background:#cb2027;
  padding:10px;
  width:45px;
  height:18px;
  float:left;
}
.oneshrbtn{
   padding:10px;
  width:62px;
  height:18px;
  float:left;
  background:#d71d1e;
}
.printbtn a{
    float:left;
  width:80px;
    background:#02a319;
  color:white;
  text-decoration:none;
  text-align:center;
  padding:10px;
    height:18px;
font-size:16px;
font-family: 'Oswald', sans-serif;
}
* Caso desejar substituir as cores de fundo de cada opção, altere o código da cores dos backgrounds destacados em VERMELHO.

>> Clique em "Salvar Modelo".

>> Vá em seu blog e veja como ficou.

Deixe seu comentário, ele é a motivação para nosso trabalho.

1 comentário

Henrique Araújo em 11 de janeiro de 2019 às 10:02

Atualização: o tutorial não funciona mais.

 
Copyright ©2015 Canal Do MatheusBR Todos os Direitos reservados | Designed by Sinistro de BTN