Um dos princípios básicos da internet é a liberdade. O leitor é quem escolhe o que quer e o que não quer ver. Tentar interferir neste direito de escolha para promover um site ou blog pode ter um efeito contrário ao desejado.
Mas, convenhamos, uma janelinha popup até que tem um efeito interessante, não é? (desde que não abra automaticamente nem ao passar o mouse sobre um link). Um exemplo é esta janela que só se abre se o leitor clicar no link. Na verdade não é uma janela popup convencional porque ela se abre sobre a janela principal em outra camada (layer). Nela podemos adicionar tanto imagem quanto texto.
Abaixo temos o código:
As dúvidas podem ser esclarecidas nos comentários do próprio código. Apenas duas observações: a imagem background.png é a responsável pela transparência da área externa da janela e a imagem close.png é o botão de fechamento da janela. Hospede as duas imagens e substitua seus respectivos links no código.
Juarez,
ResponderExcluirComo se tira o "clicar aqui" e como colocar um tipo mexeu o mouse no blog abre o popup só 1 vez.
Eu vi isso só que era o Popup Domination e é caro demais.
Olá! Para abrir a popup quando o mouse passar sobre o link procure no código pela linha abaixo:
Excluir<a href="javascript:displayPopup('ImageBox')">Clique aqui</a> para abrir a janela <i>popup</i>
Substitua por:
<a href="javascript:displayPopup('ImageBox')" onmouseover="javascript:displayPopup('ImageBox')">Clique aqui</a> para abrir a janela <i>popup</i>
Para abrir a popup ao movimentar o mouse sobre um texto qualquer, substitua por:
<p onmouseover="javascript:displayPopup('ImageBox')">TEXTO AQUI</p>
No meu site o icone do fechar fica sobreposto, então tive que colocar para fechar quando clicar na imagem também.
ResponderExcluirhttp://www.pratiqueaventura.com.br/p/raftingempresas.html
Esqueceu de dizer onde aplicar esse código... :(
ResponderExcluirÉ verdade! Peço desculpas pela falha! O código HTML deve ser adicionado entre as tags <body> e </body> no local em que o link para a janela popup deve aparecer. O CSS pode ser adicionado em qualquer lugar da folha de estilos do site ou blog. No caso do blog, HTML e CSS podem ser adicionados em um widget e, até mesmo, em uma postagem. Naturalmente, no último caso, a janela popup só aparecerá na própria postagem.
ExcluirJuarez meuquerido como faço para colocar no modo altomatico?
ResponderExcluirAdicione o evento onload na tag <body>. Assim:
Excluir<body onload="javascript:displayPopup('ImageBox')">
Oi Juarez, Obrigado pelas dicas.
ExcluirE como faço para ele se tornar automático em widget do blogger, na lateral
da página? Novamente Muito Obrigado
Olá! Se entendi direito, você quer que a janela se abra sobre um widget na barra lateral do blog e não no centro da tela. Se é isso, é preciso apenas uma alteração no CSS como mostrado abaixo:
Excluir#ImageBox {
position: fixed; /*ALTERAR PARA "position: relative"*/
top: 0px;
left: 0px;
z-index: 999;
height: 100%;
width: 100%;
background-image: url(http://sites.google.com/site/juarezlourenco/background.png);
display: none;
overflow: auto;
}
Para que a janela não fique muito grande e crie barras de rolagem, procure pela linha abaixo no código HTML e altere a largura (width) para um valor compatível com a largura da sidebar.
<table width="500" border="0" cellspacing="20" cellpadding="0">
Também é preciso alterar as dimensões da imagem (caso adicione uma) na linha abaixo:
<img src="" height="500" width="400" alt=""/ >
Com o evento onload a janela se abrirá toda vez que á página é carregada. Para abrir uma única vez, não sei como fazer (!), acho que é com JavaScript.
Juarez, em primeiro lugar, Muito Obrigado por responder tão prontamente a minha pergunta, são pessoas como você que fazem o dia a dia mais fácil!!
ExcluirVeja bem, eu pensei em colocar os códigos em um widget html, esses que vc põe na barra lateral ou no fim da página, o seus códigos estão perfeitos, mas eu gostaria que abrisse sozinho, que quando acessassem já viriam o Banner. E sim, apenas uma vez, eu coloco os códigos que vc me passou mas eles não abrem automaticamente, é possível? Novamente Obrigado
Bom, acredito que seja possível mas não posso ajudá-lo simplesmente porque não tenho domínio total do tema!!! Obrigado pelos elogios e pela compreensão.
ExcluirOi Juarez é que você fala em colocar o código body onload="javascript:displayPopup('ImageBox')"
ExcluirIsso seria para ele abrir sozinho? não? Obrigado e desculpe pela insistência.
Olá! Sim, isso mesmo. Pegue o código mostrado na postagem e remova a linha abaixo:
Excluir<a href="javascript:displayPopup('ImageBox')">Clique aqui</a> para abrir a janela <i>popup</i>.
Adicione um gadget para códigos HTML e JavaScript (procure na lista de gadgets por "HTML/JavaScript") e cole o código sem a linha acima.
Procure no modelo (template) de seu blog pela tag <body>. Você encontrará algo assim (não necessariamente igual):
<body expr:class='"loading" + data:blog.mobileClass'>
Adicione o evento onload na tag <body> como mostrado a seguir e salve o modelo:
<body expr:class='"loading" + data:blog.mobileClass' onload="javascript:displayPopup('ImageBox')">
Assim a janela popup deve abrir automaticamente quando o blog for carregado. O problema é que abre toda vez que uma página é carregada (qualquer página) se transformando em um problema grave, A solução desse problema, fazer a janela abrir uma única vez, é que está além dos meus conhecimentos.
Espero ter sido útil e estou a disposição no que eu puder (e souber) ajudar.
Muito Obrigado!!!!! e Bons ventos...
ExcluirGrande Juares, Obg pelas aulas.. Meu querido nao consegui colocar a janela altomatica me manda detalhes do codigo.. desde já agradeço...
ExcluirLocalize a linha abaixo no código mostrado na postagem e remova-a.
Excluir<a href="javascript:displayPopup('ImageBox')">Clique aqui</a> para abrir a janela <i>popup</i>.
Copie o restante do código e coloque no blog (pode ser em um gadget para HTML/JavaScript).
Adicione o evento "onLoad" na tag <body> do blog desta forma: localize a tag <body> no código-fonte do modelo do blog.
Você encontrará algo assim (não necessariamente igual):
<body expr:class='"loading" + data:blog.mobileClass'>
Adicione o evento "onLoad" como mostrado abaixo:
<body onload="javascript:displayPopup('ImageBox')" expr:class='"loading" + data:blog.mobileClass'>
Agora a janela popup se abrirá automaticamente no carregamento da página.
Orçamento!
ResponderExcluirAmigo bom dia!
Por favor!
Se você tiver por aqui e tiver paypal eu posso pago-lo pelo serviço,para implementar no meu blog com urgencia.
Por favor entre em contato,e se o valor for razoavel peço que instale nos meus proximos 2 blogs que no momento esta em manutenção!
www.opoderdamentepositiva.com
Olá! Apesar de ter este blog sobre desenvolvimento e personalização do blogger não trabalho com isso! Atualizo-o (?) somente por diversão e nas horas vagas. Agradeço pela compreensão e reconhecimento do meu trabalho. Obrigado!
ExcluirJuarez Muito Obrigado!!! Deu certo e eu alterei (na orelhada.rs) alguns códigos e ele está
ResponderExcluirabrindo...Valeu!! Se precisar de algo fico a disposição!@!
Oi fofinho ! Por favor poderia me dar uma força,quanto a implementar a janela no meu blog meu rei?
ExcluirPor favor descreva para mim como você,conseguiu,em que parte do script fez a modificação para mim proceder da mesma maneira.
Essa è a unica janela modal com um fundo elegante em que eu posso colocar uma transparencia,e um formulario inteiro sem encomodar o visitante!
Fico no aguardo
Muito Obrigada!
Queria colocar popup ao você clicar em uma imagem da galeria do meu blog. Porém eu não estou conseguindo colocar Popup diferentes para cada imagem. Eu clico na segunda, terceira, quarta... e abre sempre a primeira. Eu tentei mudar o ID de cada uma para dar uma identificação diferente, mas também não funcionou. Você pode ajudar?
ResponderExcluirOlá! A solução que encontrei para o seu problema foi colocar uma classe e uma ID nas DIVs das imagens e também repetir o JavaScript para cada uma delas (deve ter uma solução mais simples). O exemplo abaixo mostra como fica o código para duas imagens. Tem algumas diferenças em relação ao código antigo, inclusive no CSS, mas é basicamente a mesma coisa. Com um pouco de adaptação dá para chegar aos resultados esperados.
Excluir<style type="text/css">
.POPUP {
position: fixed;
top: 0;
left: 0;
z-index: 998;
height: 100%;
width: 100%;
background-image: url(https://sites.google.com/site/juarezlourenco/background.png);
overflow: auto; /*Barras de rolagem*/
}
.borda_janela { /*BORDA DA JANELA*/
background: #00923e none repeat scroll top left;
border-radius: 12px;
padding: 12px;
}
.tabela {
position: relative;
}
.fechar { /*BOTÃO FECHAR*/
position: absolute;
top: -13px; /*Posição veritical do botão*/
right: -13px; /*Posição horizontal do botão*/
}
.conteudo_janela { /*JANELA*/
background-color: #ffffff; /*Plano de fundo da janela*/
overflow: hidden;
}
.cabecalho { /*TÍTULO DA JANELA*/
background: #00923e none repeat scroll top left; /*Plano de fundo*/
font: normal normal 12px 'Trebuchet MS', Trebuchet, sans-serif; /*Fonte*/
color: #ffffff; /*Cor da fonte*/
padding: 2px;
text-align: center; /*Alinhamento do texto*/
}
.area_texto { /*TÍTULO DA JANELA*/
background-color: lightblue; /*Plano de fundo*/
font: normal normal 12px 'Trebuchet MS', Trebuchet, sans-serif; /*Fonte*/
font-size: 82%; /*Tamanho da fonte*/
color: #333333; /*Cor da fonte*/
padding: 0 10px 10px;
text-align: center; /*Alinhamento do texto*/
}
</style>
Não coube todo o código (limite de 4096 caracteres rsrs!). Aqui está mais uma parte.
Excluir<!-- IMAGENS -->
<a href="javascript:displayPopup1()" title="Imagem 1">Visualizar imagem 1</a>
<br />
<br />
<a href="javascript:displayPopup2()" title="Imagem 2">Visualizar imagem 2</a>
<br />
<br />
<!-- IMAGEM 1 -->
<script language="JavaScript">
function displayPopup1(alert_MSG) {
var detail = document.getElementById('Box1');
detail.style.display="block";
}
function closePopup1(alert_MSG) {
var detail = document.getElementById('Box1');
if (detail.style.display=="block")
{
detail.style.display="none";
}
}
</script>
<div id="Box1" class="POPUP" style="display: none;">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="borda_janela">
<div class="tabela">
<div class="fechar">
<a href="javascript:closePopup1()"><!-- FECHAR IMAGEM 1 -->
<img src="https://sites.google.com/site/juarezlourenco/close.png" width="24" height="24" alt="Fechar" border="0" />
</a>
</div>
<div class="conteudo_janela">
<table width="560" border="0" cellspacing="10" cellpadding="0">
<tr>
<td>
<div>
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td class="cabecalho">
Selena Gomez
</td>
</tr>
<tr>
<td class="area_texto">
<br />
Selena Marie Gomez (born July 22, 1992) is an American actress, singer, and fashion designer. She is known for portraying Alex Russo, the protagonist in the Emmy Award-winning television series Wizards of Waverly Place. She subsequently ventured into feature films and has starred in the television movies Another Cinderella Story, Wizards of Waverly Place: The Movie, and Princess Protection Program. She made her starring theatrical film debut in Ramona and Beezus. (<a href="http://en.wikipedia.org/wiki/Selena_Gomez" title="Wikipedia" target="_blank">See more...</a>)
<br />
<br />
<img src="http://lh4.googleusercontent.com/-XlP5Eq9ZhFA/USJbojrvr6I/AAAAAAAADWo/sf2lUKQkjQc/I/selena-gomez.jpg" height="500" width="400" alt="" />
<br />
<br />
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
E aqui o restante.
Excluir<!-- IMAGEM 2 -->
<script language="JavaScript">
function displayPopup2(alert_MSG) {
var detail = document.getElementById('Box2');
detail.style.display="block";
}
function closePopup2(alert_MSG) {
var detail = document.getElementById('Box2');
if (detail.style.display=="block")
{
detail.style.display="none";
}
}
</script>
<div id="Box2" class="POPUP" style="display: none;">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="borda_janela">
<div class="tabela">
<div class="fechar">
<a href="javascript:closePopup2()"><!-- FECHAR IMAGEM 2 -->
<img src="https://sites.google.com/site/juarezlourenco/close.png" width="24" height="24" alt="Fechar" border="0" />
</a>
</div>
<div class="conteudo_janela">
<table width="560" border="0" cellspacing="10" cellpadding="0">
<tr>
<td>
<div>
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td class="cabecalho">
Spotify
</td>
</tr>
<tr>
<td class="area_texto">
<br />
O Spotify é um serviço de música digital que dá acesso a milhões de músicas.
<br />
<br />
<img src="http://1.bp.blogspot.com/-M4YV7-R2F1E/U1PUWbiWrOI/AAAAAAAAJFk/2rlOJMgkrvY/s500/spotify-logo.jpg" height="194" width="500" alt="" />
<br />
<br />
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
Eu pensei em fazer isso, mas parei em 10% da tentativa, era muita coisa. Muito Obrigado e Parabéns, ótimo blog, ajudou muito! Sucesso!
ResponderExcluirFuncionou perfeitamente! E eu ainda fiz alterações. O div "fechar" agora não é mais um X. Coloquei ele fora do com width/height de 100%, e agora se você clicar na parte escura do Popup você sai da imagem. Da uma passada la no Blog pra dar uma olhada e você quiser. E não liga pras imagens kk a ideia é passar isso pras pessoas msm kk. Novamente, Obrigado. e o blog é esse: http://ncknvs.blogspot.com/p/galery.html
ResponderExcluirRealmente, ficou muito bom! Parabéns!
ExcluirComo faço pra colocar 2 imagens dentro do popup e cada imagem com um link? obrigado
ResponderExcluirLocalize a linha abaixo no código de exemplo:
Excluir<img src="http://lh4.googleusercontent.com/-XlP5Eq9ZhFA/USJbojrvr6I/AAAAAAAADWo/sf2lUKQkjQc/I/selena-gomez.jpg" height="500" width="400" alt="Selena Gomez"/ >
Substitua esta linha por:
<a href="http://juarezlourenco.blogspot.com.br"><img src="http://lh4.googleusercontent.com/-XlP5Eq9ZhFA/USJbojrvr6I/AAAAAAAADWo/sf2lUKQkjQc/I/selena-gomez.jpg" height="500" width="400" alt=""/ ></a>
<br />
<br />
<a href="http://pedrasdemarilandia.blogspot.com.br"><img src="https://lh3.googleusercontent.com/-go06o1vQ2yo/VFUOx7ich3I/AAAAAAAALUk/NaQTY_QuRYU/s470/logo_pedras.png" height="470" width="470" alt=""/ ></a>
No código acima, substitua os links de destino (entre aspas depois de href) pelos seus links. Também substitua os endereços das imagens (entre aspas depois de src) pelos endereços das suas imagens.
Parabéns!
ResponderExcluirlegal muitobom
ResponderExcluirJuarez, parabéns!!! Obrigado por compartilhar esse conhecimento! Procurava exatamente por esse estilo de popup.
ResponderExcluirOlá amigo gostei e ja adaptei mais uma coisa n consegui ele so abre na pagina inicial se eu for para um post e clicar ele n abre !! Me ajuda pfr
ResponderExcluirNo Caso coloquei ele aki:
Membros
Olá! O funcionamento depende de onde você adicionou o código. Se foi colocado em uma postagem, só abrirá nela. O CSS e o script devem ser colocados antes do fechamento da tag "head". Verifique isso, deve dar certo.
ExcluirOlá amigo sou eu outra vez olha tentei de tudo mais ainda assim n consigo ! Pfr ta perfeito so esta com este erro da uma olhada e me diz se vc identifica o erro ! Coloquei o Popup em "Calendário"
ResponderExcluirhttp://goo.gl/T8fXBE
Olá! Dei uma olhada na página onde está localizado o calendário e não localizei o código CSS. É ele que faz a formatação visual da janela popup, o que não está acontecendo. Para adicioná-lo, localize a folha de estilos do blog e adicione o código abaixo. No painel do Blogger, clique em Modelo/Editar HTML e procure pela primeira ocorrência de <style type="text/css"> para localizar o início da folha de estilos. Adicione o código em qualquer lugar, início ou fim, tanto faz, mas antes de </style>. Fiz o teste e funcionou corretamente.
Excluir.POPUP {
position: fixed;
top: 0px;
left: 0px;
z-index: 999;
height: 100%;
width: 100%;
background-image: url(http://sites.google.com/site/juarezlourenco/background.png);
display: none;
overflow: auto;
}
.borda_janela { /*BORDA DA JANELA*/
background-color: #2497c8;
border-radius: 12px; /*Raio dos cantos da borda*/
padding: 12px; /*Largura da borda*/
}
.tabela {
position: relative;
}
.fechar { /*BOTÃO FECHAR*/
position: absolute;
top: -13px; /*Posição veritical do botão*/
right: -13px; /*Posição horizontal do botão*/
}
.conteudo_janela { /*JANELA*/
background-color: #ffffff; /*Plano de fundo da janela*/
overflow: hidden;
}
.cabecalho { /*TÍTULO DA JANELA*/
background-color: #2497c8; /*Plano de fundo*/
font-family: Arial; /*Fonte*/
font-size: 14px; /*Tamanho da fonte*/
font-weight: bold; /*Peso da fonte*/
color: #ffffff; /*Cor da fonte*/
padding: 2px;
text-align: center; /*Alinhamento do texto*/
}
.texbox { /*TEXTO*/
background-color: #ffffff; /*Plano de fundo*/
font-family: Arial; /*Fonte*/
font-size: 12px; /*Tamanho da fonte*/
color: #333333; /*Cor da fonte*/
padding: 2px;
text-align: center; /*Alinhamento do texto*/
}
Olá! Depois de algum tempo percebi que minha resposta ficou muito confusa. Vou tentar ser mais claro agora. Vamos usar como referência os dois links abaixo:
Excluirhttp://mafia-otaku.blogspot.com.br/p/Membros.html
http://mafia-otaku.blogspot.com.br/2016/03/naruto-classico.html
No primeiro link a janela popup funciona corretamente e, analisando o código fonte da página, podemos encontrar o código CSS. Já no segundo link a janela popup não funciona de forma adequada e, analisando o código fonte, não encontramos o CSS da janela popup, por isso não funciona. Para solucionar o problema, adicione o CSS da janela popup na primeira folha de estilos (Blogger Template Style), a qual é carregada em todas as páginas do blog, assim o problema deve ser resolvido.
Muuuuito Obrigada esclareceu perfeitamente e agora ta perfeito !! Muito Obg por me ajuda agradeço muito, vc é ótimo !
Excluireu coloquei mas da uns erro colorindo também outras partes do Blog.
ResponderExcluirhttps://ensinandoeletrica.blogspot.com.br/
inseri como cod. javascript/html na barra lateral.