Criando um PopUp que não é bloqueado pelo navegador e só aparece uma vez para o visitante

14 comentários
popup

Como criar um PopUp que não é bloqueado pelos navegadores e só aparece uma vez

Neste artigo, vamos explicar como criar um PopUp automático que os navegadores não bloqueiam e que só é exibido uma vez para o visitante.

Em muitos blogs você já deve ter se deparado com algum tipo de exibição de PopUp na inicialização e, ao navegar por outras páginas, este mesmo PopUP não é mais exibido.

Em sua maioria são PopUp's bonitos e bem desenvolvidos, criados com o intuito de captar emails ou apenas divulgar alguma publicidade interna ou externa, ou, simplesmente, mostrar algum artigo ou vídeo que se que dar um destaque especial.

Realmente, os navegadores não bloqueiam estes PopUp's. Testamos com o Google Chrome, Internet Explorer, Safari, Opera e Mozilla firefox.

Porque o PopUp só aparece uma vez para o visitante?

Dentro do conjunto de códigos que será passado logo mais abaixo, existe um comando em jquery que especifica para o navegador armazenar os dados do PopUP nos cookies e que não seja exibido novamente se estes mesmos dados forem encontrados. Ou seja, para ver o PopUp do tutorial abaixo, o visitante terá que limpar os cookies do navegador.

Essa técnica é usada para ganhar alguns cliques em determinado local ou captar algo, como um email, por exemplo, sem incomodar, deixando o blog amigável, tanto para os motores de buscas quanto para a navegação do visitante.

O PopUp que desenvolvemos possui uma borda simples que pode ser facilmente modificada desde que se tenha um pouco de conhecimento em "CSS" e pode ser inserido tanto em uma coluna lateral quanto direto no código fonte do blog. Em ambas as maneiras, ele será exibido no centro do seu blog desfocando o fundo e destacando o PopUp.

E, então, quer divulgar um banner, um vídeo, uma publicidade ou uma foto? Este é um ótimo PopUp para instigar sua criatividade, aumentar sua renda ou mesmo ganhar cliques ou fans.

Veja a demonstração abaixo:


popup


Tutorial - PopUp que só aparece uma vez e não é bloqueado no navegador

Para começarmos, é necessário que você veja a disponibilidade para inserção de scripts e html em seu blog, como área para Gadgets ou Widgets ou o código fonte do seu blog. Vamos seguir um passo a passo com o Blogger, porém a edição é igual para qualquer plataforma.

Primeiro, copie o código abaixo:


O código deve ser inserido, preferencialmente, dentro de um gadget. Na aba layout, clique em adicionar gadget. Em seguida, escolha a opção html/javascript e insira o código que você copiou.

No trecho escrito "Aqui é o que vai aparecer dentro do meu PopUp" refere-se ao conteúdo do blog que você que divulgar. Insira qualquer estrutura html Nesta Área. O PopUp está com as dimensões automáticas para se ajustarem ao conteúdo que será inserido dentro dele.

Este PopUp aceita códigos de incorporação embed, como vídeos do Youtube, Vimeo, etc.. assim como inframes de redes sociais, como o Facebook. Também é possível inserir um formulário, imagens nos mais variados formatos e players de músicas em html5.

Não é possível criarmos um tutorial para cada item a ser inserido no PopUp, até porque não há como saber a necessidade de cada pessoa. O que fazemos é elaborar o código, ensinar a modificar e inserir, destacar as áreas importantes e deixar você usar a criatividade em seu Elegante PopUp.

Aconselhamos deixar as dimensões como estão. Se houver necessidade de alterar a largura e a altura da box do PopUp que irá receber o seu conteúdo, você deve procurar pelos seguintes comandos no código mencionado acima:

$.colorbox({width:"auto", height:"auto",

<div style="width:auto;height:auto;

Altere somente as áreas destacadas em vermelho pela altura e largura que você achar necessário.

Em seguida, clique em salvar e clique em visualizar blog ou atualize a página do seu blog, que você verá o PopUp.

Caso queira ver novamente ou não tenha conseguido visualizar, limpe os cookies do seu navegador.

Não altere a estrutura. Qualquer mudança pode acarretar no mal funcionamento do PopUp.

Agora que você tem o PopUp, use sua criatividade e insira suas redes sociais, cadastro de feeds, publicidades, vídeos e mais!

O que achou? Deixe seu comentário!

14 comentários :

  1. Como faço para ele aparecer sempre para o visitante, e NÂO somente uma vez?

    ResponderExcluir
    Respostas
    1. na parte do código (document.cookie.indexOf('visited=True') substitua o 'True' por 'False'

      Excluir
  2. Boa tarde
    Já decidi depois de muito procurar achei. Muuuito obrigada. Só tenho uma dúvida no caso de eu deixar ele para aparecer (trocar o true por false) eu não vi "fechar" ele tem?
    E otimo tutorial, simples, e fácil.
    Ignês B. Salgado

    ResponderExcluir
  3. tem como deixar ele com uma imagem e com o X de fechar , falso, tipo quando clicar no x fechar, dai ele abre o anuncio do meu adsense.

    ResponderExcluir
    Respostas
    1. Olá Mulheres, eu achei uma solução pra isso, entre em contato que te passo.

      Excluir
    2. Boa noite.Também estou a procura desse "X",mas não uso adsense,quero testar em outra plataforma,se disponibilizar ficarei muito agradecido amigo.

      Excluir
    3. Oi James... só vi agora sua msg rsrs entra em contato que eu te passo se tiver precisando ainda...blz

      Excluir
  4. quero esse esquema de abrir com um x falso, que tem em varios blogs de download, ele ganham muito dinheiro com isso. http:game-vicio-android.blogspot.com.br esse é o meu blog em construção ainda. GameVicio Android

    ResponderExcluir
  5. tem como abrir uma pagina neste popup?

    ResponderExcluir
    Respostas
    1. Olá Pintou na Web... é onde está escrito no código (Aqui é o que vai aparecer dentro do meu PopUp) você colocar o endereço URL da página que vc quer que abra... ok

      Excluir
    2. Oi , na verdade só colocar o endereço da web não funcionou tive que colocar um script ali , mas deu certo Obrg

      Excluir
  6. Ótimo Blogger parabéns pelas Informações??

    ResponderExcluir
  7. Queria também saber como coloca esse tal "X"?, Obrigado.

    E Parabéns pelo blog

    ResponderExcluir

O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.