11 dezembro 2016

Botão de compartilhamento do post no blogger - Como colocar?

compartilhar post do blog

Colocar um botão de compartilhamento nas redes sociais no post é extremamente útil para a divulgação do seu blog, e é isso que vou ensinar neste tutorial!
Com esse simples tutorial você pode ganhar mais visualizações e isso é uma das coisas que nós mais queremos, não é mesmo?

Antes de fazer os passos desse tutorial eu recomendo que você faça um backup do seu modelo, para prevenir caso algo dê errado.


Como colocar um botão de compartilhamento:

1º- Primeiramente você tem que ir em "Modelo" e logo em seguida em "Editar HTML"
2º- Feito isso você vai clicar dentro do código, assim que clicar, aperte as teclas Ctrl + F e aparecerá uma caixa de pesquisa no canto superior direito do código.
3º- Copie isto <div class='post-footer-line post-footer-line-2'> e cole na caixa. Clique em enter. *Provavelmente você encontrará dois códigos iguais, mas neste caso vamos precisar apenas do segundo.
Abaixo deste código que você pesquisou você precisará colar o seguinte código:

<div class='share'>
  <p>Compartilhe o post:  </p>

<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><i class='fa fa-twitter'/></a>

<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' target='_blank'><i class='fa fa-facebook'/></a>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><i class='fa fa-google-plus'/></a>


 <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url' target='_blank'><i class='fa fa-linkedin'/></a>
<a expr:href='&quot;http://www.tumblr.com/share/link?url=&quot;+ data:post.url' target='_blank'><i class='fa fa-tumblr'/></a>


<a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/></a>

 <a href='mailto:?'><i class='fa fa-envelope-o'/></a>


 </div>

4º- Procure por <head> e adicione o seguinte código ABAIXO dele:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Agora é hora de personalizar o seu botão de compartilhamento! 😍


Abra a caixa de pesquisa do mesmo modo que você fez no segundo passo, mas dessa vez você irá pesquisar por:  ]]></b:skin>
Escolha o modelo que mais combina com o seu blog e cole ACIMA de   ]]></b:skin>

* O penúltimo botão (pinterest) sempre vai está diferente para mostrar como é a hover do botão de compartilhamento, ou seja, como o botão fica quando passa o mouse em cima dele.

MODELO 1:
botão de compartilhamento
/* BOTÕES DE COMPARTILHAMENTO - FEITOS POR: ALEXIA EVELLYN | BLOG: https://pronto-postei.blogspot.com */
.share {
margin-top: -5em;
display: table;
float: left;
margin-left: 10em;
}
.share p {
margin:0px 95px 10px;
font: italic 11px Lato;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
.share > a {margin: 0 5px; display: inline-block; vertical-align: top;}
.share a {
text-align: center;
font-size: 13px;
font-weight: 400;
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
background: #000;
color: #fff;
transition: 0.5s;
margin: 3px -42px -2px 44px;
}
.share a:hover {
background: #ff1492;
color: #fff;
}


MODELO 2:
compartilhamento do post do blog
/* BOTÕES DE COMPARTILHAMENTO - FEITOS POR: ALEXIA EVELLYN | BLOG: https://pronto-postei.blogspot.com */
.share {
margin-top: -5em;
display: table;
float: left;
margin-left: 10em;
}
.share p {
margin:0px 95px 10px;
font: italic 11px Lato;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
.share > a {margin: 0 5px; display: inline-block; vertical-align: top;}
.share a {
text-align: center;
font-size: 13px;
font-weight: 400;
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
background: #000;
color: #fff;
transition: 0.5s;
margin: 3px -42px -2px 44px;
}
.share a:hover {
background: #ff1492;
color: #fff;
}


MODELO 3:
compartilhar post do blog
/* BOTÕES DE COMPARTILHAMENTO - FEITOS POR: ALEXIA EVELLYN | BLOG: https://pronto-postei.blogspot.com */
.share {
margin-top: -5em;
display: table;
float: left;
margin-left: 10em;
}
.share p {
margin:0px 95px 10px;
font: italic 11px Lato;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
.share > a {margin: 0 5px; display: inline-block; vertical-align: top;}
.share a {
text-align: center;
font-size: 13px;
font-weight: 400;
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
background: #000;
color: #fff;
transition: 0.5s;
margin: 3px -42px -2px 44px;
}
.share a:hover {
background: #ff1492;
color: #fff;
}


Existem mil e uma maneira de personalizar esses botões de compartilhamento, trouxe três botões básicos, mas se vocês quiserem mais opções é só pedir! 😉
Espero que vocês tenham gostado deste post! Comentem abaixo o que acharam e deem sugestões de para os próximos tutoriais 😊

15 comentários:

  1. Amei o poste, obrigada por fazer <3 só que eu não conseguir colocar no meu blog ficam só bolinhas pretas, como eu ainda não tenho fiz neste de teste e em outro, testegaleri.blogspot.com.br

    ResponderExcluir
    Respostas
    1. De nada linda, quando tiver mais sugestões é só pedir :)
      Você provavelmente não tem a font awesome no blog, vou editar o post para que não tenha erro. bjs

      Excluir
  2. Oiii Que blog lindo!!

    Amei :)

    Mil beijos!
    alecsandratamila.blogspot.com

    ResponderExcluir
    Respostas
    1. Muito obrigada! Obrigada também pela sua visita, volte mais vezes :)

      Beijos

      Excluir
  3. Oiii Aleh! Faz um tuto mostrando como personalizar botão de compartilhar igual ao seu!!! Muita gente vai amar <3 inclusive eu! :* bjos amei seu blog!! Sucesso!

    ResponderExcluir
    Respostas
    1. Na linha que tá escrito ".share a " você tira a cor do background e em "color" você coloca a cor que quiser nos icones ai vai ficar igual o meu, não tem segredo! Se você quiser que fique exatamente igual ao meu (com esse efeito hover) ai eu posso fazer um tutorial :) Muito obrigada pelo seu comentário <3

      Excluir
  4. Respostas
    1. Fico feliz! Obrigada pelo comentário e pela visita <3

      Excluir
  5. Muito obrigada!!!! Procurei em tudo quanto era lugar rsrs. Aqui foi simples as instuçoes e ficou lindo!!! Há tempos estava procurando esses botões que fazem falta demais no blog!

    MUITO OBRIGADA!!!!

    www.ingrid-flor.blospot.com

    ResponderExcluir
  6. Olá! Coloquei tudo no blog, mas não teve nenhuma diferença. Não mudou nada, não funcionou.

    ResponderExcluir
  7. so faltou a opcao de whatsapp ne... atualize por favor.

    ResponderExcluir
  8. Como posso colocar a opção de Linkedin?

    ResponderExcluir
  9. Respostas
    1. O que aconteceu? Se quiser, me envia um e-mail para que eu possa te ajudar!

      Excluir