Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Calabaza de Halloween que se mueve libremente por el blog

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.


Diseño>añadir gadget (elemento de página)>html-javascript

trucos ayuda blogger



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 = "http://1.bp.blogspot.com/_gjBqKNTws4M/TL3hGpp_Z-I/AAAAAAAAFGY/20GMO4p6_Sw/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.

Bulma dice...

Gracias Jaime es genial!!;)

Jaime Trujillo Escobedo dice...

¡Qué calabaza tan grande has puesto Bulma! :D Me alegra mucho que te guste.

Sergiop dice...

Todo un éxito tu truco, otra maravilla que has puesto en el blog. Gracias por tanta ayuda.

Jaime Trujillo Escobedo dice...

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!

Andres Troya dice...

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.

Jaime Trujillo Escobedo dice...

Me alegra que te guste el truco, Andrés. Para cambiar el favicon de blogger sigue los pasos que indico en esta entrada.

¡Saludos!

Alex494 dice...

jajaa muy bueno Jaime y muy facil de insertar en el blog. Gracias.

Delio dice...

Eres un crack, m'encanta! yo he puesto una estrella azul que iré cambiando.
Un saludo.

Jaime Trujillo Escobedo dice...

Perfecto entonces, Delio. Lo mejor de este truco es que no tiene que tratarse de una calabaza, podemos editar el icono a nuestro gusto.

Jaime Trujillo Escobedo dice...

Alex494, al tener una plantilla con fondo oscuro la calabaza se ve muy realista.

¡Saludos!

Zahira dice...

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.

aisansal dice...

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

ANTESVA dice...

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

MARISOL dice...

Me ha quedado chulisima, muchas gracias.

ANTESVA dice...

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

Jaime Trujillo Escobedo dice...

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.

Jaime Trujillo Escobedo dice...

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

Jaime Trujillo Escobedo dice...

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!

Jaime Trujillo Escobedo dice...

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.

Libreman dice...

Hola.
Gracias por el script queda genial.
Pero una cosa: tarda mucho en moverse, ¿es normal?

¿Puede modificarse el tiempo de arranque?
gracias

Jaime Trujillo Escobedo dice...

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.

Ana dice...

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

kiketrucker dice...

muy bueno, ya estan dos calabazas dando vueltas en mi blog, gracias

Libreman dice...

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.

Jaime Trujillo Escobedo dice...

Yo creo que sí, Libreman. Además, hasta el momento en el que empieza a moverse, parece la propia decoración del título.

Jaime Trujillo Escobedo dice...

¡Gracias a ti kiketrucker! Suerte con los blogs.

Jiraiya dice...

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.

Jiraiya dice...

Hola jaime soy yo de nuevo solo era para decir que ya logré hacer lo que te decia, de todos modos muchas gracias :)

Jaime Trujillo Escobedo dice...

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!

Jaime Trujillo Escobedo dice...

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.

Jaime Trujillo Escobedo dice...

Perfecto entonces, Jiraiya. Simplemente deberíamos enmarcar el código en un div y atribuírle la propiedad opacity en un :hover ;).

Ana dice...

Gracias Jaime, a mi también me gusta la aparición, pienso ir cambiando la imagen, de acuerdo a la ocasión.
Un saludo

Jaime Trujillo Escobedo dice...

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!

Yolanda dice...

Muchas gracias Jaime ya la puse en mi blog, para estos dias es genial saludazos!

Jaime Trujillo Escobedo dice...

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.

Jaime Trujillo Escobedo dice...

Antesva, el fantasma va de maravilla con el diseño de tu blog, sin duda hiciste una buena elección.

¡Saludos!

Myrna Marcano dice...

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

Jaime Trujillo Escobedo dice...

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

Jose dice...

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?

Jaime Trujillo Escobedo dice...

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?

Anónimo dice...

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.

jose silva dice...

Gracias que buen gadget :)

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo