Personalizar botões compartilhar + site para baixar ícones

domingo, março 08, 2015 10 Comentários A+ a-



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!

Tenho 21 anos, sagitariana e apaixonada por livros. Atualmente estou cursando Design Gráfico na UFG. Meus Hobbies são escrever, ler, ver Doramas, animes, filmes e séries. Gosto muito de filmes e séries de terror, mas em questão de livros e mangás eu prefiro os de romances. Em 2016 publiquei meu conto "Lilith - A Princesa das Trevas" na antologia Demontale e fechei contrato com a Young Editorial para publicar o meu livro "Porcelana: Rubrum Luna"

O animal que me representa é o lobo.




10 comentários

Escreva um comentários
Diely Espíndola
EQUIPE GEEK
19 junho, 2016 Deletar

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

Responder
avatar
Géssica Marques
EQUIPE GEEK
19 junho, 2016 Deletar

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

Responder
avatar
TA na MÍDIA
EQUIPE GEEK
12 novembro, 2016 Deletar

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

Responder
avatar
Géssica Marques
EQUIPE GEEK
12 novembro, 2016 Deletar

Esse veio em um layout pronto.

Responder
avatar
poeta cor-de-rosa
EQUIPE GEEK
13 dezembro, 2016 Deletar

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

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

Responder
avatar
Géssica Marques
EQUIPE GEEK
13 dezembro, 2016 Deletar

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

Responder
avatar
Denise (@dnisin)
EQUIPE GEEK
01 fevereiro, 2017 Deletar

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

Responder
avatar
Géssica Marques
EQUIPE GEEK
02 fevereiro, 2017 Deletar

Desculpe, mas não sei =/

Responder
avatar
mister
EQUIPE GEEK
24 maio, 2017 Deletar Este comentário foi removido pelo autor.
avatar
mister
EQUIPE GEEK
24 maio, 2017 Deletar

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

Responder
avatar

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.