03/04/2013

Como adicionar botões para redes sociais ao blog

(tipo aqueles que estão ali de lado)

Há imenso tempo que queria pôr uns botões para as várias redes sociais onde me podem encontrar e para o email. Finalmente descobri como fazê-lo e, a pedido de algumas leitoras, aqui fica um pequeno tutorial...

1. Fazer/descarregar os botões
Os botões podem ser feitos por quem tiver jeito para isso. Como eu não tenho jeito nenhum, encontrei este site que tem os botões em várias cores. Escolhi uma das cores e foi só fazer o download das imagens para o computador. Depois apaguei os que não me interessavam e fiquei com estes:



2. Colocar os icons no Photobucket
Abre o Photobucket (é grátis e para entrar pode ser através do facebook ou Twitter) e clica "upload" para pôr os icons no Photobucket.

3. Abrir um documento no Word 
Num documento do Word escreve o seguinte código, uma vez para cada site que queres linkar com os botões (no meu caso, foram 6 vezes, 1 em cada linha):


4. Completar o código
Substitui EndereçoDoSite pelo endereço do site a que queres ligar cada botão (as aspas são para ficar!).

No Photobucket, vai à Library, onde aparecem os icons, e passa o rato por cima da roda dentada em cada icon. Aparece uma lista de opções. Clica em Get Links e depois no Direct link (fica logo copiado).



No Word, selecciona o texto a amarelo ImageDirectLink e cola o direct link. Repete para cada icon.

Se quiseres os botões mais pequenos, acrescenta width="40px"> após "ImageDirectLink".

Ficas assim com uma lista de vários códigos, um para cada botão que escolheste. Como puseste cada código numa linha, eles estão separados por parágrafos. Elimina os parágrafos para que os vários códigos fiquem seguidos. Por fim, selecciona e copia todo o texto.

Para o botão do email, não basta pôr o endereço de email. Tem que ser da seguinte forma:
mailto:nome@sitio.com
Nos restantes sítios, é só mesmo o endereço, por exemplo: http://www.pinterest.com/nomedapessoa


5. Adicionar os botões ao Blogger
Entra no Blogger - Esquema - Adicionar uma miniaplicação. Escolhe HTML/Javascript e cola o código que copiaste do Word para a janela, onde diz Conteúdo.



Grava e lá estão no blog os botõezinhos a linkar para as redes sociais!

PS - Estas instruções são baseadas neste post.

6 comentários:

  1. muito util, especialmente pq acho q vou remodelar o blog :D

    ResponderEliminar
  2. tenho de me dedicar! realmente já me tinha perguntado como é que se fazia.. obrigada

    ResponderEliminar
  3. Olá Rita, bom dia.
    Andava há não sei quanto tempo a tentar colocar estes botões e por esta ou aquela razão não estava conseguir. Depois de seguir estes passos, finalmente consegui. Obrigada pela partilha!
    Boa semana.

    ResponderEliminar
  4. n deu certo, quando clico no botao pra ir pra rede social aparece www.nomedomeusite.blogspot.com/linkdaondedeveriair

    ResponderEliminar
  5. Olá,
    Amei seu blog ele é muio fofo se puder retribuir a visita segue meu blog e curte minha página.

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

    Página:
    https://www.facebook.com/Luisamakiup

    Obrigada!

    ResponderEliminar

Obrigada pelo comentário!

Related Posts Plugin for WordPress, Blogger...