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.
- Escolha a imagem
- Hospede-a no site de sua preferência (saiba mais clicando aqui)
- Copie o endereço da imagem (saiba mais)
- 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:
Agora vou hospedá-la no Picasa e copiar o endereço dela
Obtive o seguinte endereço:
http://lh4.ggpht.com/_mcq01yDJ2uY/SXUiVhRAGgI/AAAAAAAAAUs/pu2fQkzWOoc/600px-Feed_Icon_Bl-Or.pngQuero 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.
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.
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!
65 Comments
Muito bom Juliana. Sempre ajudando aos novatos, e isso é muito bom. Parabéns pela iniciativa e que posts como esses continue sempre a aparecer.
ResponderExcluirAbraços e sucesso!
Monthiel
Essa eu ja sabia ,mas pra quem não sabe
ResponderExcluirAbraço Juliana
"imgsrc=..." Quem diria que é tão simples :)
ResponderExcluirWindows 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!
Juliana essa sua série primeiros passos é maravilhosas, pelo menos para mim...
ResponderExcluirOlhe 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
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!
ResponderExcluirEsta foi novidade pra mim.
Um beijo.
Marcelo.
Gostei muito do blog. Parabéns pela iniciativa. Passarei sempre por aqui.
ResponderExcluirObrigado 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!
ResponderExcluirCarol, fiquei muito feliz com o seu comentário. Disponha sempre!
ResponderExcluirMarcelo, Monthiel, Gabriel,Elle e Anne: thanks!
Thiago, eu não entendi a sua pergunta...
ResponderExcluirNã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.
ResponderExcluirse puder me ajudar agradeço.
adnagospeldownloads@hotmail.com
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
ResponderExcluirJuliana...
ResponderExcluiro 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
Miximizando, é o Blogger in draft.
ResponderExcluirAtente-se às regras do blog pois o seu comentário não está relacionado ao assunto em questão. Obrigada.
essa dica me ajudou muito, valeu....
ResponderExcluirOi Juliana,
ResponderExcluirSou 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
Muito boa dica, agora fica mais fácil linkar uma imagem, eu usava outro jeito muito mais complicado.
ResponderExcluirolá, gosto muito do seu site e já aprendi e utilizei suas dicas muitas vezes. Está de parabéns!
ResponderExcluirHoje 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
Acabei de pousar neste espaço e estou maravilhada, continue assim, ajudando os iniciantes.
ResponderExcluirAbração,
Amara Pedrosa
Muito bom.. Tava precisando disso. Mas uma dúvida... como faço pra abrir o link da imagem em outra janela?
ResponderExcluiroi...
ResponderExcluirtem 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!!
parabens cara vc é show, valeu
ResponderExcluirnuss, vc me ajudou bastante!
ResponderExcluirMuito boas as dicas...agradecemos!
ResponderExcluirMuito Bom
ResponderExcluirParabéns pelo Blog, me ajuda muito!!!
boa tarde!!!!
ResponderExcluirJuliana 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
Vlw agora consegui fazer meu banner
ResponderExcluirUhuuuul muitoo obrigaado siite exceleente muito bom valeu tudo bem explicado eu pensei que era difico a cooisa mais simples !
ResponderExcluirvlw muito obrigado msm !
MUITO ÚTIL. Vleu ♥
ResponderExcluirSabe 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.
ResponderExcluirVolto 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é.
com esta ajuda eu pude fazer meu menu personalizado!
ResponderExcluirmuito obrigado, ajudou bastante!
ResponderExcluirObrigado pelo post!
ResponderExcluirConsegui fazer direitinho!
Parabéns!
ola tudo bem? e para colocar inves de um link uma tag?
ResponderExcluirU-huuu! Me ajudou demais! Visitem meu blog(só pra quem joga club penguin) http://cpenguinsblog.blogspot.com/
ResponderExcluirOla Juliana, boa noite
ResponderExcluirPode 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
BOm dia Juliana!
ResponderExcluirAdorei 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
LGX, eu acho que funciona sim no Orkut, pois lá aceita-se html, mas nunca testei
ResponderExcluirObrigado Juliana!
ResponderExcluirCheguei a conclusão que eu sou incapacitado para linkar uma imagem rsrsrsrsrs!
Pode me chamar de Luiz =D
Abraço tenha um excelente dia!
Olá Juliana,bom dia!
ResponderExcluirEstou 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
http://www.dicasblogger.com.br/2009/09/caixa-de-busca-cabecalho-blogger.html
ResponderExcluirObrigado!
ResponderExcluirvc é o cara.
ResponderExcluirQuanta 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.
ResponderExcluiracompanho ha algum tempo esse site maravilhoso,inclusive coloquei seu banner em meu blog,para que meus visitantes aproveitem tb.
ResponderExcluirMUITO OBRIGADO MESMO SE NAO FOSSE VOCES PRA ENCINA AGENTE ESSES TRUQUE NAO SEI QUE SERIA VALEU MSM MUITA INTELIGENCIA PRA VC ABRAÇO
ResponderExcluirMuuuuuuito Obrigada :D
ResponderExcluirobrigada!!! foi mt útilllll
ResponderExcluirvlw kara isso me ajudou muito...
ResponderExcluirabraços
Muito bom teu site... milhões de parabéns!!!
ResponderExcluirConsegui 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!
Muito bom teu site... milhões de parabéns!!!
ResponderExcluirConsegui 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!
Para se sincera, eu me matava tentando descobrir como fazer isso, e olha que já faz um bom tempo que uso blogger >__<
ResponderExcluirde mais nota 10000000000000000000. valeu. estava quebrando a cabeça. obrigaduuuuuuuuuuuuuuuuuuu. consegui
ResponderExcluirVlw tia ju
ResponderExcluirAjudou pakas
Estava a procura desta explicação.
ResponderExcluirObrigada mais uma vez.
Legal, funciona o link, no rodapé dos meus e-mails. PORÉM A IMAGEM NÃO APARECE! POR QUê???
ResponderExcluirTKS
M.
Juliana,
ResponderExcluirConheci 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
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... *.*
ResponderExcluirSeria essa uma dica?
Bjos!
Gostei da alteração que fizeram no painel do Blogger.
ResponderExcluirUma 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.
Obrigado Vééy me ajudou muito..
ResponderExcluirMuito boas as suas instruções. Segui direitinho e deu certo.... Obrigada!
ResponderExcluirMas 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
Ótimas dicas!
ResponderExcluirValeu!!
Olá Juliana... Boa noite!
ResponderExcluirEu 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.
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.
ResponderExcluirSabe pq ocorreu isso?
Desde já agradeço, belas dicas ;)
muito pratico a sua diga.... me sinto meio web design...
ResponderExcluirkkk
valeu
vlw vey consegui
ResponderExcluir