Personalizar botões compartilhar + site para baixar ícones



Olá pessoal! Estou trazendo mais um tutorial para vocês! Sabe aqueles botões de compartilhar que ficam abaixo do post? Então, irei ensiná-los a personalizá-los! Lembrando que eu estou usando o modelo Viagem (Travel).

Este tutorial eu vi no Reino Kawaii e funcionou, tanto até que uso aqui no blog. É este aqui:

São os botões de Facebook, Twitter, e Google+
Clique em Leia mais para ver o tutorial ~>




Primeiramente, salve um backup do seu template, depois você já deverá ter escolhido os ícones para colocar, não é mesmo? Mas onde você poderá encontrar este ícones. Você poderá baixar alguns ícones que eu coloquei NESTA postagem, ou acessar o site SoftIcons que só tem ícones. Na barra de pesquisa você colocar o nome da Rede social, por exemplo, que você quer procurar. Você digita "Facebook" e irá aparecer um monte de ícones do facebook e você irá escolher o de sua preferência.

Eu sugiro que baixe o tamanho 32x32px, os outros tamanhos são muito grandes.

Agora que você tem o ícone, o que resta é implementá-lo no seu blog, não é mesmo?

Vá em Modelo>Editar HTML. Clique dentro do quadro do HTML e  aperte Ctrl+F. Na caixinha de busca que aparecer, você irá procurar o seguinte código:

 <div class='post-footer-line post-footer-line-3'/>

Se você não conseguir encontrar este código acima, procure assim:
post-footer-line-3
O meu por algum motivo, eu só acho se eu digitar o código acima. Bom, depois de ter achado o código, você irá colar abaixo dele, o seguinte código:

<!-- share buttons -->
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' target='_blank'><img src='URL-DA-IMAGEM-DO-FACEBOOK' title='Facebook'/></a>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><img src='URL-DA-IMAGEM-DO-TWITTER' title='Twitter'/>
</a> <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><img src='URL-DA-IMAGEM-DO-GOOGLE' title='G+'/></a>
<!-- share buttons -->
No site que passei para vocês, ele dará a opção de baixar o ícone, então hospede-o em algum site. Pode até hospedar em um blog de testes mesmo.

Com o código acima, os botão irão ficar do lado direito, assim:


Mas se você quiser que os botões fique centralizado, então coloque o seguinte código:

 <center> /****depois de share buttons no início***/
</center> /****antes de share buttons no final***/

Salve e visualize se está tudo correto. E pronto! Seu botão compartilhar está personalizado. Ah, eu não sei os links das outras redes sociais, então se alguém souber e quiser me passar eu agradeço.

Não esqueçam de comentar!

Compartilhe este post:

Comentários
10 Comentários

10 comentários :

  1. Não estou conseguindo instalar, os ícones aparecem gigantes, e estão em 25x25

    ResponderExcluir
    Respostas
    1. Sério? Que estranho...
      tenta um tamanho menor então. Talvez 18x18

      Excluir
  2. esse que estar no seu post eu queria... esse que vc usa

    ResponderExcluir
  3. http://tudoemtonspasteis.blogspot.com.br/

    preciso de uma ajudinha! pode colaborar deixando algum comentário ou sujestão?
    obrigada! <3

    ResponderExcluir
    Respostas
    1. Acho que onde você colocou o fundo roxo, ficaria melhor se fosse branco. Assim não atrapalha a leitura. ;D

      Excluir
  4. Oi Géssica,

    Deu certo no meu site, mas você sabe como colocar a palavra "compartilhe" ao lado dos botões?

    Bjs, @dnisin
    www.sejacult.com.br

    ResponderExcluir
    Respostas
    1. Este comentário foi removido pelo autor.

      Excluir
    2. Basta você inserir o código usado para inserir imagens em html , com uma imagem personalizada com a palavra Compartilhar ou outra que você desejar ...

      ele deve ser inserido na segunda linha do código .

      é possível adicionar texto usando a tag P , no entanto eu não sei como adicionar ao lado das imagens , se você quiser adicionar em cima das imagens , é só colocar o código , na segunda linha ( igual no exemplo da imagem )

      Como o código não aparece nos comentários , eu coloquei eles em uma imagem :

      http://i.imgur.com/b5gT0lP.png

      Excluir

Não esqueça de deixar o seu comentário! Pode não parecer, mas um blogueiro vive de comentários e sugestões, faça a sua parte e deixe esta blogueira feliz!

Dicas:
- Deixe o link do seu blog/site, eu sempre dou uma olhada!

Regrinhas básicas:
- Por favor não usem palavras de baixo calão.
- Comentários desrespeitosos serão excluídos.

 
Copyright © Cantinho Geek. Designed by OddThemes