Como colocar um link numa imagem ou num ícone para adicionar no blog?

Para chamar a atenção dos visitantes de um blog ou site, costuma-se usar algumas imagens (sem exageros); seja em anúncios, assinatura de feed ou até mesmo em botões de redes sociais etc. Creio que você já conheça este velho ditado "uma imagem vale mais do que mil palavras"; enfim, em certos casos é melhor você transmitir uma ideia utilizando uma imagem, do que encher uma página de "blás, blás, blás"! Dependendo da imagem, caso ela tenha a ver com o que você tem a dizer ou oferecer, as pessoas entenderão!


  Imagem: www.carbografite.com.br
Para adicionar um link numa imagem ou ícone, primeiro você deve hospedar a sua imagem em algum servidor de imagens. Caso você utilize um blog hospedado na plataforma Blogger, eu recomendo você a hospedar a sua imagem no próprio blog; assim, correrá menos risco de ficar com uma imagem com link quebrado. Digo isso, porque caso você hospede a sua imagem em algum servidor por aí, e, caso ele feche as portas o seu blog ficará desfigurado!

Depois de hospedar a sua imagem, simplesmente copie o link da imagem e adicione no local indicado no código baixo:

<div align="center">
<a href="COLOQUE O LINK DA PAGINA AQUI" target="_blank" title="TITULO DA IMAGEM AO PASSAR O MOUSE"><img src="COLOQUE O LINK DA IMAGEM AQUI" border="0" /></a>
</div>

Depois é só você colar este código num elemento de página do seu blog e salvar. Ou em qualquer outro lugar da página onde você deseje que a imagem apareça. Para adicionar num elemento de página de um blog hospedado no Blogger, acesse o painel de controle, Design, Adicionar um Gadget, HTML/JavaScript, cole o código dentro do gadget e salve-o.

Veja algumas alterações que podem ser feitas no código:

right = alinha a imagem à direita;
left = alinha a imagem à esquerda;
center = alinha a imagem no centro.

target="_blank" = faz o link da imagem abrir em uma nova janela. Caso você deseje que o link abra na mesma janela, retire isso do código acima!

Para adicionar mais de uma imagem, repita quantas vezes forem necessárias o código abaixo:

<a href="COLOQUE O LINK DA PAGINA AQUI" target="_blank" title="TITULO DA IMAGEM AO PASSAR O MOUSE"><img src="COLOQUE O LINK DA IMAGEM AQUI" border="0" /></a>

Veja um exemplo de código para 3 imagens:


<div align="center">
<a href="COLOQUE O LINK DA PAGINA AQUI" target="_blank" title="TITULO DA IMAGEM AO PASSAR O MOUSE"><img src="COLOQUE O LINK DA IMAGEM AQUI" border="0" /></a>

<a href="COLOQUE O LINK DA PAGINA AQUI" target="_blank" title="TITULO DA IMAGEM AO PASSAR O MOUSE"><img src="COLOQUE O LINK DA IMAGEM AQUI" border="0" /></a>

<a href="COLOQUE O LINK DA PAGINA AQUI" target="_blank" title="TITULO DA IMAGEM AO PASSAR O MOUSE"><img src="COLOQUE O LINK DA IMAGEM AQUI" border="0" /></a>
</div>