Como colocar um link em uma imagem

Como colocar um link em uma imagem

6 10 99
Como colocar um link em uma imagem 10 6 99
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
<a href="endereço do site"><img src="endereço da imagem" /></a>
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:
<a href="http://feeds.feedburner.com/dicasblogger"><img src="http://lh4.ggpht.com/_mcq01yDJ2uY/SXUiVhRAGgI/AAAAAAAAAUs/pu2fQkzWOoc/600px-Feed_Icon_Bl-Or.png" /></a>
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!
66 Comments
Comments
  1. Muito bom Juliana. Sempre ajudando aos novatos, e isso é muito bom. Parabéns pela iniciativa e que posts como esses continue sempre a aparecer.

    Abraços e sucesso!
    Monthiel

    ResponderExcluir
  2. Essa eu ja sabia ,mas pra quem não sabe

    Abraço Juliana

    ResponderExcluir
  3. "imgsrc=..." Quem diria que é tão simples :)

    Windows Live Writer é muito bom! E eu uso ele!

    Agora esse NVU eu não tinha ouvido falar, muito interessante vou dar uma olhada ;D

    Muito obrigado mais uma vez Juliana!

    ResponderExcluir
  4. Juliana essa sua série primeiros passos é maravilhosas, pelo menos para mim...
    Olhe antes de começar acompanhar suas dicas entrava em outros Blogs também muito bons, mas que dão explicações para quem já têm uma noção.
    Eu não conseguia fazer nada e era muito frustrante, e o pior quando fazia uma pergunta nos comentários além de não receber resposta (claro que o dono do blog não têm compromisso ou obrigação comigo)ainda virava motivo de chacota.
    Um dia enviei uma noticia no diHITT pedindo socorro e os blogueiros de lá me acolherão super bem e disseram que só aqui conseguiria sair do lugar.
    Então é isso, estou escrevendo para que você não desista dessa série que talvez seja a mais importante de seu blog, porque com certeza as pessoas não começam sabendo e aqui é um otimo ponto de partida.
    Abraço e muito, muito obrigado!!!!!

    Carol

    ResponderExcluir
  5. Juliana, parabéns, mais uma vez! Eu que já sou um usuário compulsivo do Windows Live Writer, adorei saber deste NVU. Na época do post eu ainda não era dono de um blog, muito menos conhecia o Dicas Blogger!

    Esta foi novidade pra mim.

    Um beijo.
    Marcelo.

    ResponderExcluir
  6. Gostei muito do blog. Parabéns pela iniciativa. Passarei sempre por aqui.

    ResponderExcluir
  7. Obrigado mas ainda continuo sem saber como por UM DOWNLOAD EM LINK DIRETO!!! pois gostaria muito de saber se puder postar ou me endicar o link eu te agradeço!

    ResponderExcluir
  8. Carol, fiquei muito feliz com o seu comentário. Disponha sempre!

    Marcelo, Monthiel, Gabriel,Elle e Anne: thanks!

    ResponderExcluir
  9. Thiago, eu não entendi a sua pergunta...

    ResponderExcluir
  10. Não estou conseguindo colocar imagem em um link, da tudo certo aparece e tudo mas na hora que clico na imagem aparece que não pode abril.
    se puder me ajudar agradeço.
    adnagospeldownloads@hotmail.com

    ResponderExcluir
  11. Desculpe sou leigo, gostaria de perguntar como eu faço para linkar em imagem sei que ja fizeram essa pergunta e você explicou mas eu não concegui fazer eu copio o codigo fonte do nvu e quando eu vou visualizar a imagem não esta la so o codigo gostaria de saber obrigado. nathansie@hotmail.com

    ResponderExcluir
  12. Juliana...
    o que eu estou falando do site de teste do blogger ele tem o sinbolo "B" em azul
    tem uma imagem no usuariocompulsivo
    http://3.bp.blogspot.com/_mUT2piLt5H0/SGT6b5JJOYI/AAAAAAAAG20/vPSGEhFbdNM/s400/ComentariosEmbutidos.JPG

    flws obrigado

    ResponderExcluir
  13. Miximizando, é o Blogger in draft.
    Atente-se às regras do blog pois o seu comentário não está relacionado ao assunto em questão. Obrigada.

    ResponderExcluir
  14. Oi Juliana,

    Sou novíssima na blogosfera e não sei quase nada sobre formatação de blogs. Este post me foi muito util,obrigada! Gostaria de saber se você tem idéia de como centralizar as imagens da minha sidebar (wordpress), posso fazer isso pelo Windows Live Writer???

    Um abraço

    ResponderExcluir
  15. Muito boa dica, agora fica mais fácil linkar uma imagem, eu usava outro jeito muito mais complicado.

    ResponderExcluir
  16. olá, gosto muito do seu site e já aprendi e utilizei suas dicas muitas vezes. Está de parabéns!
    Hoje gostaria de lhe pedir um favor: tenho um blog(http://laselinhascarmen.blogspot.com, nele tenho uma caixinha com o meu email e não sei linka-la para o email, tentei várias vezes e nunca dá certo,não sei onde estou errando. Poderia me ajudar?
    MUITOS BEIJOS
    cARMEN

    ResponderExcluir
  17. Acabei de pousar neste espaço e estou maravilhada, continue assim, ajudando os iniciantes.
    Abração,

    Amara Pedrosa

    ResponderExcluir
  18. Muito bom.. Tava precisando disso. Mas uma dúvida... como faço pra abrir o link da imagem em outra janela?

    ResponderExcluir
  19. oi...
    tem algum codigo ou site em que agente coloca a imagem no blog, e quando a pessoa passar o mouse ou clicar, amplia a imagem sem abrir outra pagina!!
    tipo como acontece em sites de compras onde vc clica na miniatura e abre uma especie de pop up na tela...

    se souber como fazer isso me de um toque!!!
    obrigado!!

    parabens pelo blog!!

    ResponderExcluir
  20. Muito Bom
    Parabéns pelo Blog, me ajuda muito!!!

    ResponderExcluir
  21. boa tarde!!!!

    Juliana sou novato em blogg e estou com uitas dúvidas, mas agora essa de anexar link a uma imagem ja estou "fera" rsrs, obrigado pela iniciativa... tem uma frase que diz:
    "o segredo da excelencia é compartilhar" então estás no caminho!

    agora tenho uma pergunta...
    eu coloquei o link na imagem, hospedo meu arquivos no easy share mas quando a pessoa clica ao emvez de avrir outra janela abre na mesm (do blogg)... é possivel eu colocar pra abri em nova janela se sim como farei isoo...

    antecipadamente agradeço


    Silas

    PAlmas - TO

    ResponderExcluir
  22. Vlw agora consegui fazer meu banner

    ResponderExcluir
  23. Uhuuuul muitoo obrigaado siite exceleente muito bom valeu tudo bem explicado eu pensei que era difico a cooisa mais simples !

    vlw muito obrigado msm !

    ResponderExcluir
  24. Sabe que eu ainda vou lá nas configurações e altero pro modo de publicação antigo. Aí coloco o hiperlink direto em cima da imagem.
    Volto ao modo de publicação novo e formato o texto. Aí sim publico.
    Dá uma mão, mas assim consigo fazer o hiperlink com imagens que estão na postagem mesmo, sem ter que hospedar em outro lugar.
    Té.

    ResponderExcluir
  25. com esta ajuda eu pude fazer meu menu personalizado!

    ResponderExcluir
  26. Obrigado pelo post!
    Consegui fazer direitinho!
    Parabéns!

    ResponderExcluir
  27. ola tudo bem? e para colocar inves de um link uma tag?

    ResponderExcluir
  28. U-huuu! Me ajudou demais! Visitem meu blog(só pra quem joga club penguin) http://cpenguinsblog.blogspot.com/

    ResponderExcluir
  29. Ola Juliana, boa noite
    Pode me ajudar? - gostaria de saber como colocar um link (interno) no corpo do texto(que está sobre uma foto) de apresentação do blog. Minha idéia é: quando alguém abre o blog, poder ler(se quiser) a 1a. postagem do mesmo, onde coloquei informações importantes que serão úteis sempre e para tanto é desejavel que sejam acessadas mais facilmente.
    grato
    Avila

    ResponderExcluir
  30. BOm dia Juliana!

    Adorei cada dica que tem aqui, já olhei várias diferentes e estão sendo ótimas, mas essa eu tive um pequeno problema, só gostaria de ter certeza de uma coisa, tentei colocar uma imagem com direcionento para meu blog no meu perfil do orkut, mas ele não aceitou, o orkut não permite esses links de direcionamento em imagens ou eu fiz errado? rsrs

    Agradeço a atenção e espero resposta =D

    ResponderExcluir
  31. LGX, eu acho que funciona sim no Orkut, pois lá aceita-se html, mas nunca testei

    ResponderExcluir
  32. Obrigado Juliana!
    Cheguei a conclusão que eu sou incapacitado para linkar uma imagem rsrsrsrsrs!
    Pode me chamar de Luiz =D
    Abraço tenha um excelente dia!

    ResponderExcluir
  33. Olá Juliana,bom dia!
    Estou usando um de seus templates e gostaria de saber como colocou o link do google dentro do espaço para pesquisa que fica na parte do cabeçalho, desculpe a pergunta mas é que eu tentei e não consegui, devo estar deixando passar alguma coisa.

    A propósito, a função HTML do orkut foi desativada, por isso não consegui colocar a imagem linkada no meu perfil, o que é bom, porque ainda sou capacitado para linkar uma imagem! rsrs

    Estou escrevendo por aqui porque não achei um espaço para contato no blog, não é preciso responder por aqui, envie para meu e-mail (se não for atrapalhar).

    luiz.allyquimica@hotmail.com


    Como sempre fecho sua página feliz por tê-la encontrado =D

    ResponderExcluir
  34. http://www.dicasblogger.com.br/2009/09/caixa-de-busca-cabecalho-blogger.html

    ResponderExcluir
  35. Quanta coisa boa vem de ti,guria!Tu tens o dom de ensinar essa galera que andava quebrando a cabeça em outros sites...aqui é diferente a coisa.

    ResponderExcluir
  36. acompanho ha algum tempo esse site maravilhoso,inclusive coloquei seu banner em meu blog,para que meus visitantes aproveitem tb.

    ResponderExcluir
  37. MUITO OBRIGADO MESMO SE NAO FOSSE VOCES PRA ENCINA AGENTE ESSES TRUQUE NAO SEI QUE SERIA VALEU MSM MUITA INTELIGENCIA PRA VC ABRAÇO

    ResponderExcluir
  38. vlw kara isso me ajudou muito...

    abraços

    ResponderExcluir
  39. Muito bom teu site... milhões de parabéns!!!
    Consegui o que queria. vc me ajudou bastante.
    Agora se vc me permitir, gostaria de deixar o endereço do meu site que é:

    http://entretenimentoebbb.no.comunidades.net/

    Quem gosta de um bom entretenimento vai gostar!
    abraço a todos!

    ResponderExcluir
  40. Muito bom teu site... milhões de parabéns!!!
    Consegui o que queria. vc me ajudou bastante.
    Agora se vc me permitir, gostaria de deixar o endereço do meu site que é:

    http://entretenimentoebbb.no.comunidades.net/

    Quem gosta de um bom entretenimento vai gostar!
    abraço a todos!

    ResponderExcluir
  41. Para se sincera, eu me matava tentando descobrir como fazer isso, e olha que já faz um bom tempo que uso blogger >__<

    ResponderExcluir
  42. de mais nota 10000000000000000000. valeu. estava quebrando a cabeça. obrigaduuuuuuuuuuuuuuuuuuu. consegui

    ResponderExcluir
  43. Estava a procura desta explicação.
    Obrigada mais uma vez.

    ResponderExcluir
  44. Legal, funciona o link, no rodapé dos meus e-mails. PORÉM A IMAGEM NÃO APARECE! POR QUê???

    TKS

    M.

    ResponderExcluir
  45. Juliana,

    Conheci seu blog ha pouco tempo e ele tem me ajudado demais.

    Meu blog é bem pequeno e na verdade é voltado as atividades acadêmicas de minha turma.

    Mesmo assim tem sido bem bacana aprender um monte de truque e dica!

    Obrigado

    ResponderExcluir
  46. Eu hospedo as minhas imagens no blogger mesmo,já que sempre que eu tento ir nesses sites de hospedagem precisa fazer conta,senha,confirmar conta,ou seja,MUITA COISA PRA FAZER SÓ POR UMAS IMAGENS!....é bem mais facil fazer um blog secreto de hospedagem de imagens,postar imagens,clicar na imagem que quiser e copiar e pegar o link... *.*
    Seria essa uma dica?
    Bjos!

    ResponderExcluir
  47. Gostei da alteração que fizeram no painel do Blogger.

    Uma novidade que não tinha prestado muito atenção, como eu, é a possibilidade de adicionarmos legenda nas imagens.

    Mas, antigamente, uma forma bem ágil, para quem fazia uso de editores de web on line, era que costumavamos copiar a imagem do programa de pintura e a colavamos diretamente durante a edição.

    Quando a página era salva, automaticamente, a imagem também o era.

    O próprio editor web criava o novo arquivo.

    Tentei isto no blogger, em se considerando que é um editor de textos, de imagens, de videos on line, tal qual o é os já existentes.

    E o resultado é este.
    A imagem não aparece:

    < img alt="" height="400" src="file:///C:/DOCUME%7E1/ADMINI%7E1/CONFIG%7E1/Temp/moz-screenshot-1.jpg" width="400" / >

    Significando que o arquivo de imagem estaria, eventualmente, na HD ¨C¨. Quem se lembra dos antigos editores sabe que tinhamos que corrigir este erro. Para que a imagem fosse visualizada, mister o código:


    < img alt="" height="400" src="moz-screenshot-1.jpg" width="400" / >

    Mas, na pior das hipóteses, quando desvinculado o ¨file C://¨ que originou a imagem no post, propriamente dito, a imagem não seria visualizada realmente mas, enquanto houvesse o vínculo (o ¨C://¨ durante a edição do post), a imagem teria, obrigatoriamente, de se fazer visualizar.

    Não sei se me expressei adequadamente.

    Mas para quem se lembra dos antigos editores de páginas, o que realmente seria uma grande facilidade seria a possibilidade de se copiar a imagem do programa de pintura e colá-la diretamente no post.

    Automaticamente, o editor on line criaria ¨o novo arquivo¨ nos arquivos do blog.

    Quem tem conexão discada, agradeceria o recurso.

    ResponderExcluir
  48. Muito boas as suas instruções. Segui direitinho e deu certo.... Obrigada!
    Mas eu queria que um outro link direcionado fosse o de um cadastro de e-mails e que, quem se cadastrasse, recebesse automaticamente uma apostila com receitas culinárias. Explico-me melhor: o internauta clica no link do meu blog e cai numa página em que precisa se cadastrar para receber receitas... (Mas não é o feedburner, pois eu já tenho).
    É possível???
    Aguardo retorno

    ResponderExcluir
  49. Oi tudo bom ?
    Tem como por um codigo nesse scrip para configurar o tamanho da foto ?

    ResponderExcluir
  50. Olá Juliana... Boa noite!
    Eu hospedo minhas imagens no Picasaweb, fiz tudo direitinho coloquei o link do site tudo certo, a imagem apareceu.... só que quando clico na imagem aparece o site Picasaweb e não o que coloquei????
    Grata!!! Abraços.

    ResponderExcluir
  51. Olá Juliana tdo bem? Baixei o Nvu portable e ele funcionou direitinho, na hora de colocar descrição e título substiruto escrevi "Galeria de Fotos" mas ao colocar o código no gadget do meu blog não apareceu em cima da foto o nome "linkado" Galeria de Fotos.

    Sabe pq ocorreu isso?

    Desde já agradeço, belas dicas ;)

    ResponderExcluir
  52. muito pratico a sua diga.... me sinto meio web design...

    kkk

    valeu

    ResponderExcluir
 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top