Texto do link Como abrir uma janela popup no seu blog No Dicas Blog Pro

quinta-feira, 27 de junho de 2013

Como abrir uma janela popup no seu blog

pop-up para blogs
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 .
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  no código podem ser modificados de acordo com a sua vontade. Modifiquehttp://url_da_página_pop-up endereço completo da  que deverá abrir como pop-up. Modifique 200 de width=200 pelo tamanho da largura da página e 250 de height=250 pela . resizable=nodefine se a janela será redimensionável. Caso deseje permitir isto, modifique no por yes. Modifique o no de scrollbars=no  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áginaLayout – Elementos de página. Selecione Adicionar um gadget e na janela com as opções de gadgets que aparecerá escolhaHTML/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  = 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  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 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  na sua utilização.

Seja o primeiro a comentar ;)

Postar um comentário

Mais Lidos

relojes html html clock contador de usuarios online

  ©Dicas Blog Pro - Todos os direitos reservados.

Template by Dicas Blogger | Topo  

Related Posts Plugin for WordPress, Blogger...