Visual Dicas

---

Como inserir fotos e imagens com links externos no blog Posted: 14 May 2016 02:31 PM PDT 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 Visual Dicas - A sua fonte de informação! Este artigo pertence ao Visual Dicas. Plágio é crime e está previsto no artigo 184 do Código Penal.

You are subscribed to email updates from Visual Dicas. To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States