Como inserir fotos e imagens com links externos no blog

Imagens com links externos.

Conforme solicitado por nossa leitora, vamos apresentar neste artigo um tutorial de como inserir imagens no blog com links de redirecionamento externo, usando código HTML. Assim, quando o seu leitor clicar em uma imagem ou foto que possui  um link de redirecionamento, automaticamente ele será conduzido para a nova página que foi previamente endereçada. Para testar, clique na imagem abaixo:

Inserindo imagens no blog

Antes de inserir uma imagem no seu blog, você precisará primeiro armazenar o arquivo em um servidor de internet ou em um serviço de hospedagem específico.

Se você não possui um plano de hospedagem do seu blog ou site, poderá utilizar serviços disponíveis para hospedar arquivos online. Veja a seguir dois artigos que sugerem serviços gratuitos de hospedagem de arquivos de imagens.

Como hospedar imagens e gif animados gratuitamente

Usando o Google Sites como servidor de arquivos para blogs e sites

Código HTML para inserir imagem

Depois de hospedar suas imagens na internet, poderá utilizar o código HTML padrão para inserir uma imagem em qualquer página da web, sendo:

<img src=”endereço da imagem hospedada” style=”width:00px; height:00px;”>

onde: width = largura da imagem em pixel  | height = altura da imagem em pixel

Veja o código do nosso exemplo abaixo:

<img src="http://www.blogolista.com/images/gastronomia.jpg"  style="width:200px;">

Agora, veja o resultado do código acima:

Dicas:

1) Observe que definimos um valor para width (largura da imagem) mas não declaramos o valor de height (altura da imagem). Desta forma, a imagem obtida terá a largura definida pelo código HTML e a altura proporcional à imagem original que foi hospedada, ou vice e versa.

2) Se você ocultar a largura (width) e a altura (height) no código, obterá a imagem nas dimensões originais da imagem hospedada.

3) Cuidado quando definir as duas dimensões, width e height, que devem ser proporcionais evitando-se que a imagem fique deformada.

4) Se você hospedar a imagem no mesmo servidor onde está hospedado o seu site, poderá ocultar parte do endereço do link. Se a nossa imagem fosse inserida no mesmo site onde ela está hospedada, que é www.blogolista.com, poderíamos abreviar o o endereço do link para [src=”images/gastronomia.jpg”].

5) Antes de você inserir algum código ou script no blog, teste primeiro em algum editor HTML. Recomendamos o Squids Editor. Leia o nosso artigo:  Simulador gratuito para HTML, CSS e JavaScript – visualização em tempo real

Inserindo link externo na imagem

Bem, agora vamos acrescentar a parte do código HTML onde iremos inserir o link de redirecionamento. Você poderá utilizar o seguinte código padrão:

<a href=”endereço do link externo”><img src=”endereço da imagem hospedada” style=”width:00px; height:00px;”></a>

Veja a seguir o nosso código de exemplo:

<a href="http://www.blogolista.com/linklista" target="_blank"> <img src="http://www.blogolista.com/images/gastronomia.jpg"  style="width:200px;"></a>

Veja o resultado a seguir. Clique na imagem para gerar o redirecionamento automático do link externo http://www.blogolista.com/linklista :

Dicas:

1) Observe que adicionamos o atributo target=”_blank” que redireciona a página para uma nova guia do navegador. Para redirecionar a página para a mesma guia, use target=”_self”.

2) Antes de você inserir algum código ou script no blog, teste primeiro em algum editor HTML. Recomendamos o Squids Editor. Leia o nosso artigo:  Simulador gratuito para HTML, CSS e JavaScript – visualização em tempo real

Posicionando a imagem com link

a) Posição central --> acrescente a tag <div style=”text-align:center”>  </div>

Veja como fica o nosso código de exemplo:

<div style= "text-align:center"> <a href="http://www.blogolista.com/linklista" target="_blank"> <img src="http://www.blogolista.com/images/gastronomia.jpg"  style="width:200px;"></a></div>

Veja o resultado:

b) À direita --> acrescente a tag <div style=”text-align:right”>  </div>

Veja o nosso código de exemplo:

<div style= "text-align:right"> <a href="http://www.blogolista.com/linklista" target="_blank"> <img src="http://www.blogolista.com/images/gastronomia.jpg"  style="width:200px;"></a></div>

c) À esquerda (já posicionado por padrão) --> mas poderá acrescentar a tag <div style=”text-align:left”>  </div>

Veja o nosso código:

<div style= "text-align:left"> <a href="http://www.blogolista.com/linklista" target="_blank"> <img src="http://www.blogolista.com/images/gastronomia.jpg"  style="width:200px;"></a></div>

Veja o resultado:

Inserindo os códigos HTML no blog ou site

Se você não sabe como inserir códigos HTML no blog, leia:

Na lateral do blog

Como inserir Widgets no Wordpress sem a instalação de plugins

Como instalar um Widget no seu Blog -(Blogger)

Na postagem

Como inserir códigos HTML nas postagens do Wordpress

Como inserir códigos HTML nas postagens do Blogger

byALF