Ajuda contra câncer
da minha filha Ana Isys
Ola meu nome e ANA ISYS GUERREIRO VINA, fui diagnosticada com câncer nos olhos também chamado de retinoplastia, e estou morando em São Paulo a menos de um mês, e preciso da sua ajuda para pagar os custos de taxi para ir ao hospital,remedios etc, custo de vida de Sao paulo e muito caro, você se pergunta, porque não pega o metro ou ônibus? e pelo motivo que já que estou fazendo a quimioterapia e minhas defesas ficam baixas.
da minha filha Ana Isys
Ola meu nome e ANA ISYS GUERREIRO VINA, fui diagnosticada com câncer nos olhos também chamado de retinoplastia, e estou morando em São Paulo a menos de um mês, e preciso da sua ajuda para pagar os custos de taxi para ir ao hospital,remedios etc, custo de vida de Sao paulo e muito caro, você se pergunta, porque não pega o metro ou ônibus? e pelo motivo que já que estou fazendo a quimioterapia e minhas defesas ficam baixas.
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:
<div align="center" id="parada" style="background-color: white; display: block; height: 453px; left: 383px; position: fixed; top: 120px; width: 499px; z-index: 100;">
<div style="text-align: right;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><a href="javascript: void(0)" onclick="document.getElementById('parada').style.display =
'none';">[FECHAR]</a>
</span></div>
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: large;"><a href="http://vaka.me/455907">Ajuda contra câncer </a></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: large;"><a href="http://vaka.me/455907">da minha filha <span style="color: red;"><b>Ana Isys</b></span></a></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: large;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://vaka.me/455907"><img border="0" data-original-height="255" data-original-width="272" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNVJe-3TPo8ZAjS7Q4KIgJECV9J7yHxN4poLtSPdU_Sa1tusoShxruPg-v4L72atRdXPtRv6YYmO-IgPAVKC80mchT3ank-XbRBvuZH3kyYjjeCBZNKuNXu7-SI4u810dvsNWJJ34D2P7a/s200/Sem+t%25C3%25ADtulo.jpg" width="200" /></a></div>
<br />
<span style="color: #cc0000;"><span style="font-family: "arial" , "helvetica" , sans-serif; text-align: justify;">Ola meu nome e ANA ISYS GUERREIRO VINA, fui diagnosticada com câncer nos olhos também chamado de retinoplastia, e estou morando em São Paulo a menos de um mês, e preciso da sua ajuda para pagar os custos de taxi para ir ao hospital,</span><span style="font-family: "arial" , "helvetica" , sans-serif; text-align: justify;">remedios etc, custo de vida de Sao paulo e muito caro,</span><span style="font-family: "arial" , "helvetica" , sans-serif; text-align: justify;"> você se pergunta, porque não pega o metro ou ônibus? e pelo motivo que já que estou fazendo a quimioterapia e minhas defesas ficam baixas.</span></span><br />
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: large;"><a href="http://vaka.me/455907">Contribua</a></span></div>
Esse será o código do link que abrirá sua DIV:
<a
href="javascript:void(0)"
onclick="document.getElementById('parada').style.display='block';">Exibir
pop-up</a>
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
<div
style="background-color: #6599A4; display: none; height: 482px; width:
806px; z-index: 100; left: 105px;
top: 171px; position: fixed;" id="seguidora" align="center">
<!--seu texto aqui, apague essa linha-->
</div>
código referente ao link da DIV Seguidora!
<a href="javascript:
void(0);"
onclick="document.getElementById('seguidora').style.display='block';">DIV
pop-up: Aparecer</a>
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.
Material obtido
https://abelhudosdainformatica.blogspot.com/2012/09/como-criar-um-popup-flutuante-para-o-blog.html
No hay comentarios.:
Publicar un comentario