domingo, 14 de dezembro de 2008

Abrir links externos em nova janela

Durante estes últimos dias, achei no site Dynamic Drive um script muito interessante, que muitos gostariam de ter em seus blogs. Em geral, quando queremos que links em nosso blog abram em uma nova janela, adicionamos o atributo target="_blank" no código do link. Porém, para não ter que fazer isto em todos os links, e deixar o leitor escolher se quer sair da página ou não, existe este belo script. Uma das coisas mais chatas para por num blog é fazer com que os links do próprio blog abram em outras janelas. E o script inclui esta opção... O script aparece assim:
Podem vê-lo na minha barra lateral. Se a caixa for marcada, com está na imagem acima, todos os links para outros blogs e sites abrirão em uma nova janela, ou aba, porém os links do Mestre Blogger continuarão na mesma janela. Tirando a marca da caixa, links externos também abrirão em nova janela. O melhor de tudo é que este excelente script é facílimo de instalar em seu blog, leva poucas modificações, e não sobrecarrega a página. Para instalá-lo em seu blog...:
1. Vá para o painel de seu blog. Entre na página Layout -- Elementos de página.
2. Clique em Adicionar um Gadget. Escolha a opção HTML/Javascript na janela pop-up que aparecerá.
3. Neste gadget, cole o seguinte script:

<script type="text/javascript">
//Open offsite links in new window script- http://www.dynamicdrive.com/
//Created: August 28th, 2007'
var ddwindowlinks={
//1)Enter domains to be EXCLUDED from opening in new window:
excludedomains: ["mestreblogger.blogspot.com"],

//2) Target for links that should open in a new window (ie: "_blank", "secwin" etc):
linktarget: "_blank",

//3) Specify operating mode ("auto" or "manual"):
mode: "manual",

//4) If mode is "manual", customize checkbox HTML to show to users (Preserve id attribute):
toggleHTML: '<form><input id="targetcheckbox" checked="checked" type="checkbox"/><label for="targetcheckbox">Abrir links exteriores em uma nova janela?</label></form>',

//5) If mode is "manual", enable user persistence so the state of the checkbox is remembered?
persist: true,

assigntarget:function(){
var rexcludedomains=new RegExp(this.excludedomains.join("|"), "i")
var all_links=document.getElementsByTagName("a")
if (this.mode=="auto" || (this.mode=="manual" && this.togglebox.checked)){
for (var i=0; i<=(all_links.length-1); i++){
if (all_links[i].hostname.search(rexcludedomains)==-1 && all_links[i].href.indexOf("http:")!=-1)
all_links[i].target=ddwindowlinks.linktarget
}
}
else{
for (var i=0; i<=(all_links.length-1); i++)
all_links[i].target=""
}
if (this.mode=="manual" && this.persist)
this.setCookie("dlinktarget", (this.togglebox.checked)? "yes" : "no", 30) //remember user setting for 30 days (set to -1 then reload page to erase cookie)
},

init:function(){
if (document.getElementById && this.mode=="manual"){
document.write(this.toggleHTML)
this.togglebox=document.getElementById("targetcheckbox")
this.togglebox.onclick=function(){ddwindowlinks.assigntarget()}
if (this.persist && this.getCookie("dlinktarget")!="")
this.togglebox.checked=(this.getCookie("dlinktarget")=="yes")? true : true
}
if (window.addEventListener)
window.addEventListener("load", function(){ddwindowlinks.assigntarget()}, true)
else if (window.attachEvent)
window.attachEvent("onload", function(){ddwindowlinks.assigntarget()})
},

getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
},

setCookie:function(name, value, days){
var expireDate = new Date()
//set "expstring" to either an explicit date (past or future)
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/"
}

}
ddwindowlinks.init()
</script>


Sim, a coisa é longa, mas não precisa se incomodar, pois é muito fácil de adicionar...

4. Modifique o trecho em vermelho do script para o endereço de seu blog. Lembre-se: o endereço não deve levar os atributos http:// ou www.
5. Salve o gadget e visualize o blog. Está feito!
Importante - Os créditos ao site http://www.dynamicdrive.com/ devem permanecer intactos para uso legal. Não os remova sob hipótese alguma. Fora isto, use o script à vontade que nada irá incomodá-lo.

17 comentários:

Anônimo disse...

Legal!

Já adicionei no meu blog de testes. Super fácil de colocar (e prático também). Mas como já me habituei (leia-se viciei) com o Windows Live Writer, escolho nele mesmo esta opção, que é bem fácil de usar também.

É um tipo de recurso que faz a diferença na navegação, né?

Um abraço.
Marcelo.

Gugatb disse...

Eu já conhecia o Dynamic Drive, muito bom este site, boa a dica sua, afinal nem todo mundo conhecia a página, eles disponibilizam coisas muito bacanas e de grande utilidade na minha opinião.

Um grande abraço, Gugatb.

Wagner Miranda disse...

Script muito massa. Adorei.

Anônimo disse...

Eu não sabia desse (target="_blank"). Ficava put
quando clicava num banner no meu blog e abria a página no lugar da minha. Testei aqui no meu blog e funfou direitinho. Isso pode ser feito em links nos posts? Como?
Valeu e abraços.

Drica disse...

Olá, tentei usar sua dica em meu blog e não deu certo além de aparecer "erro de página"...

www.cantinhodasartess.blogspot.com

Unknown disse...

Muito bom! Estava mesmo precisando disso, já que tinha adicionado o bloqueio de mouse... =]

Gabriel Martins disse...

não funciona, ja é o segundo script q testei e não funciona de jeito algum, alguém pode me ajudar ? preciso muito...
meu e-mai.: gabrielmartins2010@bol.com.br

Dreamer disse...

Cara... muito objetivo, eficaz e sóbria a dica! parabéns!

lohgj disse...

obrigado pelo script funcionou perfeitamente

lohgj disse...

EU NEM SOU DE COMENTAR EM TUTORIAIS! mas como tentei varios scripts jquerys etc e nenhum funcionou excepto este,logo ocorre-me que mereces um« o b r i g a d o

Anônimo disse...

Bem interessante!

Anônimo disse...

Cara valeuzão, tava precisando disso. !!!!!!!!
Me ajudou muito! parabéns pelo post!!!!

Marco disse...

Muito bom! Já estou usando em meio site.

Design LOM disse...

muito bom!!! estava a procura a muito tempo!!!
obrigado!
http://lommundo.blogspot.com/

InuKaulitz disse...

Valeu gente, muito, mas muito obrigada mesmo!!!

TL;DR disse...

Cra muito bom obrigado pela dica!!!!

Unknown disse...

Excelente, tava precisando muito, muito obrigado, funciona perfeitamente, já coloquei no meu blog, o que precisar é só falar mano, obrigado.

http://dinheironoponto.blogspot.com.br/

Faça o seu comentário!

Obrigado por deixar seu comentário! Para outros assuntos veja também: