É isso ai pessoal hoje vou mostrar como você pode fazer uma imagem virar um link, ou seja, quando alguém clicar nessa imagem ela será levada para um link.

Essas dicas são muito simples porém muita gente ainda não sabe e como esse blog foi feito para ajudar os iniciantes vale a pena mostrar.

Vou mostrar como fazer isso principalmente para o blogger já que iremos hospedar nossa imagem no blogger.

Colocando link em imagem no Blogger

1º Passo: Temos que hospedar nossa imagem,  para isso entre no seu blogger e crie uma postagem (rascunho) e nessa postagem clique no ícone como mostra a imagem abaixo:

2º Passo: Agora clique em “Escolher arquivo” e selecione uma imagem, depois deixe essa imagem selecionada e clique em “Adicionar selecionadas“:

Fazendo isso iremos adicionar a imagem em nossa postagem (rascunho).

3º Passo: Clique em “Escrever” depois clique sobre a sua imagem somente para selecionar e depois clique na opção “Link“:

Na janela que se abrir em “Endereço da web” coloque para qual site a pessoa será levada ao clicar na imagem.

E marque a opção: “Abrir este link em uma nova janela” isso faz com que a pessoa vá para outra página e não saia do seu site.

Pronto! Veja o nosso exemplo abaixo:

 

 

Caso queira pegar o código da sua imagem com o link para colocar em outro lugar basta clicar em “HTML” e copiar todo o código:

Personalizando

Pensa que acabo? Não não, esse é o código simples, agora vou mostrar como fazer aparecer um texto assim que a pessoa passar o ponteiro do mouse sobre a imagem.

Clique em “Escrever” depois clique na imagem só para selecionar e clique em “Propriedades“:

Agora em “Texto do título” coloque o texto que quiser e clique em “OK“:

Imagens lado a lado

Quer colocar algumas imagens lado a lado? É simples! Basta copiar o código abaixo:

<center>
<div style="float:left; width:33%"><img border="0" src="URL 1 IMAGEM" /></div>
<div style="float:left; width:33%"><img border="0" src="URL 2 IMAGEM" /></div>
<div style="float:left; width:33%"><img border="0" src="URL 3 IMAGEM" /></div>
</center>

Agora clique em “HTML” na sua postagem e cole o código copiado logo acima. Feito isso troque os itens:

URL 1 IMAGEM: Pelo link da primeira imagem

URL 2 IMAGEM: Pelo link da segunda imagem

URL 3 IMAGEM: Pelo link da terceira imagem

Feito isso volte no 3º passo onde você deve clicar em “Escrever” e clicar sobre a imagem para dar o link que terá!

Pronto! Agora passe o ponteiro do mouse sobre a imagem abaixo e veja aparecer um texto: