segunda-feira, 29 de junho de 2009

Como abrir links em nova aba ou janela

Uma dúvida frequente entre os novatos, é como colocar um link em um texto ou em uma imagem e fazer com que ele abra em uma nova janela ou em uma nova aba do navegador.

Usar esta prática pode ser interessante para manter o leitor mais tempo em nossos blogs, pois ele irá visualizar este conteúdo em uma outra aba e depois poderá retornar ao blog.

No Firefox funcionará com as abas e no Internet Explorer, com as janelas. Pra quem não sabe, uma aba abre ao lado da página onde estamos e uma janela abre em cima.

Para obter tal efeito, iremos utilizar os seguintes códigos:

Abrir link de um texto em nova aba

<a href="URL DO LINK" target="_blank">TEXTO</a>

Substituir URL DO LINK pelo endereço a ser direcionado e TEXTO pela palavra ou frase que irá receber o link.  Usaremos como exemplo o próprio Dicas Blogger :

<a href="http://dicasblogger.blogspot.com/" target="_blank">Dicas Blogger</a>

Abrir imagem linkada em nova aba

<a href="URL DO LINK" target="_blank">

<img title="FRASE" alt="NOME" src="URL DA IMAGEM" /></a>

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á:

<a href="http://twitter.com/julianasardinha" target="_blank"><img
title="Me siga no Twitter" alt="Twitter"
src="http://lh3.ggpht.com/_EttevOw0KeE/Sc_54iERlbI/AAAAAAAAEr4/rtTNyyM4Weg/twitter.png" /></a>

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

