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!