17 de jul. de 2010

Como Inserir Links em Imagens



Colocar um link em uma imagem é bastante útil, você pode usar esta imagem "linkada", para divulgar seu blog/site (assim como nós fizemos, veja na barra lateral: "Divulgue-nos") ou outras funções de sua preferência.
É muito fácil!
Ensinaremos o modo convencional, editando diretamente o código HTML, e também utilizando o NVU (Clique aqui, para saber o que é Nvu).






Obs.:  As imagens podem ser em qualquer formato compatível com a web (PNG, JPEG, GIF).

Editando o código HTML
1º  Passo - Copie o código abaixo:
<a target="_blank" href="SUA URL" title="DESCRIÇÃO DO BLOG"alt="TÍTULO DO BLOG/SITE"><img src="ENDEREÇO DA IMAGEM" style="border: 1px solid #000000" /></a>

2º Passo - Subtitua as frases marcadas por seus devidos objetos:
SUA URL -  Coloque oendereço do seu site (o que aparece na barra de endereços do seu navegador: "http://www.....";

  • DESCRIÇÃO DO BLOG - Coloque o assunto que seu site aborda.
  • TÍTULO DO BLOG - Você já sabe.
  • ENDEREÇO DA IMAGEM - Coloque o endereço da imagem.

Obs.: Para linkar uma imagem, a imagem precisa estar hospedada na web (Picasa, PhotoBucket, Flickr...), para conseguir o endereço é simples: Clique com o botão direito do mouse sobre a imagem desejada, e selecione a opção "Copiar URL da imagem".


3º Passo - Pronto sua imagem está linkada. Cole o código onde quiser em seu site.

Obs.: Caso você use o Blogger, vá em "adicionar um gadget" e escolha código HTML/JavaScript" e cole o código, pronto.

Utilizando o Nvu
Caso você não tenha o programa. Clique aqui para baixar.

1º Passo - Abra o programa e escolha a opção "Image".


2º Passo - Na aba "Location" em Image Propreties:

  • Na caixa "Image Location", coloque a URL da imagem, logo que a URL for colocada a imgem aparecerá na caixa "Image Preview";
  • Na caixa "Tooltip", coloque a descrição do site;
  • Em "Alternate text", coloque o título do site.
3º Passo - Vá na aba "Link".

  • Coloque o endereço do seu site (URL).
  • Clique em OK.
4º Passo -  Vá na aba "Source"


  • Selecione o código que está entre as tags: <body> e </body>
5º Passo -  Cole o código em seu site e corra pro abraço!

Aqui concluímos mais uma dica! Fiquem ligados logo estaremos postando mais dicas para você!

Tutorial elaborado por: Ayrton Denner
Possui direitos autorais!

Nenhum comentário:

Postar um comentário

Leia antes de Comentar:
• Escreva apenas o que for referente ao tema;
• Não aceitaremos comentários com ofensas pessoais ou spam ;
• Todos os comentários serão moderados;
• Não faço parcerias por meio de comentários;
• Faça comentários relevantes;
• Obrigado por sua visita e volte sempre.


Gostou? Assine o nosso FEED ou receba atualizações por email.


Siga-nos no Twitter!