79 comentários:

  1. É muito simples, mais para quem não sabe HTML pode salvar :)

    Abraços
    Joao - WebDicas.org

    ResponderExcluir
  2. Boa Juliana,eu sabia quase de tudo,menos clicar na imagem e abrir em outra janela ;)
    vlw t+

    ResponderExcluir
  3. Eu uso o Windows Live Writer e vai 'altomático', como diriam alguns no meu msn.

    ResponderExcluir
  4. Juliana,

    Esta questão de link é muito importante, falo como 'navegadora'.
    Na minha modesta opinião, links para o mesmo site/blog devem abrir na mesma página; os links externos (para outros sites/blogs) devem abrir em outra aba/janela.

    E aqui vai um pedido/sugestão: quando criarem seus templates/widgets e outras coisinhas mais, coloquem os links dos créditos abrindo em nova aba. Os novatos agradecem.

    Continuo sua fã.....

    ResponderExcluir
  5. Eu não sabia que dava para usar o Windows Live Writer para publicar postagens no Blogger.

    ResponderExcluir
  6. Olá Juliana,

    Tenho uma dúvida quase igual.

    Como colocar um link e abrir em uma nova janela na linkbar? Eu já procurei no html expandindo os widgets, mas sem sucesso.

    Se você puder me ajudar.

    meu email: viniciusgentile@gmail.com

    Obrigado, seu blog é sensacional.

    ResponderExcluir
    Respostas
    1. Minha duvida e exatamente a mesma sua ! consegui resover ? obrigadoo

      Excluir
  7. Tem como configurar o 'target=_blank' no código html do blogue para não ter que fazer isto manualmente sempre que adicionar links ou imagens. Fica a sugestão para ensinar o pessoal. Beijus

    ResponderExcluir
  8. Adorei este Blog, ainda vou fuçar muito por aqui!

    ResponderExcluir
  9. queria aprender como todos os links de um blog abrirem em nova janela menos os icones de navegação

    ResponderExcluir
  10. Comecei a utilizar o windows writer, e considero uma excelente forma para postar no blogger, muito eficiente!

    Já agora completa-se a informação:

    _blank = abre uma nova janela do navegador, deixando a janela actual intacta;

    _parent = abre na mesma janela, mas retorna o conteúdo base de um frameset;

    _self = abre na mesma janela, e actualiza o conteúdo referente ao link;

    _top abre na actual janela, e actualiza o conteúdo completo.

    ResponderExcluir
  11. Valeu Juliana!

    Lembro que tinha deixado um recados sobre isso num post... valeu mesmo!

    ResponderExcluir
  12. Eu uso o live, por padrão jah coloca os links em _blank, sinceramente axo muito melhor que nas mesma janela.

    ResponderExcluir
  13. Oá Juliana,

    Muito bom este seu blog. Tem ajudado um montão por aqui.
    Tenho uma dúvida. Como podemos fazer com que os links (de um gadget) no blogger também abram numa outra página? Neste caso é necessário alterar o código fonte do blog?

    muito obrigado e parabéns!
    abs

    ResponderExcluir
  14. As dicas foram muito úteis, obrigado. Gostei muito do blog, mostra a informação de forma clara e eficiente.

    parabéns

    abraços

    ResponderExcluir
  15. Olá.. venho utilizando suas dicas pra estar aprimorando e modernizando meu blog.
    Meu blog é da área de gastronomia, sempre quis saber como se faz pra colocar uma imagem entre os textos e se o visitante quiser ver detalhes da imagem..clicar nela e abrir em outra aba/janela...

    Este post foi mto útil..instalei o Windows Live Writer (não conhecia e achei excelente)...mas minha "dor de cabeça" é que não consigo gerar a imagem... coloquei o código do jeito q vc explicou, coloquei todos os dados da URL do link, frase, nome e URL da imagem..porém qdo publico o post.. a imagem não aparece e fica os códigos apenas.


    Ah.. no Windows live writer fiz as configuração necessárias (automatica) pra o blogger..

    por favor me ajude..

    obrigada

    sem mais
    Juliana

    ResponderExcluir
  16. ahh..meu e-mail é juliana_yamashita@hotmail.com (por favor não divulgue este comentário)..obrigada

    ResponderExcluir
  17. Olá, também preciso de uma ajudazinha, como faço para colocar do lado direito do meu blog uma imagem que ao clicar nela abre em outra página?
    Obrigada, Ana

    ResponderExcluir
  18. Já add nos meus favoritos, adorei o site. Parabens! Consegui colocar o twiter ficou uma gracinha..! Obrigada!!!

    ResponderExcluir
  19. Juliana não tem um código para inserir no blog que deixe isso automático, porque já tenho muitas postagens e gostaria que os links abrisem e outra aba

    ResponderExcluir
  20. Muito bom foi de grande ajuda.

    Obrigado.

    ResponderExcluir
  21. Gostei .. obrigado.
    ha um bom tempo venho procurando isto .. muito obrigado

    ResponderExcluir
  22. Precisei disso hoje e encontrei aqui! Muito bom! Já resolvi um problemão!

    ResponderExcluir
  23. gente me ajudou muitão mesmo!!!


    obrigado!

    ResponderExcluir
  24. Muito básico... mas não imaginas o quanto me ajudaste!!!

    ResponderExcluir
  25. Amigos eu tenho esse problema em meu blog
    mais como tem milhares de links eu queria fazer uma mudança só no Html para que todos os links fiquem automaticos como eu faço?

    mande essa resposta para o meu e-mail gospelfree@hotmail.com
    ficarei grato

    ResponderExcluir
  26. Ótimo, sempre esqueço onde fica o que..

    ResponderExcluir
  27. Perfeito!!! Só aqui consegui entender como fazer.

    Jeannyne

    ResponderExcluir
  28. Olá otimo post, eu ate sabia fazer o link em imagem so não sabia fazer abrir em nova aba, agora tenho uma pergunta por que minha imagem ficou com um contorno azul? antes de fazer ela abrir em nova aba a imagem estava normal sem contorno, tem como tirar este contorno? Obrigado

    ResponderExcluir
  29. Não entendi essa parte:(URL DA IMAGEM substitua pelo endereço da imagem) O endereço no caso seria o do meu blog??? Tentei colocando a URL do meu blog e não deu certo!

    ResponderExcluir
  30. Valeu pelas dicas, eu tentei por outro site e não consegui...

    ResponderExcluir
  31. Tem como abrir 2 links em uma imagem só?

    obrigado

    contato@diegoeverest.com.br

    ResponderExcluir
  32. Olá boa noite!
    Tenho uma duvida em relação a link em outra pagina e seria grato se me ajuda-se!
    coloquei _ blank no html da pagina, os links abrem certinho em outra aba.
    Mas gostaria de saber como faço para os botões "menu" abra na mesma pagina?
    Não achei no html da pagina algo que me deixasse mudar apenas esses botões!
    Seria grato se responde-se.

    Obrigado

    ResponderExcluir
  33. Eu quero saber como fazer para aquele que o blogger abre como link, como faço pra ele abrir em nova janela, la nao tem opção de editar em html.
    Obrigado.

    ResponderExcluir
  34. Oi, quando eu faço isso, ao clicar no link, ele abre uma nova aba, mas por exemplo, ao inves de na nova aba ficar www.orkut.com
    Fica www.vnyblog.blogspot.com/2010/11/www.orkut.com

    E diz que não existe, vc poderia me ajudar?

    ResponderExcluir
  35. obrigado , consegui, só não vai dar para fazer isso em mais de 200 posts, né? eu queria um widget ou código html para colocar no CSS, mas já tá ótimo. daqui em diante todos meus posts vão abrir em outra janela - obrigadão

    ResponderExcluir
  36. Em eu tenho uma duvida se poder me ajudar!

    É que eu boto tudo conforme vc disse só que no meu blog aparece os codigos em vez da imagem!

    Se puder me ajudar eu agradeço e muito!

    Dês de ja obrigado!

    ResponderExcluir
  37. oi meu nome eh gabriel e ainda nao consigo abrir um link d meu blog em outra pagina ou aba! teria como explicar mais detalhado ou as vzs por msn? tah ae ele: grodoval@hotmail.com

    ResponderExcluir
  38. Muito obrigado. Este post MUITO ÚTIL. Esta não é a primeira vez que recorro a este Blog para me "salvar" em algumas coisas no Blogger.

    ResponderExcluir
  39. BOA JULIANA ME AJUDOU MUITO, EM ABRIR IMAGEM LINKADA :D

    ResponderExcluir
  40. valeeew muuito util salvo minha semana . obrigadão

    ResponderExcluir
  41. Muito obrigado pela dica, continue assim ;*

    ResponderExcluir
  42. Apesar da postagem ser de 2009, só vim descobri mais a fundo esse mundo dos Blogs agora, sendo muito exigente na organização, embora não seja profissional na área, me incomodava sim, ver meus links abrindo na mesma aba ou janela, perdendo o possível visitante do blog. Agora, graças a forma majestosa que a Juliana passou essa informação, consegui aprender o que tanto queria.

    Muito obrigado Juliana e Dicas Blogger.

    Atenciosamente:
    Daniel Artony

    ResponderExcluir
  43. Dica simples, fácil e muito rápida.

    Vocês são demais!

    Obrigado.

    Bruno Borges Borges
    brunoborgesborges.blogspot.com

    ResponderExcluir
  44. Bem no meu caso foi diferente pois o link que eu gostaria de redireciona-lo para uma nova aba é o do ( GadGet )chamado lista de link´s nesta lista gostaria que o observador do site fosse redirecionado para uma nova aba... Mais não sei se o sistema de GadGet aceite comando. Por isso esse não funciona lá.

    ResponderExcluir
  45. Olá. Sou iniciante no mundo dos blogs, mais muito empolgado. Sua dica foi de grande valia. Já a implementei no meu blog e ficou 100%. Fiz um post sobre como consegui fazê-lo e coloquei um link para sua página. Se achar inconveniente me avise por favor. www.tipsplustips.blogspot.com
    carlos

    ResponderExcluir
  46. Artigo de muita ajuda, depois deste me tornei leitor do assíduo do blog, pela qualidade do material. Obrigado!

    ResponderExcluir
  47. Valeeeww!!! Me ajudou muito...
    Mas é uma porcaria ter que mudar o código toda vez... Seria tãão melhor se tivesse uma ferramenta que facilitasse isso... =b

    ResponderExcluir
  48. uhuuuuuu!!!
    vlw as dicas,me ajudou mto!!!
    eu consegui!:)
    bjaum e continue assim!=D

    ResponderExcluir
  49. olá gostaria de saber se existe um jeito de colocar 2 links na mesma imagem, mais que abrem em janelas diferentes,por favor me ajudem e parabens pelo site,esse site foi minha principal ferramenta de aprendizado,tudo que eu sei sobre a blogosfera foi graças a esse site,, e ja to virando até puxa saco kkk,,

    ResponderExcluir
  50. Parabéns, me ajudou muito! Muito Obrigado!

    ResponderExcluir
  51. Muinto obrigado!!!!ajudou muinto....obrigado por ter tirado minha duvida.....bjs!!!

    ResponderExcluir
  52. Olá ! E no caso de um video, como fazer para ele abrir em uma nova página especifica.

    ResponderExcluir
  53. this is very useful information thanks admin

    ResponderExcluir
  54. Antes tenho só mais uma dúvida: Como eu faço para redimensionar a imagem linkada, ou seja, como eu edito a largura, altura...

    Abraço!.

    ResponderExcluir
  55. Amigo, me ajude. Usando o recurso do blogger tenho uma imagem ligada a um link, mas sempre abre na janela, quero que abra em um novo link.
    Testei "partir" sua dica, coisas assim, e não deu certo. Não preciso de html, preciso usar corretamente a ferramenta do blogger.

    ResponderExcluir
  56. Adorei este Blog, ainda vou fuçar muito por aqui! tao of badass

    ResponderExcluir
  57. Muito obrigado, Juliana! Só sei blogar com o wordpress. Precisou de um código, viro um pato correndo no asfalto! ahaha Me salvou. Abs!

    ResponderExcluir
  58. Muito bem. Apesar de ser um comando simples, pouca gente sabe sobre o recurso. Isso evita do usuário deixar imediatamente seu site ou blog.

    Parabéns pela dica.

    ResponderExcluir
  59. parabéns pela simplicidade do que pretende passar para os demais!

    ResponderExcluir

Os comentários passam por um sistema de moderação, ou seja, eles são lidos por nós antes de serem publicados. Não serão aprovados os comentários:
- não relacionados ao tema do post;
- com pedidos de parceria;
- com propagandas (spam);
- com link para divulgar seu blog;
- com palavrões ou ofensas a pessoas e marcas;
ATENÇÃO: comentários com links não serão aprovados