25 de set de 2012

Como criar um pop-up flutuante para o blog

Muitas vezes queremos ter um elemento pop-up para exibir algum conteúdo útil em nosso blog, porém não queremos incomodar os nossos visitantes com aquilo que nós mesmo não gostamos, a saber, pop-ups invasivos que abrem sozinhos!

Nesse tutorial, ensinarei a criar um DIV que será exibida como pop-up, flutuando sobre os demais elementos da sua página.
Veja o exemplo clicando no link abaixo:

DIV pop-up: Aparecer

Nosso código consistirá em um DIV oculto, onde, ao clicar em um link para abrir, ela será aberta em forma de uma pop-up flutuante, e, ao clicar no link para fechar, o qual estará nopop-up, ela será ocultada novamente.

Nesse primeiro caso, trata-se de uma DIV pop-up que ficará no mesmo lugar, independente de você rolar a página a baixo ou não.

Esse é o código da DIV:






Esse será o código do link que abrirá sua DIV:



Atributos do código

Para quem não sabe, esses atributos que estamos usando nesse tutorial se trata do CSS. No caso, utilizamos o CSS com suas definições dentro de Style.

DIV:
 Será a janela que aparecerá quando você clicar no link. Ele é um elemento do HTML.

O Style do nosso código poderá ser definido em:

Background-color: Esse é o código para que você possa definir a cor de fundo da sua DIV pop-up. Você poderá defini-la como White (branco), Black (Preto), Red (vermelho), Blue (azul), entre outros. Também você poderá colocar aquele código de cores de HTML. Você poderá encontrar a lista de cores em código HEX na MXStudio.

Display: Esse é o atributo responsável por ocultar ou não a nossa Div, sendo que "Block" torna o elemento visível, ao passo que "None" o torna ínvisível.

Height e Width: nesses dois, você definirá a altura e largura para a sua DIV. Height é a altura, e Width, a largura.

Z-index: esse código definirá por um número determinado a ordem de sobreposição da sua DIV. No caso, se você tiver um elemento em sua página com z-index: 99, use z-index: 100.

“Position: Absolute;” :  Esse código fará com que a DIV tenha um aspecto de janela. Se você estiver usando o KompoZer para editar, você passará poder editar essa DIV  “em tempo real”  quando você pôr esse código nela. É recomendável que, se você for personalizar algo e não tiver muita habilidade com códigos HTML, sugiro que use um bom editor de HTML.

Left e Top: left: númeropx; top: númeropx tratam-se das posições da sua DIV em relação a página. Como  no nosso caso a DIV flutuará sobre a página, ela será usada para posicionar o local onde essa DIV flutuará.   Align: Esse será o alinhamento. Ele poderá ser definido em Justify, Center, left e right.

Id: será usada para nomear sua div, a fim de que, quando clicar no link, esta seja chamada (através do nome do Id) pelo link, que contém o código para torná-la visível. No caso, a id da nossa primeira Div é 'Parada'.


Pop-up flutuante que acompanha o Scroll da página

Para que a sua Div Pop-up possa flutuar e acompanhar o scroll da página, (isto é, acompanhar a página quando a pessoa rolar o mouse pra baixo ou pra cima), basta trocar o atributo "position: absolute" por "position: fixed".


DIV pop-up: Aparecer


código referente ao link da DIV Seguidora!



Observações: Para implementar a pop-up numa página específica do Blogger, seja ela página de postagem ou página estática, você poderá adicionar os códigos simultaneamente no html da postagem do Blogger.
Para adicionar o conteúdo em todo o blog, isto é, abrir em todas as páginas que alguém acessar, basta você inserir aquele Gadget HTML/JAVASCRIPT.
O código também funciona normalmente se você inseri-lo no HTML de quaisquer blogs de outras plataformas.

Se você tiver alguma dúvida ou sugestão, deixe abaixo nos comentários.

Wallace Maxters

Sobre o autor

Wallace de Souza Vizerra, Wallace Maxters , é um amante da informática e criou esse blog para ajudar as pessoas a solucionar problemas comuns do seu PC, além de compartilhar diversas curiosidades sobre esse fantástico mundo da computação.




Obrigado pelo seu comentário, é muito importante para o blog.

Regras de moderação:

- Não serão publicados comentários que contenham spam, nem os que pedem vistas a sites que não tenham a ver com o conteúdo do post.
- Não use palavras de baixo meretrício; você pode enfatizar seu comentário sem usar palavrões.
- Se você não possui uma das contas necessárias para comentar, basta usar as opções anônimo ou nome/url . E lembre-se que ser anônimo não é ser mal educado.

15 comentários :

  1. Wallace, procurei em vários sites por um código para inserir pop-ups flutuantes em uma página e estava sendo uma tarefa difícil... Até encontrar este, no seu blog!

    Funcionou perfeitamente para o que eu precisava.

    Parabéns e obrigado!

    ResponderExcluir
    Respostas
    1. Que bom que tenha sido útil para você, Régis!

      Parabéns, porque usar uma pop up flutuante realmente é uma escolha melhor do que usar aquelas que abrem uma outra página. Particularmente, detesto visitar um site que enche minha tela de propagandas ou janelas invasivas.

      Obrigado pela visita e comentário! Desejo que os tutoriais do Abelhudos da Informática possam ajudar sempre mais e mais!

      Excluir
  2. cara onde eu coloco os codigos??

    ResponderExcluir
    Respostas
    1. Bom dia, Denilson!

      Você deve colocá-los exatamente no Html da página.
      No caso do Blogger, você pode colocar em uma postagem específica, como é o caso dessa; ou então, diretamente no template. Vale lembrar que o template do Blogger é linguagem XHTML e não HTML. Portanto, colar esse código no template do Blogger pode gerar erros.
      Sugiro a você, Denilson, que coloque os códigos em gadget HTML/JAVASCRIPT na aba Layout do Blogger, pois assim você fará com que ela abra em todas as páginas de postagem do seu blog!

      Abraços, cara! Bom final de semana!

      Excluir
  3. A medida que vamos aprendendo, vamos aprimorando o nosso conhecimento.
    Por isso, nesta data, 18/01/2013, modifiquei todo o conteúdo da postagem, para facilitar a implementação do código!

    ResponderExcluir
  4. Emº lugar muito obrigada! Consegui colocar de primeira (e sou meio tapada pra isso rs)
    Tenho uma dúvida: dá pra bloquear o aparecimento do pop up? porque no meu site todas as páginas ficam no template geral (que é único lugar que deu pra por o código) ai fica aparecendo toda hora e irrita a beça. Queria que ele aparecesse só na primeira vez que a pessoa entrasse no site, saca? sem abrir de novo quando ele clica em outra aba...

    ResponderExcluir
  5. Obrigado, está muito bem explicado! Fiz e deu certo, foi super legal!

    Agora estou quebrando a cabeça para fazer um popup, que quando o visitante entrar no meu blog e clicar em qualquer parte faça, abrir automaticamente outra janela [url]

    Passei dias dias procurando, mais não nada que funcione no blogger, pode me ajudar?

    Obrigado

    ResponderExcluir
    Respostas
    1. Olá, Leonardo.

      Vê se serve:

      Na tag head, você coloca:

      <script type='text/javascript'>
      function pop(){
      window.open('http://www.abelhudosdainformatica.com.br', 'Abelhudos', 'width=300, height=300');
      }
      </script>

      aí você acrescenta na tag Body:

      onload="pop()";

      Excluir
    2. Esse código acima faz com que a função pop (que contém o url da página que será aberta), quando chamada por Onload (evento que executa uma função ao carregar uma página).

      Assim, se você implementá-la na tag <body> do Blogger, abrirá a nova aba em qualquer página de postagem.

      Excluir
  6. tipo eu tenho pagina principal em php e tenho um popup. quando o camarada clicar no link do popup a pagina principal bloqueia que so será premitido fechando a popup. Como eu faço isso?

    ResponderExcluir
  7. Não estou conseguindo colocar um xat dentro deste popup, poderia me ajudar?

    ResponderExcluir
    Respostas
    1. Olá, Jeffeson!
      O chat é em flash? Se for, existem alguns problemas de sobreposição entre o flash e os elementos HTML.
      Qualquer coisa, me mande o código do chat via e-mail!

      Excluir
  8. Finalmente um código simples e útil de pop-up flutuante!
    Por acaso existe uma maneira de fazer o pop-up aparecer apenas uma vez por visita? Exemplo: abrir o pop-up através de qualquer página que o visitante chegar ao blog, mas não abrir depois que ele for visitando outras páginas do blog.

    Obrigado Wallace!

    ResponderExcluir
  9. olá gostaria de sua ajuda. Estou precisando de um popup para colocar o xat do meu blog de modo que a pessoa abra ele quando quiser por um botão. (eu já vi em um blog e não consigo encontrar o código) onde eu vi quando se abre o xat fica assim o endereço: endereçodoblog.blogspot.com.br/#thexat..... será que você pode me ajudar? :/

    ResponderExcluir
  10. Amigo vc é o cara faz muito tempo que estou atraz disso. obg

    ResponderExcluir