ttnovo: Botões compartilhar personalizado

março 08, 2015 Por Géssica Marques 10 Comentários

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:

<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url' target='_blank'><img src='URL-DA-IMAGEM-DO-FACEBOOK' title='Facebook'/></a>
<a expr:href='"http://twitter.com/share?url=" + data:post.url' target='_blank'><img src='URL-DA-IMAGEM-DO-TWITTER' title='Twitter'/>
</a> <a expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank'><img src='URL-DA-IMAGEM-DO-GOOGLE' title='G+'/></a>

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!

Continue lendo