como adicionar botões de redes sociais personalizados no blog

A primeira pergunta que me fizeram sobre meu blog foi como eu adicionei esses botões customizados de redes sociais ali na barra lateral esquerda. Eles são legais porque tiram o colorido dos botões oferecidos pelas redes sociais, cujos tamanhos e cores nunca estão de acordo. E com eles, você deixa seu blog com a sua cara.

Eu descobri como adicioná-los graças ao tutorial original do blog Her New Leaf, que embora seja um blog da Wordpress, divide tutoriais interessantes e também úteis para Blogger.

Abaixo estão algumas sugestões de botões personalizados oferecidos por blogueiros para download gratuito para você escolher  e o PAP para adicioná-los ao blog.

 

via Carrie loves

via Shrimp Salad Circus

via Pink Moustache

via Noisette Academy

via Creative Repository

Depois de baixar os botões personalizados desejados no seu computador, carregue-os num site de hospedagem grátis de imagens. Pode ser o Photobucket, Tinypic ou algum outro da sua preferência. Eu uso o Photobucket e vou usar o exemplo a partir dele. Faça uma conta lá e carregue os botões personalizados na sua galeria deste site de hospedagem de imagens.

Assim que carregados, o site fornece o URL da imagem que vai ser usado para compormos o código html do gadget dos botões personalizados, como na imagem abaixo:

Os botões são adicionados por meio de um código html em um gadget do layout do seu Blogger. Portanto, faça este caminho:

Do Painel do Blogger > Layout > clique em Adicione um Gadget > selecione HTML/Javascript  e cole o seguinte código abaixo:

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

URL do Link: é o link que deseja que seja visitado. Por exemplo, se quiser adicionar aqui a sua fan page do Facebook, substitua o texto em laranja pelo endereço da sua fan page no Facebook.

URL da imagem: este é o URL da sua imagem fornecido pelo site de hospedagem de imagens. Substitua pelo código que foi copiado como no exemplo da imagem acima. Se for por exemplo, para o Facebook, copie e cole aqui a imagem do botão do Facebook.


Faça o mesmo processo para cada botão que quiser acrescentar e eles aparecerão automaticamente, um do lado do outro no blog:

Dicas:

- Visualize e teste clicando nos botões para testar se os botões estão direcionando seus leitores para o link correto.

- Este código html já é composto de uma forma que o leitor do seu blog, ao clicar nele, seja direcionado para outra página. Não abandonando, assim, a página do seu, até porque isso é, para nós, muito interessante.

- Caso o tamanho deles não agradem no seu blog. Tente redimensionar o tamanho dos botões quando carregar no site de hospedagem de imagens e a partir do código com as imagens alteradas, adicionar no código html.

Dúvidas? Deixe seu comentário abaixo e eu te ajudo.