⇐ Clique aqui para expandir o post. ⇒

sexta-feira, outubro 31, 2008

Faça os links abrirem em uma nova aba

Nível: iniciante
Link de aço

Fazer os links do seu blog abrirem em uma nova aba ou janela é importante para aumentar a permanência do leitor no seu site. Quando o leitor é mais distraído (como a maioria dos internautas é!), se ele clicar e sair do seu site, é bem provável que se distraia com o conteúdo do site linkado e nem se lembre de voltar para o seu.

Nos posts:

Quando você coloca links no seu post, basta acrescentar target='_blank' na tag <a>:

Exemplo de link que vai abrir na mesma janela:

<a href='http://htmhelen.helenfernanda.com' title='Visite o blog HTMHelen'>HTMHelen</a>

Exemplo de link que vai abrir em uma nova janela:

<a href='http://htmhelen.helenfernanda.com' title='Visite o blog HTMHelen' target='_blank'>HTMHelen</a>

Nas listas de links do Blogger:

Nível: avançado

Quando você adiciona uma Lista de blogs, o Blogger já faz com que os links abram em nova aba ou janela. Porém, quando você cria uma Lista de links o Blogger, por padrão, abre na mema janela.

1. Para mudar isso, você tem que ir em Layout >> Editar HTML.

2. Marque Expandir modelos de widgets. Qual é o nome da sua lista de links? Meus links, Blogroll, Recomendo… não importa. A lista de links que estou usando como exemplo se chama Favoritos. Procure pelo nome da sua lista de links no código do seu blog expandido:

<b:widget id='LinkList1' locked='false' title='Favoritos' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>

3. Identifique a tag <a>, como destacado acima e acrescente target='_blank'.

Antes:

<a expr:href='data:link.target'><data:link.name/></a>

Depois:

<a expr:href='data:link.target' target='_blank'><data:link.name/></a>

4. Salve e teste. Não adianta clicar em "visualizar" porque não dá para testar links nesse modo. Se você tiver mais de uma lista de links, é necessário realizar o mesmo processo em cada uma delas.

Pix meutedio arroba mail ponto com

