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

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.

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.

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:

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

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.

BLOG DICA QUENTE

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

1 comment

Postar um comentário

MENU DICAS