terça-feira, 25 de novembro de 2008

Como montar uma janela pop-up

Bem, anteriormente já havíamos postado algumas dicas sobre as janelas pop-ups em blogs, mas agora tudo vai junto com algumas dicas novas e está mais fácil de acompanhar.

Os pop-ups são estas janelinhas que aparecem automaticamente quando você entra em algum site (se você estiver com o bloqueador de pop-ups desativado) e também ao ser clicados alguns tipos de link. Aqui vamos mostrar os três tipos de pop-up principais.


n° 1 - Modo automático simples

Descrição: Este é o modo simples de pop-up que aparece tão logo carrega o blog em que ele está instalado (automaticamente). Se você tiver o bloqueador de pop-ups ativado eles não funcionarão em seu computador.

Código:

<script language="javascript">window.open('http://url_da_página_pop-up','Info','width=200,height=250,scrollbars=no,resizable=no,status=no,left=100,top=47');
</script>

Modificações no código:

Todos os trechos mostrados em verde no código podem ser modificados de acordo com a sua vontade. Modifique http://url_da_página_pop-up pelo endereço completo da página que deverá abrir como pop-up. Modifique 200 de width=200 pelo tamanho da largura da página e 250 de height=250 pela altura. resizable=no define se a janela será redimensionável. Caso deseje permitir isto, modifique no por yes. Modifique o no de scrollbars=no para yes caso você queira que a janela tenha barras de navegação.


Como adicionar:

Após acessar o painel de sua conta no blogger, vá para a página Layout -- Elementos de página. Selecione Adicionar um gadget e na janela com as opções de gadgets que aparecerá escolha HTML/Javascript. A seguir, cole o código do pop-up no gadget e, após modificar os campos desejados, salve o gadget e visualize o blog. Este código também pode ser adicionado em uma postagem qualquer.


n° 2 - Modo automático avançado

Descrição: Praticamente o mesmo pop-up anterior, porém desta vez o código contém um sistema de cookies que impede que o pop-up abra mais de uma vez na mesma janela. Após ter aparecido uma vez você poderá atualizar a página quantas vezes quiser que o pop-up não será ativado novamente.

Código:

<script>

function openpopup(){
var popurl="http://url_da_página_pop-up"
winpops=window.open(popurl,"","width=200,height=250,")
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
onset = document.cookie.indexOf(search)
if (onset != -1) {
onset += search.length
end = document.cookie.indexOn(";", onset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(onset, end))
}
}
return returnvalue;
}
function loadornot(){
if (get_cookie('poppedup')==''){
openpopup()
document.cookie="poppedup=yes"
}
}
loadornot()
</script>

Modificações no código:

Modifique http://url_da_página_pop-up pelo endereço da página que abrirá em pop-up. Modifique o 200 de width=200 para o tamanho da largura da janela e 250 de height=250 para a altura.

Como adicionar: Siga os mesmos passos do modo anterior.



n° 3 - Modo OnClick
Descrição: A janela a ser aberta é exatamente como a do n° 1, porém ativa-se ao ser clicado um link. Alguns bloqueadores de pop-ups não funcionam com janelas clicadas.

Código:

<a onclick="window.open('http://url_da_página_pop-up','Info','status=yes,scrollbars=yes,resizable=yes,width=200,height=250,left=100,top=47');" href="javascript:void(0)">Texto do link</a>


Modificações no código: As modificações no código também são como as do exemplo n° 1, exceto pelo trecho Texto do link, que você modificará para o texto do link que abrirá a janela. javascript:void(0) é o que aparecerá na barra de status. Não haverá diferença prática modificando-se este último trecho.
Como adicionar: Esta forma de pop-up pode ser adicionada na barra lateral (seguindo-se os passos do exemplo n° 1) ou numa postagem qualquer.



n° 4 Modo OnMouseOver

Descrição: Este modo é quase exatamente igual ao n° 3, sendo que a única diferença é que ele é ativado ao passar-se o mouse sobre o link (onMouseOver), e não ao ser clicado, como no exemplo anterior.

Código:


<a onmouseover="window.open('http://url_da_página_pop-up','Info','status=yes,scrollbars=yes,resizable=yes,width=200,height=250,left=100,top=47');" href="javascript:void(0)">Texto do link</a>


