terça-feira, 26 de fevereiro de 2013

Como colocar um link em uma imagem

Como colocar um link em uma imagem

 
Vocês pensaram que a série Primeiros Passos havia acabado? Que nada! A cada dia recebo mais e mais perguntas com o básico do básico. Então hoje vou ensinar, passo-a-passo, como colocar um link em uma imagem, para direcioná-la a uma outra página web.
  1. Escolha a imagem
  2. Hospede-a no site de sua preferência (saiba mais clicando aqui)
  3. Copie o endereço da imagem (saiba mais)
  4. Use o código abaixo
Exemplo:
Vou usar a imagem que coloquei para os Feeds do Template Songs:

Feeds
Agora vou hospedá-la no Picasa e copiar o endereço dela
upload url
Obtive o seguinte endereço:

http://lh4.ggpht.com/_mcq01yDJ2uY/SXUiVhRAGgI/AAAAAAAAAUs/pu2fQkzWOoc/600px-Feed_Icon_Bl-Or.png
Quero que esta imagem direcione o usuário aos feeds do meu blog. O código ficará assim:
Vejam o resultado,clicando na imagem abaixo:

Existem diversas outras maneiras de se fazer isso:
No Windows Live Writer
Escolha a imagem do HD, clique nela, e escolha “vincular à url”. Na caixa que vai abrir, coloque a url da imagem. Não sabe o que é Windows Live Writer? Então clique aqui.
live writer
No NVU Portable
Clique no ícone para adicionar uma imagem. Na nova janela, coloque a url da imagem em “endereço” e o link a ser direcionado na aba “ link”. Em “descrição” coloque uma frase para ajudar o usuário a se localizar e em “Texto substituto”, uma palavra para identificar a imagem. Copie o código e cole onde desejar.
configuração código-fonte
Para saber o que é NVU Portable, clique aqui.

Acesse o post atualizado e fique por dentro das novas opções da nova interface!!!Como colocar links que abram em uma nova janela

Dica da tia Juliana
Quando eu quero linkar uma imagem em um post, eu uso o Writer. Para a sidebar, uso sempre o NVU, pela possibilidade de colocar uma descrição.
Até a próxima!

Sobre o autor: Juliana é a fundadora deste blog. Nascida em 1970, é médica e, nas horas vagas, blogueira. Também é top colaboradora do fórum de ajuda do Blogger. Twitter l Google Plus l Facebook l
Abrir imagem linkada em nova aba

NOME
URL DO LINK substitua pelo endereço do link vinculado à imagem;
FRASE troque pela frase que irá aparecer quando alguém passar o mouse sobre a imagem;
NOME substitua pelo título da imagem;
URL DA IMAGEM substitua pelo endereço da imagem.
Usaremos como exemplo a imagem do passarinho do Twitter e o link do meu perfil lá:
http://twitter.com/julianasardinha" target="_blank">title="Me siga no Twitter" alt="Twitter"
src="http://lh3.ggpht.com/_EttevOw0KeE/Sc_54iERlbI/AAAAAAAAEr4/rtTNyyM4Weg/twitter.png" />
Tudo isso pode ser feito facilmente pelo editor html NVU portable e pelo Windows Live Writer
No NVU, clique em LINK e preencha os campos em branco, conforme a imagem abaixo: 
NVU
No Windows Live Writer, escreva um texto, passe o mouse sobre ele e escolha inserir hiperlink. Marque a caixa abrir link em nova janela e preencha os demais espaços.
Live Writer
Recomendo o uso dos dois programas, para quem deseja dar um toque mais profissional ao blog. Além de trabalhar com uma linguagem mais avançada, a automatização dos processos nos poupa bastante tempo. Dizem que tempo é dinheiro. $$$
Sobre o autor: Juliana é a fundadora deste blog. Nascida em 1970, é médica e, nas horas vagas, blogueira. Também é top colaboradora do fórum de ajuda do Blogger. Twitter l Google Plus l Facebook l

Nenhum comentário:

Postar um comentário