Como adicionar botões de redes sociais ao blog

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