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.