Janela Flutuante

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