Cartel de aviso flotante

Alguno de nosotros nos vimos en algún momento en la necesidad de informar de algo, cambio de alojamiento de archivos, nueva dirección, obras en el blog, ausencia, una noticia de interés...
Lo más sencillo es crear una entrada eso no hay duda, pero si queremos que ese aviso sea diferente, que resalte quede bien visible y que tenga el protagonismo suficiente para llamar la atención entonces dudamos ante las diferentes formas de hacerlo.
Con este script que voy a añadir podemos conseguir un cartel de aviso muy atractivo y a la vez elegante, el efecto flotante hace que el cartel se muestre según nos movemos a lo largo de la página. No resulta molesto ya que podemos prescindir de él con un simple click.
Para añadirlo nos ubicaremos en plantilla edición de HTML y buscamos ]]></b:skin> justo antes añadimos los estilos del cuadro de aviso:

#topbar{

position:absolute;

border: 1px solid black;

padding: 5px;

background-color: white;

width: 640px;

visibility: hidden;

z-index: 640;

}

- En border podemos cambiar el tipo de borde, grosor y color.

- Con background el color de fondo.

- Para aumentar o disminuir la anchura en width.
- La propiedad z-index la utilizamos para crear capas a una altura diferente, en este caso le añadimos el mismo valor que a width.
- Si deseas añadir una imagen de fondo en lugar de color sustituimos
background-color: white; por background:url('aquí tu imagen de fondo');

Guardamos los cambios y buscamos:

<div id='outer-wrapper'><div id='wrap2'>

para añadir justo después lo siguiente:

<div id='topbar'>

<a href='' onClick='closebar(); return false'><img border='0' src='url-imagen-cerrar'/></a>

Contenido del cuadro de aviso.

</div>

Por último vamos a añadir el script, como es bastante extenso para no recargar la plantilla vamos a añadirlo como un elemento de página (ahora gadget) escogiendo para ello HTML/Javascript..
Si el cartelito tarda mucho en cargar podéis probar a añadir el script justo antes de la etiqueta </head>


Script

<script type="text/javascript">
var persistclose=1 // Se coloca en 0 o 1. 1 significa que una vez que la barra es cerrada, entonces permanece cerrada en el resto de la sesión
var startX = 20 // Tamaño horizontal de la barra en pixeles
var startY = 5 // Tamaño vertical de la barra en pixeles
var verticalpos="fromtop" // "fromtop" o "frombottom" para definir si va arriba o abajo.

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>

Como siempre digo la imaginación es la que cuenta, podéis verlo funcionando en Fuxion WAREX