Como colocar ícones no Blogger + Ícones Pantone 2014

Demorei um bom tempo procurando ícones que combinassem com meu blog, até que tive a brilhante idéia de fazer meus próprios ícones. Sério, não sei como não pensei nisso antes!

Eu fiz meus ícones, e adorei! Achei tão legal que resolvi fazer outros e disponibilizá-los para você fazer o download. Aproveitei e deixei com as cores da PANTONE 2014 - primavera. Dessa forma você já fica familiarizado com as cores da moda que estão vindo aí e de quebra dá um Up no seu Blog!

Os ícones que fiz são de 72px e no formato png. Se você não sabe como inseri-los, no final do post coloquei um pequeno tutorial. E se você quiser redimensionar os ícones para colocá-los no seu blog, lá também explica como.

Gostou dos ícones?! Se quiser tem mais essas 4 cores aí embaixo, que você pode pegar na nossa página do facebook. Clicando neles, você será redirecionados para a página de download.

Mini Tutorial: Como inserir ícones no seu blog

1. Faça o Download dos ícones

2. Hospede sua imagem. 

Você precisa enviar sua imagem para algum serviço de hospedagem de imagem.
Você pode usar o Photobucket, Picasa, flickr, ou outro qualquer de sua preferência. Mas o que eu geralmente faço é ir no meu blog, criar uma nova postagem e enviar para o post as fotos que quero usar. Dessa maneira o blogger salva automaticamente suas fotos em uma pasta no Picasa (mesmo que você nunca tenha mexido no picasa, fique sabendo que é pra lá que suas fotos vão quando você insere uma imagem no blogger; por isso, nunca apague suas imagens do picasa, pois você irá apagar as imagens do seu blog).
Uma vez que você adicionou as imagens no post, clique na opção HTML, como mostra a imagem abaixo, e copie o URL da sua imagem, que é algo do tipo <img src="http://minhaimagem.jpg">

Uma coisa muito importante é o tamanho da imagem. Se sua imagem já esta do tamanho que você quer usar, antes de copiar a URL da imagem, tenha certeza de que você selecionou a opção "Tamanho Original" (como mostrado logo abaixo), pois dessa forma você vai manter o tamanho da imagem.

Mas caso queira mudar o tamanho da imagem, escolha qualquer uma das outras opções de tamanho (pequeno, médio, grande ou muito grande), e na URL da imagem coloque o tamanho que você quer. Como exemplo, tem a URL de uma imagem do blog:

<img border="0" height="206" src="http://2.bp.blogspot.com/-yhH_nsy_ANA/UlCLJvPrzcI/AAAAAAAAGUM/stwTuR47avU/s640/como-colocar-icone-no-blogger.png" width="640" />

Em heigh="..." coloque a medida da altura em px
Em width="..." coloque a medida da largura em px
Enfim, depois que consigo a URL da imagem que preciso, eu copio ela para poder usar e descarto o post que criei.

3. Colocando os ícones no seu blog

Após copiar as URLs dos ícones, vá para sua conta do blogger, e em Layout, adicione um Gadget. Escolha a opção HTML/JavaScript.

Agora tudo o que você precisa fazer é colar todas as URLs dos ícones lado a lado assim:
<img src="http://facebook.png"> <img src="twitter.png"> .... etc
Claro que usando o seu próprio URLs em vez do meu exemplo.
Para adicionar links aos ícones de redes sociais, você só precisa adicionar o seguinte código: <a href="..."> e </a>. Esse código indica que ao clicar na imagem, você vai ser redirecionada para o endereço colocado em <a href="..."> veja o exemplo abaixo:
<a href="http://www.facebook.com/seuendereçoaqui"> <img src="http://imagemdo íconefacebook.png"> </ a > <a href = "http://www .twitter.com / seuendereçoaqui " > <img src="http://imagemdoíconetwitter.png"> </ a> ... e assim por diante .

Salve o seu widget e posicione corretamente na sua barra lateral. Clique em Salvar Organização, e Pronto! Agora que você já sabe como colocar um ícone e pode testar seu conhecimento com esses ícones que fiz para você!