Modificações no código: Modifique tudo como no exemplo n° 3.

Como adicionar: Também este código pode ser adicionado como no n° 3




E aí você tem os principais modos de pop-up. No entanto, quanto ao pop-up automático, lembre-se de não exagerar com isso porque se usado demasiadamente pode incomodar seus visitantes e fazê-los fechar o blog o quanto antes. Também o modo onMouseOver pode ser muito irritante, por isso tome cuidado na sua utilização.

18 comentários:

Baixarada.blogspot.com disse...

Cara, Você é 10!
Esta postagem caiu do céu tava procurando a dias mas os sites que eu encontrei não explicavam tão bem. Parabéns!!!

Reginaldo Santos disse...

Cara, parabéns. Procurei diversas dicas para encontrar essa, que serviu legal. Inclusive aprendi mais sobre os tipos de poupup. Valeu

Vinicius disse...

down2up.blogspot.com

Po cara vlw mesmo

Anônimo disse...

Nesse n° 2 - Modo automático avançado

Tem como configurar para o popup abrir 1 vez por dia?

E algum automatico que drible o bloqueador de pop up?

No site clubedaputariabr . com
Tem um codigo obfuscado que faz com que todos os links do site virem popup OnClick q so abrem 1 vez por dia nesse esquema de cookie

cassiano disse...

exelente parabens!!!! "puxando musicas"

Unknown disse...

muito bom... ajudou muito..vlws

Anônimo disse...

como colocar esta popup na postagem com um link de download e com um botao

Edson Ferreira da Silva disse...

Eu queria um pop up que apenas mostrasse um recado, não abrisse uma página, logo ao abrir o blog.

Radio Correio ON disse...

Olha vc está de parabéns, pois é a primeira vez que vejo um conteúdo tão bem explicado e isso q eu já tentei fazer uma janela popup a dias...mas totalmente explicado somente aqui no teu blog..parabéns e um ótimo trabalho..vou tentar fazer funcionar no meu..Att kiko abraço.

Guia-ATUAL disse...

óohh mestre, muito bommm.. vlw
www.guia-atual.com

Anônimo disse...

muito bom cara , gostei demais

Bruno disse...

Mestre, como coloco aqueles pop-ups que conseguem passar pelo bloqueador de pop-up, pois tem sites que passam tranquilamente pelo bloqueador de pop-up. ensina aí amigo, por favor! é por uma boa causa... Eu tenho um site e para o player funcionr tem que ser aberto outra pagina pelo menos uma vez a cada acesso, caso contrario aparece uma mensagem de "acesso negado". Olha aki o meu blog: http://addoisriachos.blogspot.com.br/ e aki o a pagina que tem que ser aberta para o player funcionar: http://myradiostream.com/addoisriachos

Anônimo disse...

Nota 10 para esta postagem. Estou usando a janela popup de n° 2 - modo automatico avançado. Só que quando abre o blog a janela está ficando no meio na parte de cima. Como faço para deixar a janela aparecendo no lado esquerdo na parte de cima?


Grato, Rosimar

Anônimo disse...

MIGO TEM COMO COLOCAR UMA IMAGEM NO LUGAR DO TEXTO? OU SEJA A PESSOA CLIKAR NA IMAGEM AI ABRE A JANELA??

Anônimo disse...

Olá colega, muito bom os códigos e mais ainda as suas explicações. Se puder me ajudar, eu agradeceria, o meu caso é o seguinte, precisaria de um pop-up que abrisse automaticamente ao abrir qualquer página, e que fosse aberta somente uma vez, só vindo a abrir novamente se a pessoa fechar o site e depois entrar novamente, mas o ppop-up precisa ficar aberto, e a pessoa navegar a vontade no site, e o pop-up permanecer aberto.

Anônimo disse...

Para a popup abrir no fundo da pagina principal, que abriu a popup ao ser clicada, tem como fazer???

Anônimo disse...

como eu posso inserir isto numa imagem?

Sil Campos disse...

Olá mestre! Eu preciso de um codígo para que uma pop-up seja aberta em determinado horário. Como faço????...pode me ajudar? Há a possibilidade de incorporar horário de abertura e fechamento dentro dos códigos que vc descreveu acima? Please....
Agradeço desde já!

Faça o seu comentário!

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