Empezamos con la decoración del blog poniendo una tela de araña en una esquinita. Para ello necesitamos una imagen de tela de araña transparente como esta de aquí:
Y ahora vamos a DISEÑO DEL BLOG>>AÑADIR UN GADGET>>HTML/JAVASCRIPT y ahí copiamos este código:
<a ><img src="http://i57.tinypic.com/4zyd05.png"/></a>
La parte remarcada en rosa es la url de nuestra imagen. La azul indica que estará colocada arriba de todo de nuestro blog y la verde que estará a la derecha. Podemos variar estos valores por bottom (abajo) o left (izquierda) en función de dónde queramos colocar la imagen. 0px indica la distancia a la que está colocada: top:380px indica que está a 380 px de la parte de arriba, si queremos bajarla un poco aumentamos ese valor hasta situarla donde queramos. Lo mismo para right:0px. Lo siguiente que vamos a hacer es darle vidilla a nuestro cursor, y para ello vamos a cambiar la flechita por una araña muy maja (también tiene que tener el fondo transparente). He hecho dos, una negra como la de la tela de araña y otra color mostaza:
Igual que con la tela de araña vamos a DISEÑO DEL BLOG>>AÑADIR UN GADGET>>HTML/JAVASCRIPT y ahí copiamos este código si queremos la araña negra:
<style type="text/css">body, a, a:hover {cursor: url(http://i57.tinypic.com/jhuibb.png), progress;}</style>
o este otro si queremos la color mostaza:
<style type="text/css">body, a, a:hover {cursor: url(http://i60.tinypic.com/123kvgz.png), progress;}</style>
Y ahora vamos a poner una brujita voladora atravesando nuestra pantalla, podemos hacerlo con una imagen transparente.
O, para que tenga más movimiento podemos poner una imagen animada (gif) yo he hecho esta:
Lo mismo, vamos a DISEÑO DEL BLOG>>AÑADIR UN GADGET>>HTML/JAVASCRIPT y ahí copiamos este código:
<marquee direction="right" scrolldelay="150" ><img src="http://i57.tinypic.com/x2m3xh.gif" /></marquee>
Directiones la dirección en la que avanza nuestra imagen (right, left, up, down), scrolldelay es la velocidad a la que se mueve, bottom:10px;left:0pxindica dónde se coloca la imagen (en este caso en la parte inferior del blog pero no pegando y a la izquierda), width:100% nos dice que la imagen atraviesa toda la pantalla, la parte en rosaes la url de la imagen y el siguiente width el tamaño de la misma.
Y ya sólo nos faltan unos fantasmas flotando por el blog asustando a nuestras visitas. Igual que la bruja pueden ser imágenes transparentes estáticas o animadas (gif). Yo he creado dos gif pero os dejo las imágenes estáticas también:
Y para colocar a nuestros fantasmas vamos a PLANTILLA>>EDITAR HTML>>CTRL+F y buscamos /head, justo antes vamos a pegar el siguiente código:
<script type="text/javascript"> //<![CDATA[
**********************************************
* Script original de Virtual_Max
* Adaptado por ciudadblogger.com
**********************************************
var vmin=2;
var vmax=5;
var vr=2;
var timer1;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function Chip(chipname,width,height){
this.named=chipname;
this.vx=vmin+vmax*Math.random();
this.vy=vmin+vmax*Math.random();
this.w=width+20;
this.h=height;
this.xx=0;
this.yy=0;
this.timer1=null;
}
function movechip(chipname){
if (document.getElementById){
eval("chip="+chipname);
if (window.innerWidth || window.opera){
pageX=window.pageXOffset;
pageW=window.innerWidth-40;
pageY=window.pageYOffset;
pageH=window.innerHeight-20;
}
else if (document.body){
pageX=iecompattest().scrollLeft;
pageW=iecompattest().offsetWidth-40;
pageY=iecompattest().scrollTop;
pageH=iecompattest().offsetHeight-20;
}
chip.xx=chip.xx+chip.vx;
chip.yy=chip.yy+chip.vy;
chip.vx+=vr*(Math.random()-0.5);
chip.vy+=vr*(Math.random()-0.5);
if(chip.vx>(vmax+vmin)) chip.vx=(vmax+vmin)*2-chip.vx;
if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
if(chip.vy>(vmax+vmin)) chip.vy=(vmax+vmin)*2-chip.vy;
if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;
if(chip.xx<=pageX){
chip.xx=pageX;
chip.vx=vmin+vmax*Math.random();
}
if(chip.xx>=pageX+pageW-chip.w){
chip.xx=pageX+pageW-chip.w;
chip.vx=-vmin-vmax*Math.random();
}
if(chip.yy<=pageY)
{chip.yy=pageY;
chip.vy=vmin+vmax*Math.random();
}
if(chip.yy>=pageY+pageH-chip.h)
{chip.yy=pageY+pageH-chip.h;
chip.vy=-vmin-vmax*Math.random();
}
document.getElementById(chip.named).style.left=chip.xx+"px";
document.getElementById(chip.named).style.top=chip.yy+"px";
chip.timer1=setTimeout("movechip(""+chip.named+"")",100);
}
}
function pagestart(){
fantasma1=new Chip("fantasma1",147,168);
fantasma2=new Chip("fantasma2",47,68);
movechip("fantasma1");
movechip("fantasma2");
}
if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart
//]]>
</script>
La parte de código amarillo no es necesario en todas las plantillas, sólo en las que no tengan esas dos líneas. Y antes de /body pegamos este otro código:
<div id="fantasma1" >
<img border="0" src="http://i62.tinypic.com/k3ksgz.gif"/></div>
<div id="fantasma2" >
<img border="0" src="http://i59.tinypic.com/jzvcqo.gif"/></div>
(Este código es original de Virtual_Max y lo encontré en este foro, no me funcionaba ni a la de tres hasta que encontré una adaptación de ciudadblogger que con un par de retoques me ha venido estupendamente.)
Ya tenemos nuestro blog decorado para halloween, con un estilo muy cuqui / kawaii eso sí. IMPORTANTE: apuntad bien todo lo que hemos añadido para poder quitarlo después y haced copia de seguridad de la plantilla del blog antes de modificarla.
Y ahora sí, mi regalo de Halloween, estas dos postales (¿para ser las primeras que hago no están mal no?) para felicitaros a vosotr@s y que feliciteis a todo el mundo. Para descargarlas sólo tenéis que pinchar sobre ellas con el botón derecho del ratón y guardar la imagen. Las fuentes las he sacado de esta página y algunos de los dibujos con dingbats que he sacado de esta otra.
Feliz Halloween.