![[ Ferramentas Blog ]](/wordpress/wp-content/themes/fb5/images/logo.png){kind=logo}
Vou ensinar como exibir mensagens em janelas flutuantes dentro da página do seu blog, que são conhecidas como “modelos pop-up” ou “mensagens pop-up internas” e até como “Topbar”. É um código simples, mas talvez seja um dos recursos mais problemáticos que exista, por um motivo simples: AS PESSOAS ODEIAM POP-UP.
A coisa que mais causa transtorno quando estamos navegando são janelas que se abrem na nossa tela e que não foram solicitadas. Páginas que têm esse recurso tendem a ter uma taxa de rejeição altíssima, pois a tendência das pessoas é fechar sem ler nada. Veja o recado que o Inácio Rolim (@inaciorolim) me mandou outro dia pra você entender:
Esse modelo que vou ensinar só abre uma única vez por seção (ou seria sessão[?]), ou seja, o visitante só verá a janela abrir uma única vez e ela fica rolando e flutuando na tela até ser fechada. Depois, enquanto o visitantes estiver em seu blog naquele dia a janela não aparecerá mais. O problema é se o visitante não voltar mais justamente por culpa do pop-up. Por isso só use esse recurso se você tiver muita certeza de que a informação seja muito relevante para seus visitantes.
Veja a janela funcionando aqui: Testando Blogger.
Como inserir uma Pop-up Topbar em seu blog
Siga os passos corretamente e lembre-se de fazer testes antes de aplicar definitivamente em seu blog. Para os testes é importante que você nunca feche a janela do pop-up para você visualize as mudanças que fizer.
Abra o painel do Blogger e clique no menu “Layout” (Design) ~> “Editar HTML” para ver o código fonte de seu blog. Então siga os passos abaixo.
Passo 1. Colando o estilo.
Procure pela linha “</head>” e imeditamente ACIMA dela cole o trecho:
<style>
#topbar{
position:absolute;
border: 2px solid green;
padding: 5px 0px 0px 0px;
margin: 100px 0px 0px 200px;
background-color: #ffffff;
font-size:12px;
width: 400px;
visibility: hidden;
z-index: 400;}
</style>
Aqui está uma das medidas da janela, a que determina a largura total, que destaquem em vermelho. A altura é determinada pelo conteúdo que virá na janela. Não é bom que a largura passe dos 400px.
Passo 2. Adicionando o JavaScript.
Agora vá imediatamente ABAIXO da linha “</head>” e cole o seguinte sem mudar nada:
<!-- Java PopUp inicio -->
<script type="text/javascript">
var persistclose=1
var startX = 20
var startY = 5
var verticalpos="fromtop"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<!-- Java PopUp Final -->
Aqui não precisa mudar nada e é o que executará a janela apenas uma vez para o visitante.
Passo 3. Criando a janela e o conteúdo.
Esse á parte mais complicada. Aqui você tem que criar o conteúdo da janela, seja com imagens ou links, então precisa saber um pouco de HTML para criar algo interessante. eu usei no exemplo apenas uma imagem que quando clicada direciona para uma página. Mas você também pode colocar seus ícones de Feed e assinatura de newsletter, por exemplo, entre outras coisas.
Ainda no código fonte, busque pela linha “<body>” e logo DEPOIS dela cole o seguinte trecho:
<!-- conteudo PopUp Inicio -->
<div id='topbar'>
<p align='right'><a href='' onClick='closebar(); return false'>[Fechar]</a></p>
..... o que desejar colocar na pop-up .....
</div>
<!-- conteudo PopUp Final -->
A linha destaca de rosa é a que fecha
a janela caso o visitante não queira continuar vendo aquilo.
Então, dentro coloque o que quer que seja exibido na topbar. Isso é o que determinará a altura da janela.
Feito isso, salve o modelo e veja o resultado em seu blog.
Por fim, vale ressaltar: esteja atento às reações de seus visitantes e acompanhe bastante as estatísticas de seu blog para ver se a nova janela não está prejudicando muito seu desempenho. É certo que irá prejudicar em alguns aspectos, mas você pode evitar os danos sabendo usar bem esse recurso.
Outros modelos de Pop-ups para Blogger:
Pensava que ia deixar a gente com curiosidade desse codigo…
E se futuramente eu querer tirar este Pop-up topbar do meu blog, o que devo fazer?
Basta você retirar os códigos que foram adicionados, sem, modificar o HTML de estrutura do seu Blog!
fica a dica de por um pop-up para assinar feed e tals porque ajuda para cara*ho,rs
abraços
@Junior,
Quando não quiser mais usar, é só apagar os mesmos códigos que adicionou.
Isso é verdade coloque no popup para assinar o feed de preferencia pelo email. se você utiliza o feed burner tem uma que um script que o leitor já coloca o email e se cadastra. fica a dica.
Valew Marcos, já implementei no meu blog. Era bem isso que eu estava procurando. Abraços
Ai amigaoo
tava afim de mesmo desse tipo de POpUp, mais será que da pra eu colocar ai dentro desse popup um Google adsense?
Valeu irmao!
abraçooss!
Tony,
dá pra colocar, mas acho que as regras do AdSense não permitem esse tipo de exibição para os blocos de anúncios. É preciso verificar isso para vc não ter problemas depois.
Olá Marcos! Muito bom este código, funcionou perfeitamente no meu blog (Free Dicas). Eu fiz um esquema parecido com aquele que o Paulo Faustino fez, lá na escola dinheiro; mas, ao invés de pedir para assinarem o feed, eu coloquei o gadget do Google Friend Connect. Vou observar a reação dos visitantes. Mas, até que não ficou intrusivo!
Muito obrigado pela dica do código.
Forte Abraço.
Olá Marcos! Funcionou muito bem o código, só não fecha o gadget do Google Friend Connect que eu coloquei dentro do código; achei melhor retirar o código do blog e acrescentar normalmente o gadget do Google Friend Connect no final da página; ficou bem melhor! De qualquer forma, valeu pela sua dica do código.
Forte Abraço.
Bom dia Marcos
IMplementei o código em meu blog, mas ele só abre uma vez. Depois não abre mais, mesmo que se desligue o computador. Ou seja, o visitante só vai ver o PopUp uma única vez e depois mesmo que ele volte outras vezes no site não verá mais? É isso mesmo?
Abs
O Popup só abra uma vez para cada IP de acesso. Se o IP do usuário não mudar, ele não verá novamente.
Valeu Marcos. NO meu caso é IP Fixo, então é isso que não consegui ver mais.
Beleza.
Abraços
Na verdade, funciona atráves dos cookies que o navegador recebe…! Tente limpar os cookies e depois acessar o site que possua este código, ele voltará!
PS.: Se você trocar de navegador também da certo pois os cookies são armazenados no navegador e não no computador!
Abraços!
vlw marcos, já estava presta à enviar um mail para você pedindo um tutorial!
Olá marcos, muito fera este código, mas este java script ai não deixa eu centralizar a div no centro da pagina, o css não age direito, vc tem solução para isso ?
Amigo como poderiamos colocar um código e qual seria ele que a janela se fechasse apois uns segundos automáticamente? Sabe me dar essa dica?
Aguardo.
Muito legal, como eu poderia fazer para o cookie durar 24hs na máquina…? muito obrigado..
Esse procedimento não usa cookie para regular o tempo entre exibições.
Olá cara muito bom esse codigo passei muito tempo tentado achar ele usei muitos qui não deu certo e esse foi pa pufo e seu tuto foi perfeito, muito explicativo, ficou muito facil mesmo, mais eu gostaria de saber como faco pra colocar o pop up mais pra direita ou pra esquerda, OBRIGADO MESMO,
Quero tentar colocar isso no adsense tem como?
por que meu blog te 28 mil visualizações por dia se eu colocar um cada vez que mudar de pagina da uma boa grana!
As regras de uso do AdSense não permitem que sejam exibidos banners flutuantes ou em pop-ups sobre o conteúdo. Recomendo não usar dessa forma para evitar punições.
Marcos Lemos, gostaria de agradecer imensamente por essa dica! esta procurando um código simples e funcional e só encontrei aqui!
Grande Abraço
Ótimo Marcos!
Gostaria q me desse uma luz:
Coloquei o popup certinho, funcionou. O problema é que fica uma faixa transparente na parte superior, justamente onde está a palavra “Fechar”. Na verdade gostaria de deixar todo preenchido (sem a transparência) e em vez da palavra “Fechar” aparecesse o “X”
É possível?
Ah, outra coisa: como inseri um banner, o código só funcionou depois q usei o CENTRICLE (HTML para texto).
Abraço
Queria agradecer o tutorial. Já tinha tentado colocar outros que solicitavam o sistema jquery mas dava sempre conflito no meu blog Fazer Euros na Net. Este funciona na perfeição. Gostava que fosse possível utilizar um sistema igual às outras caixas popup (tipo fan page facebook) para fazer desaparecer o popup clicando no blog, mas julgo que não é possível.
Muito obrigado
Pingback: Criar Pop-ups no WordPress: Plugin Ultimate Modal
Tem alguma forma de fazer com que esse popup seja executado apenas na página inicial?
Oque eu teria que alterar para conseguir fazer a pop-up sumir quando o mouse passar por cima de fechar ? sem a necessidade de clicar em fechar.
E se eu quiser colocar uma imagem como faço ?
No local indicado no código para isso, você pode adicionar o que quise. Adicione o código de imagens, por exemplo.
Bom dia Marcos,
O Pop UP funcionou e ficou ótimo!
Só tenho uma dúvida. Como faço para deixar ele mais para o canto superior direito do blog? Como altero a posição dele?
Obrigado!
Ola como faço para colocar um time de 5 segundos nesse popup
Fabio,
por padrão está em 10 segundos para abrir a janela. Você pode mudar o tempo na linha:
setTimeout("stayTopLeft()", 10);Onde o “10” é o número em segundos do tempo para carregar a janela.
Oi eu falo assim tipo ele fechar por conta própria, vi no g1 e no r7 um pop up que abre e fecha sozinho e também so abre uma vez o banner pop up olha ai o meu blogger o eu coloquei o seu pop up aqui do tutorial só que eu quero que ele fecha só [link suprimido] .
VLW MANO VOCE FOI FIEL AO SEUS VISITANTES E OBRG PELA FORÇA DEU TUDO CERTO
Queria que o pop out aparecesse somente quando reconhecido a versão mobile, onde devo colocar o código, e qual deles?
Olá, Marcos Lemos.
Inicialmente gostaria de parabenizá-lo pelo trabalho excelente que proporciona aos seus seguidores, usuários, entre outros.
Gostei muito da “mensagem poup-up”. No entanto, gostei muito mais de quando entrei em seu site e me deparei com a chamada em “lightbox”.
É possível fazer o mesmo no blogger? Existe um tutorial disponível? Seria o máximo!
Abs,
Carlos.
Carlos,
esse modelo não tem para Blogger.
Excelente artigo, como faço pra deixar o pop up mais pra esquerda e pra baixo?
Amigo, fiz exatamente como você falou, mas a janela não fecha quando clico em fechar…
oi como faz para deixar fixa uma imagem na lateral do blog?