58 comentários:

  1. Olá Helen,

    gostei desta dica. Eu achava que sabia tudo sobre este blogroll, mas vejo que me enganei. Posso publicar em meu blog (com os créditos devidamente colocados, claro) ??

    Aguardo resposta,

    Alberto

    ResponderExcluir
  2. Alberto, será uma honra.

    Coloque link para este post: http://htmhelen.helenfernanda.com/2008/10/faa-os-links-abrirem-em-uma-nova-aba.html

    Paz e bem!

    ResponderExcluir
  3. Helen,

    adicionei seu link lá no meu blogroll e também publiquei a postagem lá. Pode conferir: http://mestreblogger.blogspot.com/2008/11/blogroll-links-list.html.

    Deixo-lhe desde já meus parabéns por seu blog que com certeza deve ajudar muitos blogueiros.

    Abraços,

    Alberto

    ResponderExcluir
  4. bom dia to começando agora e to tentando customizar aparencia do meu blog, tentei editar o html para o lnk ab m ma nva aba porém, me retorna a seguinte mensagem de erro "Não foi possível concluir sua solicitação.", me ajuda

    ResponderExcluir
  5. @Lion man,

    Não é possível ajudar porque esse erro é do Blogger. Tudo o que podemos fazer quando esse erro aparece é tentar novamente algumas horas depois.

    ResponderExcluir
  6. Olá Helen. Será que tem como eu configurar meu blog para abrir somente os links dos posts em uma nova janela?? Eu sei que tem como abrir todos os links do BLOG em uma nova janela, mas isso não dá certo no meu. Gostaria de abrir apenas os links que estão no POst em nova janela.

    obrigado

    ResponderExcluir
  7. @Camila,

    Para cada link que você inserir no post você coloca target='_blank' para ele abrir em nova janela.

    ResponderExcluir
  8. e pra nao fikar tendo que por esse colocar isso em todos links nos post's, nao tem como modificar tipo isso no HTML nao?

    ResponderExcluir
  9. @Mr. Fox,

    O post explica isso também.

    ResponderExcluir
  10. O que a Camila e Mr.Fox estão querendo é algum script que faça o link abrir automático somente na área da postagem do blog (automático quer dizer, sem ter que colocar "na unha" o atributo "target=blank" nos links do post).

    ResponderExcluir
  11. Abrir em uma nova janela é importante mesmo, pk muitas vezes não voltam ao site

    ResponderExcluir
  12. Helen, Muito Obrigado pelas dicas e tutoriais.

    Deus te Abençoe ricamente!

    William
    Blog www.felizcomjesus.com - Seja muito mais feliz ao lado de Jesus!

    ResponderExcluir
  13. Prezada Helen,

    Espetacular a dica. Já utilizei em meu blog (http://sustentacaooral.blogspot.com/) e, apesar de ser advogado de formação, já estou me sentindo um profissional.

    Muito obrigado.

    ResponderExcluir
  14. Oi, Helen!

    Este post é por demais importante para que os visitantes não saiam do nosso blog pela lista de links. Muito obrigada pela dica!

    Só peço sua atenção para o item 3, onde se lê: target='_blank'(.) Este bendito pontinho deve estar atrapalhando a colocação do código pelos mais distraídos...

    ResponderExcluir
  15. Aline, em todos os tutoriais a parte de código a ser copiada é destacada com fundo verde. Se algum distraído não percebe isso merece mesmo quebrar cabeça até aprender a usar melhor o cérebro.

    O ponto final no trecho que você citou serve para finalizar a frase e ficará aí enquanto este blog existir.

    Volte sempre!

    ResponderExcluir
  16. Helen, por favor, rpeciso muito da sua ajuda. Eu consegui fazer todas as sugestões que você deu e deu certro. Exceto para o Gadget de RSS FEED. Eu tenho FEEDs na barra lateral de meu Blog e eles abrem na mesma janela, deixando meu blo para tras.

    Eu tentei substitui o código:

    "<"a expr:href='data:feedUrl'>"

    Por:

    "<"a expr:href='data:feedUrl' target='_blank'>"

    E não dá certo nem a pau.. Continua abrindo na mesma janela....

    Por favor, me ajude... agradeço muito...

    Gilberto

    ResponderExcluir
  17. Helen você me salvou! Estou procurando a dias uma dica destas. Em todos os blogs que olhava só ensinava a fazer isso em posts através do Live Writer, o que eu já sabia. Você deu uma explicação completa. Perfeito. Parabéns!

    ResponderExcluir
  18. Muito bom, fiz isso no meu blog e aproveitei e fiz tbm nos marcadores, so q nao com target mas com title, ai qndo a pessoa passar o mouse por cima de algum marcador vai aparecer o nome do marcador como title ou se fosse imagem como alt (texto alternativo).

    ResponderExcluir
  19. Olá , achei , mas não tem o código ....

    ResponderExcluir
  20. Orlando, Sp30/6/10 04:50

    Faz tempo que estava procurando o mesmo recurso target="_blank" para link de sites para meu blog. Achei. Obrigado

    ResponderExcluir
  21. nuss colega tem como não desisto

    aki não funfou mermo :(

    tentei de tudo

    também ja tirei esse -li- -li- e não deu em nada

    em title la coloquei o nome all
    e também não obtive resultado :(

    o que eu faço ?

    -b:widget id='LinkList1' locked='false' title='all' type='LinkList'-
    -b:includable id='main'-

    ResponderExcluir
  22. Helen,

    essa dica contribuiu bastante para resolvermos um probleminha que estávamos tendo no nosso site.
    Valeu!
    Abração,
    Vinicius Londero.
    www.grupovoz.com.br

    ResponderExcluir
  23. Oi Helen TUdo bem?
    Eu vi essa postagem sua aí,
    mais já sabia dessa função.
    Só que eu tô querendo fazer outra coisa.
    Eu quero Colocar um Comando no meu Blog que funciona +/- como Slide só que é um pouquinho mais interativo, mas não sei como fazer.
    Eu vi isso nesse blog: http://tutodetudo.blogspot.com/2008/11/trocar-imagens-aleatriamente-com.html e lá tem explicando tudo, só que eu queria fazer como ele lá na opção do exemplo, pra quando eu clicar ser direcionado para outra aba e assim poder visualizar as imagens 1 a 1.
    Só que tem um detalhe ele fala pra fazer isso em Gadget mais não sei como redirecionar gadget.

    espero que tenha entendi minha dúvida.
    Desde já agradeço.

    ResponderExcluir
  24. Deison,

    Não achei muito inteligente da sua parte pedir esclarecimento sobre um tutorial que não fui eu que escrevi.

    Não entendi sua dúvida, mas publiquei seu comentário porque pode aparecer alguém neste post com paciência e boa vontade, garanto que no momento essa pessoa não sou eu.

    Boa sorte!

    ResponderExcluir
  25. ESAAS DICAS SAO SIMPLESMENTE DEMAISSSSSSSSSS,SOU INOCIANTE NO BLOG,ACHEI DA HORA ESSAS DICAS,SAO BEM INSTRUTUVAS,PARABENS PELA POSTAGEM HELEN,UM ABRAÇO DE WANDER PUMA DJ,FLWWWWW

    ResponderExcluir
  26. Parabéns! Uma dica simples e direta. Funciona perfeitamente.

    ResponderExcluir
  27. Obrigado Helen, ajudou-me muito, estava com dificuldades para achar esta resolução.

    ResponderExcluir
  28. Muito Obrigado! Ellen. Esta dica me ajudou muuuiiitttoo!!! Sucesso!! Almir/Guarulhos.

    ResponderExcluir
  29. parabens muito obrigado ficou massa meu blog agora, pois antes abria as paginas na propria pagina do blog e assim pra voltarem nele era super dificil, agora ficou perfeito pois os links abrem em outra pagina.
    muito grato helen

    ResponderExcluir
  30. Nossa d+++! Muito obrigado Helen, simples e objetivo, funcionou perfeitamente. PARABÉNS.

    ResponderExcluir
  31. Amiga Helen, acho que só eu não consegui acertar, mudei inseri target='_blank' e não funcionou, sei que algo tá errado. abçs, depois vou tentar novamente.

    ResponderExcluir
  32. Você sabe se tem como fazer um código javascript abrir em nova aba?? Tipo eu tenho um código, mas quero que em vez dele aparecer em meu site, quero que quando as pessoas cliquem no link, ele abra uma nova aba, pop-up.

    ResponderExcluir
  33. Volverine, eu odeio pop-up, portanto creio que você nunca verá um tutorial sobre isso aqui, mas se você buscar no Google vai encontrar centenas.

    ResponderExcluir
  34. Legal Helen... parabéns pelo blog e pelos tutoriais bem claros e objetivos. GOOD JOB!!!

    ResponderExcluir
  35. Helen, não tem nada disso no meu código fonte! Só a parte do

    ResponderExcluir
  36. Gostei foi muito util
    http://jdsdownload.blogspot.com/

    ResponderExcluir
  37. Foi muito util

    Parabéns

    http://jdsdownload.blogspot.com/

    ResponderExcluir
  38. Muito bom, gostei desse, post sem duvida sensacional!!!

    ResponderExcluir
  39. Ola Helen, você não teria um javascript para abrir links de um determinado dominio em nova aba ?
    O meu caso é o seguinte, tenho um blog de downloads no mediafire e tenho mais de 2300 post com vario links do mediafire gostaria que me indicasse um link com javascript para abrir todos esses links em nova aba.

    (www.baixarmediafire.cc.cc)

    Desde ja Agradeço
    Att,
    Fernando Henrique de Oliveira

    ResponderExcluir
  40. Muito Obrigado ! Valeu pela dica ...

    ResponderExcluir
  41. Helen to com um problema coloquei um teste de conexao no meu blog do minhaconexao.com.br, depois que efetua o teste se o usuaria clicar no teste redireciona para o site do minhaconexao.com.br, não gostaria de forma nenhuma retir os creditos do site mas gostaria que o link abrisse em nova janela. queria saber se tem como obrigar os links de um determinada div abrir em nova janela, sem afetar os restantes que estão em divs diferentes

    ResponderExcluir
    Respostas
    1. Não entendi. Qual link você quer que abra em outra janela?

      Excluir
  42. gostei da dica e do site... muito legal

    ResponderExcluir
  43. Olá Helen, grata por todas as tuas dicas.
    Eu gostava que um widget de imagem abrisse numa nova janela, isso é possível?
    Com o código que aqui falas não dá ou pelo menos não estou a encontrar o local certo para o colocar.
    Grata pela tua atenção e disponibilidade.

    ResponderExcluir
    Respostas
    1. Carla, você tem que abrir o HTML do blog, marcar Expandir modelos de widgets e procurar pelo código específico para ver se é possível modificá-lo e inserir target="_blank".

      A melhor forma de encontrar esse código geralmente é pelo título do widget, se ele for inédito na página. Ao entrar no código use Ctrl + F para buscar o nome. O título do widget geralmente vem dentro da tag <h2>, mas pode ser outra se for um template personalizado.

      Excluir
  44. Valeu a dica, obrigado também postei no meu blog e deixe os créditos para ti valeu.

    ResponderExcluir
    Respostas
    1. Tenho medo quando escrevem isso. Espero que tenha postado a dica com suas próprias palavras. ;)

      Excluir
  45. Muito obrigado! Estou aos poucos melhorando meu blog. Essa dica foi fundamental. Parabéns pelo belo trabalho.

    ResponderExcluir
  46. Este comentário foi removido pelo autor.

    ResponderExcluir
    Respostas
    1. Cassio, sugiro que procure um tutorial no seu idioma nativo (inglês, alemão, seja lá qual for). Como você não domina português eu sequer consegui entender sua dúvida. Boa sorte!

      Excluir
  47. quero um codigo que ao clicar em "Postagens mais Antigas" abra a pagina normal do blog a que redireciona para as postagens mais antigas e que abra um link em nova aba tipo um link de outro blog que eu tenha para ele fica reconhecido kkk consegue esse codigo ?

    ResponderExcluir
  48. a e tambem tem o menu do meu blog que so pega quando vc passa o mouse bem no meio ou começo e não sei o que é pode me ajudar a solucionar esse poblema veja o blkog neste link brmtplaykillers.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Acho que desta vez eu entendi. Só funciona bem no meio do menu ou da palavra? Se for da palavra, é porque o "retângulo" do botão do menu está por fora do link e não o contrário. Vou tentar dar um exemplo:

      <div style='border:2px solid blue; padding:10px;' ><a>Palavra</a></div> - Assim o link está só na palavra, não no retângulo inteiro.

      <a style='border:2px solid blue; padding:10px;' >Palavra</a> - Assim o link está no retângulo inteiro.

      Excluir
  49. Muito boas dicas! Veja o meu blog: http://osversosdeamor.blogspot.com.br

    ResponderExcluir

Todos os comentários são moderados pela autora do blog.