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.
Nenhum comentário:
Postar um comentário