Como exibir mensagens Pop-up na página do Blog

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+

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:

janela-pop-up-chata

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 -->
&lt;script type=&quot;text/javascript&quot;&gt;
var persistclose=1
var startX = 20
var startY = 5
var verticalpos=&quot;fromtop&quot;
function iecompattest(){
return (document.compatMode &amp;&amp; document.compatMode!=&quot;BackCompat&quot;)? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + &quot;=&quot;
var returnvalue = &quot;&quot;;
if (document.cookie.length &gt; 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(&quot;;&quot;, offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie=&quot;remainclosed=1&quot;
document.getElementById(&quot;topbar&quot;).style.visibility=&quot;hidden&quot;
}
function staticbar(){
barheight=document.getElementById(&quot;topbar&quot;).offsetHeight
var ns = (navigator.appName.indexOf(&quot;Netscape&quot;) != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose &amp;&amp; get_cookie(&quot;remainclosed&quot;)==&quot;&quot;)
el.style.visibility=&quot;visible&quot;
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+&quot;px&quot;;this.style.top=y+&quot;px&quot;;};
el.x = startX;
if (verticalpos==&quot;fromtop&quot;)
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos==&quot;fromtop&quot;){
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(&quot;stayTopLeft()&quot;, 10);
}
ftlObj = ml(&quot;topbar&quot;);
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener(&quot;load&quot;, staticbar, false)
else if (window.attachEvent)
window.attachEvent(&quot;onload&quot;, staticbar)
else if (document.getElementById)
window.onload=staticbar
&lt;/script&gt;
<!-- 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:

41 Comentários

  1. 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.

    Responder

  2. 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!

    Responder

    • 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.

      Responder

  3. 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.

    Responder

  4. 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.

    Responder

  5. 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

    Responder

  6. 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 ?

    Responder

  7. 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,

    Responder

  8. 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!

    Responder

  9. Ó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

    Responder

  10. 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

    Responder

  11. Pingback: Criar Pop-ups no WordPress: Plugin Ultimate Modal

  12. 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!

    Responder

    • 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.

      Responder

      • 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] .

        Responder

  13. 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.

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.