terça-feira, 4 de maio de 2010

Mensagens Pop-up



Essa é uma ótima pop-up que desse quando a página é rolada.Serve para fazer publicidade, para divulgação se sites, propagandas,etc.E na minha opnião, esse é melhor que os outros postados aqui no Códigos Blogger =D.

Vamos instalar!

Copie o código abaixo.


#topbar{
position:absolute;
border: 2px solid #000;/*cor da borda*/
padding: 10px;
margin: 2% 0 0 55%;
background-color: #ffffff;/*cor de fundo*/
width: 37%;
visibility: hidden;
z-index: 600;
}


Faça o login no blogger.

Vá em Layout - Editar HTML.

Procure pela tag  ]]></b:skin> e cole o código acima dela e depois salve!

Em seguida vá em Elementos da página - Adicionar um Gadget - HTML/Javascript

E cole o seguinte código

<div id='topbar'>
<a href='' onclick='closebar(); return false'><img border="0" src="http://4.bp.blogspot.com/_BaCxSD9NFn8/S9jROBO5I7I/AAAAAAAABgc/W6-GwOsrxgI/s1600/icontexto-webdev-cancel-048x048.png" /></a><span style="font-size: 18px;"><b>AQUI COLOQUE O QUE QUISER. ANÚNCIOS, VÍDEOS, MENSAGENS, É SÓ COLAR OS CÓDIGOS AQUI
</script></b></span>
</div>

<script type="text/javascript">
var persistclose=0 // Se colocar o número 0 a janela abrirá novamente. O número 1significa que depois que a barra for fechada, permanecerá fechada
var startX = 20 // Tamanho horizontal
var startY = 5 // Tamanho vertical
var verticalpos="fromtop" // "fromtop" o "frombottom" define se vai em cima ou embaixo
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>


Na parte destacada de azul é a imagem do botão fechar, você pode subtituir por outra.
Na parte destacada de vermelho você coloca o que quiser, imagem, anúncio,publicidade etc...

Salve e pronto!

Sugestões ou dúvidas, favor deixa comentários!

Marcadores: , , ,

12 Comentários:

Às 24 de julho de 2010 22:06 , Blogger André Conceição disse...

como deixar a imagem do tamanho certo sem ficar aquela imagem braca aparecendo

 
Às 24 de julho de 2010 23:34 , Blogger Códigos Blogger disse...

@André - Explique melhor para que possamos tirar sua dúvida.

 
Às 25 de julho de 2010 13:53 , Blogger André Conceição disse...

nãe é assim você coloca um video por exemplo ai la quando vc vai ver como ficou aparece o video so que com uns espacos branco tambem aparecendo
o é assim mesmo

 
Às 25 de julho de 2010 18:58 , Blogger Códigos Blogger disse...

Olá andré,
Abaixo da linha "#topbar{" altere o valor do "width" para uma porcentagem maior.

 
Às 3 de outubro de 2010 23:39 , Blogger DDG-admin disse...

Que pena no meu blog não funfo ~x(

Ao invés de ficar no canto da página tá tudo em um widget !!

Aff fis tudo certin,mesmo assim num funfo...

 
Às 13 de fevereiro de 2011 14:49 , Blogger Eduardo Soares disse...

Andei, andei e finalmente achei um que funcionou bem aqui.

Parabéns pelo post.

 
Às 19 de julho de 2011 11:59 , Blogger Lecy Pereira disse...

Muito bacana. Só mais uma dúvida: como fazer para que aquele fundinho branco mude de cor (ou não tem como)?

 
Às 19 de julho de 2011 18:30 , Blogger marcelo te amo MUITO disse...

@Lecy Pereira Apenas altere a seguinte linha do primeiro código:

background-color: #ffffff;/*cor de fundo*/

O #ffffff é a cor do fundo. Para tirar a cor do fundo apenas exclua a linha toda. Para trocar a cor do fundo, troque #ffffff por outra cor em hexadecimal.

 
Às 30 de julho de 2011 12:37 , Blogger Junio Marques disse...

TEnho 2 Duvidas como boto para o lado Direito o Pop Up e onde crio esses codigos pra mim colocar aonde esta em vermelho apenas colei os link's da imagem e do link não vai tem que criar um codigo certo?

 
Às 1 de agosto de 2011 00:12 , Blogger Códigos Blogger disse...

@Junio Marques Olá, respondendo suas dúvidas:

1. O Pop Up por padrão já vem no lado direito, mas se quiser colocar no lado esquedo apenas altere o valor de "margin" no código CSS.

#topbar{
position:absolute;
border: 2px solid #000;/*cor da borda*/
padding: 10px;
margin: 2% 0 0 55%;
background-color: #ffffff;/*cor de fundo*/
width: 37%;
visibility: hidden;
z-index: 600;
}

Toque o valor 55% Por um número menor. Quanto menor o número, mais pro lado esquerdo ele fica. Exemplo: 15%, 10%, 5%.

2. A parte em vermelho no código é o que você pode estar colocando dentro do pop up. Se preferir apenas escreva algo no lugar onde está em vermelho. Ou cole um código de um vídeo, imagem e etc...

 
Às 9 de novembro de 2011 14:32 , Blogger »BrasilTorrents.Blogspot.com » disse...

otimo cara vlw so seu blogger que eu vi o propio autor dando expicaçâo virei fan

 
Às 30 de setembro de 2012 21:49 , Blogger Alex Piatti disse...

Gosataria de saber como configurar a expiração do cookie. Por exemplo, se eu quiser que o popup apareça apenas uma vez a cada semana. tem como??

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial