La celebración del Halloween fue iniciada por los celtas, que creían en la inmortalidad del alma, la cual se introducía en otro individuo al abandonar el cuerpo. El 31 de octubre, ésta volvía a su antiguo 'hogar' para reclamar alimento a sus moradores, que estaban obligados a contribuir.Una fiesta que hoy en día se celebra a lo grande y que afortunadamente podemos difundir con algún que otro artilugio en el blog.
Se trata de algo novedoso, de una calabaza 'viviente' con movimiento libre, que rebotará de una esquina a otra por la pantalla de tu blog sin rumbo alguno.
Para comprobar el resultado, accede a este blog de pruebas.


Pega este código en su interior:
<script type="text/javascript">
//Por El Balcon de Jaime
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
var balconimg1 = new Image();
balconimg1.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuWfn1f9R2k-6nilHtiZMOH8PLx6P4HxcKmAns5Yfaqt9HUGTdGQopTQ1vdF32nQ_BIKPh0uvK3lnSMtw-PTfZQUANXDz1iZnRp9X9Et6rh_KrvRnG2SJYb-DK4VnQJkNhRBtKNfRJMNMn/s320/blhalloweeen.png";
var balconimgA = 160;
var balconimgB = 150;
var balconvelocidadpoca = 1;
var balconvelocidad = 40;
var balconvelocidadmucha = 4;
var balconblA = 1;
balconblA = parseInt(document.images.length);
if (document.getElementById("balconelemento2"+balconblA)) balconblA++;
var balconK1 = "<div id='balconelemento2"+balconblA+"' style='position:absolute;"
+"top:2px;left:2px;height:"+balconimgA+"px;width:"+balconimgB+"px;"
+"overflow:hidden'><img src='"+balconimg1.src+"' alt=''/><\/div>";
document.write(balconK1);
var h,w,r,temp;
var d = document;
var y = 2;
var x = 2;
var balconmv1 = 45;
var balconelemento3 = 1;
var balconelemento4 = new Array(1,0,1);
var balconmovimiento1 = 2;
var bacls = 0;
var bacls2 = new Array(1,-1,2,-2,0,0,1,-1,2,-2);
var balcxx1 = 0;
var balcxx = 0;
var balconelemento = "px";
var balconj1 = (typeof window.innerWidth == "number");
var balconj2 = (typeof window.pageYOffset == "number");
if (balconj1) r = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
}
function balconttV(){
var oh,sy,ow,sx,rh,rw;
if (balconj1){
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh - balconimgA;
w = rw - balconimgB;
}
else{
h = r.clientHeight - balconimgA;
w = r.clientWidth - balconimgB;
}
}
function balconj3(yx){
var y,x;
if (balconj2){
y = r.pageYOffset;
x = r.pageXOffset;
}
else{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}
function balconfunc1(){
bacls = bacls2[Math.floor(Math.random()*bacls2.length)];
balconelemento3 = balconelemento4[Math.floor(Math.random()*balconelemento4.length)];
balcxx = Math.floor(20+Math.random()*50);
}
function jtblcn1(){
var balconjB,hb,balconjC,dx,balconjA;
if (balconelemento3 == 1) balconmovimiento1 +=0.05;
if (balconelemento3 == 0) balconmovimiento1 -=0.05;
if (balconmovimiento1 >= balconvelocidadmucha) balconmovimiento1 = balconvelocidadmucha;
if (balconmovimiento1 <= balconvelocidadpoca) balconmovimiento1 = balconvelocidadpoca;
balcxx1++;
if (balcxx1 >= balcxx){
balconfunc1();
balcxx1=0;
}
balconjA = balconmv1+=bacls;
balconjC = balconmovimiento1 * Math.sin(balconjA*Math.PI/180);
dx = balconmovimiento1 * Math.cos(balconjA*Math.PI/180);
y+=balconjC;
x+=dx;
balconjB = 180-balconmv1;
hb = 0-balconmv1;
if ((y < 1) && (x < 1)){y = 1; x = 1; balconmv1 = 45;}
if ((y < 1) && (x > w)){y = 1; x = w; balconmv1 = 130;}
if ((y > h) && (x < 1)){y = h; x = 1; balconmv1 = 320;}
if ((y > h) && (x > w)){y = h; x = w; balconmv1 = 224;}
if (y < 1) {y = 1; balconmv1 = hb;}
if (y > h) {y = h; balconmv1 = hb;}
if (x < 1) {x = 1; balconmv1 = balconjB;}
if (x > w) {x = w; balconmv1 = balconjB;}
temp.style.top = y + balconj3(0) + balconelemento;
temp.style.left = x + balconj3(1) + balconelemento;
setTimeout(jtblcn1,balconvelocidad);
}
function balconblj(){
temp = document.getElementById("balconelemento2"+balconblA);
balconttV();
jtblcn1();
}
if (window.addEventListener){
window.addEventListener("resize",balconttV,false);
window.addEventListener("load",balconblj,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",balconttV);
window.attachEvent("onload",balconblj);
}
})();
}
</script>
La dirección de la imagen está resaltada en color naranja. Lógicamente, puedes cambiar el icono reemplazando dicha URL por la de tu propio adorno.
Guarda el gadget y habrás incluido en tu blog un maravilloso y mágico elemento.
Gracias Jaime es genial!!;)
¡Qué calabaza tan grande has puesto Bulma! :D Me alegra mucho que te guste.
Todo un éxito tu truco, otra maravilla que has puesto en el blog. Gracias por tanta ayuda.
Se trata de un truco muy simple y atractivo, Sergiop. ¿Verdad que la calabaza parece 'cobrar vida'? Se mueve en cualquier dirección y a velocidades distintas...
¡Abrazos!
Genial el truco JAime!!!
Tengo una pregunta.. quiero saber como puedo cambiar la imagen de la pestaña de la "B con fondo naranja "clasica de blog por alguna otra que quiziera poner yo???
Y gracias por los post son los mejores.
Espero tu respuesta
imagen de pestaña de pagina.
Me alegra que te guste el truco, Andrés. Para cambiar el favicon de blogger sigue los pasos que indico en esta entrada.
¡Saludos!
jajaa muy bueno Jaime y muy facil de insertar en el blog. Gracias.
Eres un crack, m'encanta! yo he puesto una estrella azul que iré cambiando.
Un saludo.
Perfecto entonces, Delio. Lo mejor de este truco es que no tiene que tratarse de una calabaza, podemos editar el icono a nuestro gusto.
Alex494, al tener una plantilla con fondo oscuro la calabaza se ve muy realista.
¡Saludos!
he probado esta calabaza en mi blog, y parece que me sale por los lados o se me queda mas ancho el blog, que hare mal :(
la he borrado por que se me queda mal el blog, aun asi he puesto la araña, que me gusta mas, pero lo de la calabaza queria ponerla pero bueno, igual no deja cargar bien mi blog.
Me parece un truco muy simpatico, aunque en mi blog, se oculta ¿por que puede ser?
http://aisansal.blogspot.com/
Aprovecho para darte las gracias por tu trabajo, aunque no participo, quiero que sepas te leo a menudo.
Un saludo
Ana
Hola Jaime,tambien me gustaria poner la calabaza pero, me da un poco de miedo poner el código ,no por la calabaza ,te comento,últimamente veo algo raro en mi blogs de cocina,cuando escribo los ingredientes y la manera de hacer la receta , cuando la guardo y me voy al blogs esta todo mal escrito y en los comentarios pone ,¿me dejas un comentario de la onu ? y al lado derecho pone Naciones Unidas, cierro el blogs y lo vuelvo habrir y ya esta bien, pero al rato otra vez me puedes decir aque se deve
GRACIAS
Me ha quedado chulisima, muchas gracias.
Hola Jaime , ya puse el código para la calabaza
pero busque otra cosa , un fantasma, en el otro blogs puse una calabaza, muy guay
saludos
No he podido localizar el error, Zahira. Veo que utilizas una de las nuevas plantillas de blogger por lo que el script podría tener problemas para funcionar...
¿Has probado a instalarlo sin la araña que 'camina por el blog'? Este último truco utiliza la propiedad marquee, además del atributo fixed (al igual que la calabaza) por lo que podría alterar el resultado.
¡Bienvenida Ana! Prueba a colocar el gadget html-javascript que añadiste para incluir la calabaza sobre el bloque de entradas en el apartado de Diseño>Elementos de la página.
Si sigue sin funcionar avísame. No es que la calabaza se oculte, lo único que ocurre es que no 'traspasa' el color de fondo del main-wrapper (bloque de entradas) y por tanto no puede verse mientras se mueve por dicha zona.
Otra solución sería quitar el color de fondo de la zona de entradas (algo que te explicaré si no te funciona la primera opción).
Muchísimas gracias por leerme. ¡Abrazos!
Antesva, necesitaría saber algo más... a primera vista diría que se trata de simples anuncios que aparecen en tu editor de blogger. Prueba a limpiar las cookies de tu navegador para comprobar si se sigue produciendo.
Debes saber que aplicar o no este truco no cambiará la aparición de publicidad ya que no está para nada relacionado con el tema. Por compararlo con algo, añadir esta calabaza sería como 'editar el color del texto de las entradas'.
¡Saludos!
Un resultado espléndido, Marisol. Me gusta mucho la opacidad que utilizas en tu bloque de entradas del blog de recetas, hace que la lectura sea muy cómoda.
Hola.
Gracias por el script queda genial.
Pero una cosa: tarda mucho en moverse, ¿es normal?
¿Puede modificarse el tiempo de arranque?
gracias
Me temo que no puede hacerse lo que deseas, Libreman. El script está precisamente configurado para que 'se inicie' al terminar de cargar los elementos del blog (de forma que no lo retrase).
Aunque si lo pensamos, son unos segundos de espera (servirá para que los lectores se concentren en la calabaza y se sorprendan aún más cuando la vean moverse de repente).
P.D. Puedes mostrar la calabaza un poco más abajo para que no se note 'la pausa'. Mueve el gadget html-javascript al final de tu barra lateral en el apartado de Diseño>Elementos de la página.
Hola Jaime.
Te comento, la calabaza esta colocada donde me dices, ya que si la coloco en los gatgets de la derecha, ni siquiera se asoma. No se tal vez elegí una calabaza muy vergonzosa,aunque ahora que me he acostumbrado a verla me resulta muy simpática verla merodear y esconderse entre las palabras.
Muchas gracias
muy bueno, ya estan dos calabazas dando vueltas en mi blog, gracias
Gracias, lo he puesto al final de la sidebar pero no ha cambiado nada.
Pero eso es lo de menos ya que sale justo encima de la primera letra del titulo de mi blog y queda muy guapo.
Yo creo que sí, Libreman. Además, hasta el momento en el que empieza a moverse, parece la propia decoración del título.
¡Gracias a ti kiketrucker! Suerte con los blogs.
Hola jaime me preguntaba si es posible hacer que esta calabaza al pasar el mouse por ella se vuelvan un poco transparente, sería genial si encuentras la forma. Te quedó genial el truco.
Hola jaime soy yo de nuevo solo era para decir que ya logré hacer lo que te decia, de todos modos muchas gracias :)
Ana, ahora que lo pienso resulta muy cómodo que aparezca únicamente tras las entradas del blog. Esto permite que los lectores puedan leer sin la incomodidad de ver una calabaza moviéndose sobre el texto. Me encanta tal y como lo tienes.
¡Saludos!
Claro que podría hacerse Jiraiya. Envíame la dirección de tu blog para comparar el color del fondo con el grado de opacidad necesario y ofrecerte así el código para instalar tu calabaza-transparente.
Perfecto entonces, Jiraiya. Simplemente deberíamos enmarcar el código en un div y atribuírle la propiedad opacity en un :hover ;).
Gracias Jaime, a mi también me gusta la aparición, pienso ir cambiando la imagen, de acuerdo a la ocasión.
Un saludo
Quizás eso sea precisamente lo mejor del truco: el poder cambiar la imagen por cualquier otro icono. Incluso podríamos incluir el logotipo de nuestro blog o una mascota virtual...
Todo queda en nuestra imaginación.
¡Abrazos!
Muchas gracias Jaime ya la puse en mi blog, para estos dias es genial saludazos!
Un artilugio que sin duda le dará al blog ese toque personal que captará el interés de los lectores, Yolanda. ¡Muchas gracias por instalarla!
Abrazotes.
Antesva, el fantasma va de maravilla con el diseño de tu blog, sin duda hiciste una buena elección.
¡Saludos!
Hola ! Recien descubri tu blog el cual me esta ayudando muchisimo para actualizar el mio y mejorarlo. Gracias por compartir tus conocimientos y experiencias. Las explicaciones son tan claras y precisas que me permitiran aplicarlas proximamente.
Saludos , Myrna
¡Bienvenida Myrna! Estoy seguro de que aprenderás muchísimas cosas y de que podrás personalizar tu plantilla hasta obtener un blog muy personal.
¡Saludos!
Hola Jaime: no me funciona este truco, me parece que es por lo del truco de que cargue más rápido el blog, ¿no?
No lo creo Jose, ya que este truco utiliza un script interno y no un enlace a una librería externa como podría ser el que has mencionado (requiere jQuery). Podría deberse a la plantilla en general. ¿Pertenece a las nuevas que ofrece blogger en su diseñador?
Desde luego muy interesante todo el blog, que me ha servido lo que he leido.
Alguien sabe si en la calabaza con movimiento, se puede poner un enlace para que al pinchar en ella, se dirija a otra web?
Un saludo y gracias.
Gracias que buen gadget :)