DECORACION DE HALLOWEEN PARA TU BLOG Y DOS POSTALES GRATIS

    ¡¡Quedan tan sólo dos días para Halloween y ya estamos casi listos para la fiesta!! Tenemos a nuestra muñeca Catrina vigilandonos desde una estantería del salón (o estamos creándo nuestra propia Catrina con el tutorial que puedes encontrar pinchando aquí). Tenemos nuestra corona de Halloween lista para colgar en la puerta (o podemos hacernos una con el tutorial que encontrarás aquí). Y tenemos un montón de ideas inspiradoras que puedes repasar pinchando aquí. Peeeero... aún nos falta un detallito: ¡¡decorar nuestro blog para Halloween!! Y por si no tienes blog, o simplemente te apetece, te dejo dos tarjetas postales para felicitar Halloween a quien tú quieras.

    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 style='display:scroll;position:fixed;top:380px;right:0px;'><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' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='http://i57.tinypic.com/x2m3xh.gif' style='width:180px;'/></marquee>

    Direction es 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:0px indica 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 rosa es 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' style='position:absolute; z-index:80; left: -500px; width:125px; height:108px;'>

<img border='0' src='http://i62.tinypic.com/k3ksgz.gif'/></div>

<div id='fantasma2' style='position:absolute; z-index:81; left: -600px; width:120px; height:99px;'>

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

Sígueme en:

   ❤ Pinterest   ❤ Facebook    ❤ Google+    ❤ Twitter   ❤ Youtube