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.