21 December, 2014

Como adicionar botões de redes sociais ao blog

by Ana Correia 21 comments
Hoje foi dia de descanso e aproveitei para me dedicar ao blog, resolvi mudar o cabeçalho, adicionar botões para as redes sociais e ainda criei uma conta no Bloglovin', nem dei pelo tempo passar :D
O dia de hoje deu-me uma ideia para este post, pois já a muito tempo que queria adicionar os botões das redes sociais, mas nunca tinha achado uma explicação clara e hoje lá achei uma em inglês que me ajudou imenso, resolvi partilhar convosco para que consigam também personalizar os vossos blogs.

1. Descarregar os botões
Encontrei um site que tinha os botões em várias cores e modelos (vejam no fim deste post onde podem fazer o download). Escolhi um modelo e fiz o download das imagens. Na pasta vinha várias redes sociais como o Flick, como não tenho uma conta lá, apaguei as imagens que não me interessavam, fiquei assim com estas:

2. Colocar os icones no Photobucket
Abra o Photobucket (é grátis e muito fácil de usar) registe-se no site, podem se registar através do vosso email, com as contas twitter ou facebook, depois cliquem em "upload" para por os ícones no Photobucket.

3. Abrir um documento no Word ou no Bloco de notas
Num documento escreve o seguinte código, uma vez para cada site que queiram linkar com os botões (1 código em cada linha, separados por parágrafos).

<a href="URL do Link" target="_blank"><img src="URL da imagem" /></a>

4. Completar o código
URL do Link: é o link que deseja ser visitado. Por exemplo, substitui o texto a rosa pelo teu endereço no facebook, deixe ficar as aspas.
URL da imagem: este é o URL da imagem do botão fornecido pelo site Photobucket.

No Photobucket, vai à Library, onde aparecem os ícones e passa com o rato por cima, clica agora na rodinha que aparece no canto direito da imagem. Vais ter então uma lista de opções. Clica na que diz Get Links e depois no Direct Link (o texto fica logo copiado).

Se quiseres os botões mais pequenos, acrescenta width="40px"> após "URL da imagem".
Ficas assim com uma lista de vários códigos, um para cada botão que queres adicionar. Agora elimina os parágrafos, para que os códigos fiquem seguidos. Por fim selecciona e copia todo o texto.
*Para o botão do email, é necessário colocar desta forma:
mailto:nome@sitio.com
Nos restantes é só mesmo o endereço, por exemplo:
http://www.pinterest.com/nomedapessoa

5. Adicionar os botões ao Blogger
Entra no Blogger - Esquema - Adicionar miniaplicação. Escolhe HTML/Javascrip e cola o código que copiaste do documento na janela, onde diz conteúdo. Grava e finalmente tens os teus botões no blog.
Confirma se os botões estão aceder ao link correcto :D

Links onde podes fazer download das imagens:

Se tiveres alguma dúvida, deixa um comentário que eu ajudo-te 
XOXO

21 comments:

  1. Adorei a dica, já andava a pensar fazer isto há algum tempo, mas ainda não me tinha dedicado à tarefa, hoje vai ser o dia! :D Obrigada.

    ReplyDelete
  2. Parece tão fácil, amanhã vou tratar disso ;)
    E segui o blog!
    xoxo

    ReplyDelete
  3. olá,
    Amei seu blog muito legal se puder retribuir segue o meu e curte minha página

    Blog : http://femmemakiup.blogspot.com.br/

    página: https://www.facebook.com/Luisamakiup?fref=ts

    ReplyDelete
  4. Muito legal, consegui por no meu... valeu!

    ReplyDelete
  5. te adicionei a minha lista de blog. quem quiser é só pedir :)

    ReplyDelete
  6. Muito obrigada, add no meu blog, graças a vc. Beijos.

    ReplyDelete
  7. Oi eu amei as dicas e me ajudou muito, porém sobre o botão do skype eu não consigo saber pelo o que exatamente eu tenho que substituir a parte do URL do link. Você poderia me ajudar por favor? Obrigada

    ReplyDelete
  8. NÃO CONSEGUI COLOCAR..
    SERÁ Q PODERIA ME AJUDAR?
    MEU E-MAIL É novabeneata@hotmail.com

    por favor...
    att Caroline

    ReplyDelete
  9. Excelente! Vou já experimentar!
    Eu segui, segues de volta? :3

    Obrigada, continua assim:)

    ReplyDelete
  10. Ola, gostei muito do seu post, me ajudou bastante! Tenho um blog também, se puder dê uma olhada http://ingressoparamoda.blogspot.com/ Obrigada!

    ReplyDelete
  11. Obrigada :) adorei o post, foi muito útil!

    http://perleflamant.blogspot.pt/

    ReplyDelete
  12. Eu adorei. Tô no começo de um blog e espero mt q dê certo, mas é especialmente voltado para meninas vaidosas com o cabelo. Comecei agora, tem mt coisa p fazer e ajeitar, mas aos pouquinhos vou conciliando com meus estudos. Se quiser ver =D http://fiosdeboneca.blogspot.com.br/

    ReplyDelete
  13. Estou personalizando meu blog ainda, vi suas dicas e fui tentar fazer, mas não consegui! :( Mas obrigada mesmo assim.

    ReplyDelete
    Replies
    1. Não conseguiu? se precisar de ajuda é só dizer :)

      Delete
  14. Muito útil! Deu tudo certinho! *-*
    Obrigada por disponibilizar :)

    http://patricinhadechuteira.blogspot.com.br/

    ReplyDelete
  15. Ajudas-te imenso minha querida! Muito obrigada! Vou agora seguir o teu blog e vou deixar o meu se tbm quiseres seguir! Beijinhos <3
    http://rebelsflowers.wordpress.com/

    ReplyDelete
  16. Gostei do post, muito útil ^-^ bjs

    uma-quase-perfeita.blogspot.com.br

    ReplyDelete
  17. Deu certo aqui no meu site, brigadão mesmo!

    Admin Top Ragnarok.

    ReplyDelete