Fazer Banners para Redes Sociais, Parcerias e Outros

Existem muitos programas para editar e criar imagens grátis na internet e também muitos sites que fazem esse tipo de serviço online, nós mesmos já fizemos diversas publicações sobre programas e sites grátis para edição de imagens:

Editor de Imagens, Fotos e Banners Online
Download de Icones para Redes Sociais (Twitter, Facebook, Orkut)

Mas muitas pessoas ainda têm duvidas como fazer imagens com links para colocar no blog, isto pode servir tanto para banner de redes sociais (twitter, orkut, facebook, dihitt e outras) ou qualquer outro site que deseje linkar no seu blog. Então vamos às etapas para criar um banner.

Encontrar imagens para fazer um banner
A busca Google de imagens é um ótimo lugar para encontrar fotos e imagens, mas claro que existem outros mecanismos de busca e compartilhamento de imagens, portanto use aquele que gostar mais e souber melhor utilizar. Apenas sugerimos que se souber use as palavras em inglês, assim terá muito mais resultados nas suas buscas de imagens, por exemplo, nas imagens do Google fiz um teste e achei 1.370.000 de resultados para a palavra cachorro e 221.000.000 pesquisando a palavra dog.

Ajustando o tamanho da imagem para o banner
Provavelmente a imagem que encontrar na internet não estará no tamanho que você deseja utilizar, então você pode usar um Programa Grátis para Edição de Imagens ou um site de edição de imagens para modificá-la, veja como e onde editar fotos online

Então use o programa ou site que conhecer melhor uma coisa que li já faz bastante tempo num debate sobre qual o melhor programa para editar imagens e qual a melhor versão deles é que o melhor é aquele que você conhece e sabe usar, pois não adianta ter a versão mais recente do mais completo programa de edição de imagens se você não souber utilizar o programa.

Também é possível ajustar essa imagem pelo código HTML deste jeito alterando os valores 120(largura) e 60(altura):
<a href='http://www.dicasparablogs.com.br/p/lista-de-tutoriais.html'target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNPMkMHbqoSjs-gFVQaFbwkjfMB1xraHZG2hYPARnCK2Fop5PcbM3atI_u7N7JYOPxUGPAVkO7N_2kf1Zhh4o18i8IWhWiCbZzPETz9alN6cyD8yofe9hVIJU-SD1-PhrDNaIOt13r5XA/s400/dicas2.jpg" width="120" height="60" /></a>

Mas isso não é recomendável por dois motivos: pode distorcer a imagem e perder a http://www.blogger.com/img/blank.gifqualidade da imagem, o segundo motivo é a demora para carregar a foto essa alteração no código só muda a visualização da imagem, mas o peso dela é o mesmo, ou seja, seu banner tamanho pequeno vai demorar o mesmo tempo que a imagem grande para aparecer na tela. Veja sobre Fazer um Blog mais Rápido.

Na hora de colocar o banner o primeiro passo é saber qual link vamos usar nele, ou seja, quando além clicar no banner para qual pagina da internet ele vai. Como falamos no começo você pode usar para qualquer rede social que tenha perfil só precisa copiar o endereço da sua pagina, veja alguns exemplos de endereços de nossas paginas assim você poderá ir até essas redes e pegar seu link:

Twitter: http://twitter.comhttp://www.blogger.com/img/blank.gif/fabianoroberto
Comunidade no Orkut: http://www.orkut.com.br/Main#Community?cmm=46751209
diHITT: http://www.dihitt.com.br/usuario/fabianoroberto

Fazer o código do banner ou enviar a imagem para o blogger
Agora que já temos a imagem e o endereço da pagina só falta postar isso no blog, temos duas opções ou você entra na pagina design, clica para adicionar um gadget e escolhe a opção imagem

banners e imagens no blogger
Então envia a imagem para o blog e coloca o endereço das redes social que desejar no campo link e pronto, agora é só salvar e posicionar o gadget onde quiser, mas no caso de varias redes deverá repetir o processo enviando uma imagem por vez.

Outra opção é criar o código HTML dos banners e depois de pronto adicionar como um gadget de html/javascript, veja o exemplo do código aqui:

<center>
<div style="float:left; width:33%"><a href='endereço do site'target='_blank'><img src="endereço da imagem" /></a></div>
<div style="float:left; width:33%"><a href='endereço do site'target='_blank'><img src="endereço da imagem" /></a></div>
<div style="float:left; width:33%"><a href='endereço do site'target='_blank'><img src="endereço da imagem" /></a></div>
<center>

Assim poderá colocar as imagens lado a lado como fazemos em nosso site (veja o tutorial aqui:Imagens Lado a Lado, Fazer Colunas nos Gadgets), existe varias maneiras de fazer isso uma delas você pode ver aqui: mas para isso será necessário hospedar as imagens antes achamos que as melhores opções podem ser hospedar as imagens diretamente no blogger ou usar o Google sites.

Lembre-se que maior parte dos erros com imagens que não aparecem ou link que não funcionam são erros na hora de copiar e colar os endereços das paginas então cuidado se faltar qualquer letra os códigos dos banners não funcionam.

Marcadores: , ,