25 de mai. de 2012

Janela Flutuante

Postado Por: ADMIN As 08:39

Olá hoje eu vou ensinar a colocar uma janela flutuante no blog, é uma janela que você pode colocar imagens, vídeos, anúncios, mensagem, até mesmo destaque da semana, como eu ja fiz uma vez aqui, bom é só usar a criatividade, essa janela, flutua pela página e o visitante pode fechar ela se quiser, e é muito facil de colocar!
Eu fiz 2 modelos prontos, e 1 para modificar de acordo com as cores do seu blog. 
Escolha um e pegue o códico na caixinha:
<!--Começo do script Karen Star ---><style type="text/css"> 
#topbar{ 
position:absolute; 
border: 2px dashed #ffc9fb; 
padding: 10px; 
margin: 2% 0 0 55%; 
color:#ffc9fb; 
background:url(http://karenstar.dominiotemporario.com/valentineback30.gif); 
width: 37%; 
visibility: hidden; 
z-index: 600; 
}</style> 
<div style="visibility: visible; top: 139px; left: 20px" id="topbar" sp="function(x,y){this.style.left=x+&quot;px&quot;;this.style.top=y+&quot;px&quot;;}" x="20" y="139.004008097081"><a onclick="closebar(); return false" href=""><img border="0" src="http://karenstar.dominiotemporario.com/th_xiss.gif" /></a><span style="font-size: 12px"><b>Aqui coloque o que quiser. Imagens, mensagens,alertas...Até mesmo umm destaque da semana!... </b></span></div> 
<script type="text/javascript"> 
var persistclose=0 // 
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><!--Fim do script Karen Star --->







<!--Começo do script Karen Star ---> 
<style type="text/css"> 
#topbar{ 
position:absolute; 
border: 2px dashed #66c3e9; 
padding: 10px; 
margin: 2% 0 0 55%; 
color:#66c3e9; 
background:url(http://karenstar.dominiotemporario.com/b2c.jpg); 
width: 37%; 
visibility: hidden; 
z-index: 600; 
} 
</style> 
<div id='topbar'> 
<a href='' onclick='closebar(); return false'><img border="0" src="http://karenstar.dominiotemporario.com/th_xiss.gif" /></a><span style="font-size: 12px;"><b>Aqui coloque o que quiser. Imagens, mensagens,alertas...Até mesmo umm destaque da semana!... 
</b></span> 
</div> 
<script type="text/javascript"> 
var persistclose=0 // 
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> 
<!--Fim do script Karen Star --->


Depois de pegar o códico da janela escolhida, vá em:
"Design - Elementos de página"
Click em:
" Adicionar um Gadget - HTML/JavaScript
E cole o códico! E prontinho!
Agora se nenhuma dessas caixinhas combina com o seu blog, pegue este códico abaixo e nele ta explicando onde colocar um fundo, mudar a cor da fonte, colocar outro "x" (para fechar)... 
E se não você não tem conhecimento, não mexa mais em nada além de onde esta indicando que pode modificar, para não dá nada errado.
 
 
<!--Começo do script Karen Star ---> 
<style type="text/css"> 
#topbar{ 
position:absolute; 
border: 2px dashed #000;/*AQUI VOCÊ COLOCA A COR DA BORDA*/ 
padding: 10px; 
margin: 2% 0 0 55%; 
color:#000;/*AQUI VOCÊ COLOCA A COR DA FONTE*/ 
background:url(AQUI VOCÊ COLOCA O ENDEREÇO DO FUNDO QUE VOCÊ QUER);/*ENDEREÇO DO BACKGROUND*/ 
width: 37%; 
visibility: hidden; 
z-index: 600; 
} 
</style> 
<div id='topbar'> 
<a href='' onclick='closebar(); return false'><img border="0" src="http://karenstar.dominiotemporario.com/th_xiss.gif" /></a><span style="font-size: 12px;"><b>Aqui coloque o que quiser. Imagens, mensagens,alertas...Até mesmo umm destaque da semana!... 
</b></span> 
</div> 
<script type="text/javascript"> 
var persistclose=0 // 
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> 
<!--Fim do script Karen Star --->

0 comentários:

Postar um comentário