Abelhudos da informática

Um blog onde você encontrará curiosidades, dicas, tutoriais e notícias sobre informática

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.

Marcadores: ,