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.

Nieve en el blog usando la propiedad marquee

Se trata de un truco muy sencillo y bastante decorativo, sobre todo si te encuentras en plena Navidad.



Para crear la nieve utilizamos la etiqueta <marquee> y le agregamos varias propiedades, tales como la velocidad, la dirección, la posición o el color.

Sigue los pasos y realiza la sencilla instalación:


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






Pega lo siguiente:

<div id="Nievebalcon"/>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 90px; top: 0px; width: 16px; height: 120px;" scrollamount="7"><span >•</span></marquee>
<marquee direction="down" 110px; behavior="scroll" scrollamount="4" 0px; style="position: absolute; width: 16px; height: 800px;" left: top:><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 116px; top: 5px; width: 16px; height: 560px;" scrollamount="6"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 232px; top: 16px; width: 16px; height: 600px;" scrollamount="3"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 150px; top: 4px; width: 16px; height: 610px;" scrollamount="6"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 214px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 330px; top: 35px; width: 16px; height: 452px;" scrollamount="4"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 246px; top: 15px; width: 16px; height: 530px;" scrollamount="5"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 312px; top: 55px; width: 16px; height: 400px;" scrollamount="6"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 338px; top: 65px; width: 16px; height: 410px;" scrollamount="7"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 354px; top: 35px; width: 16px; height: 460px;" scrollamount="3"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 370px; top: 0px; width: 16px; height: 700px;" scrollamount="2"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 402px; top: 15px; width: 16px; height: 600px;" scrollamount="2"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 115px; top: 0px; width: 16px; height: 70px;" scrollamount="4"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 418px; top: 5px; width: 16px; height: 610px;" scrollamount="6"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 434px; top: 25px; width: 16px; height: 500px;" scrollamount="5"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 450px; top: 25px; width: 16px; height: 450px;" scrollamount="4"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 466px; top: 15px; width: 16px; height: 430px;" scrollamount="2"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 482px; top: 55px; width: 16px; height: 400px;" scrollamount="6"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 386px; top: 5px; width: 16px; height: 570px;" scrollamount="4"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 598px; top: 65px; width: 16px; height: 410px;" scrollamount="3"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 614px; top: 35px; width: 16px; height: 460px;" scrollamount="3"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 894px; top: 15px; width: 16px; height: 260px;" scrollamount="4"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 630px; top: 0px; width: 16px; height: 700px;" scrollamount="1"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 646px; top: 5px; width: 16px; height: 570px;" scrollamount="6"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 386px; top: 5px; width: 16px; height: 470px;" scrollamount="4"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 662px; top: 15px; width: 16px; height: 600px;" scrollamount="3"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 678px; top: 5px; width: 16px; height: 610px;" scrollamount="2"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 694px; top: 25px; width: 16px; height: 500px;" scrollamount="1"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 710px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 726px; top: 15px; width: 16px; height: 430px;" scrollamount="5"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 742px; top: 55px; width: 16px; height: 400px;" scrollamount="6"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 758px; top: 65px; width: 16px; height: 410px;" scrollamount="2"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 774px; top: 35px; width: 16px; height: 460px;" scrollamount="6"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 974px; top: 35px; width: 16px; height: 160px;" scrollamount="3"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 790px; top: 0px; width: 16px; height: 700px;" scrollamount="4"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 806px; top: 5px; width: 16px; height: 570px;" scrollamount="4"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 828px; top: 5px; width: 16px; height: 610px;" scrollamount="1"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 844px; top: 25px; width: 16px; height: 600px;" scrollamount="6"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 860px; top: 25px; width: 16px; height: 460px;" scrollamount="4"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 880px; top: 22px; width: 16px; height: 460px;" scrollamount="5"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 892px; top: 55px; width: 16px; height: 400px;" scrollamount="4"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 898px; top: 65px; width: 16px; height: 410px;" scrollamount="6"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 900px; top: 35px; width: 16px; height: 460px;" scrollamount="2"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 90px; top: 12px; width: 16px; height: 760px;" scrollamount="5"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 180px; top: 5px; width: 16px; height: 560px;" scrollamount="7"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 206px; top: 15px; width: 16px; height: 600px;" scrollamount="7"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 399px; top: 5px; width: 16px; height: 630px;" scrollamount="6"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 419px; top: 25px; width: 16px; height: 550px;" scrollamount="3"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 520px; top: 25px; width: 16px; height: 420px;" scrollamount="4"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 656px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 860px; top: 55px; width: 16px; height: 430px;" scrollamount="2"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 870px; top: 65px; width: 16px; height: 410px;" scrollamount="4"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 290px; top: 35px; width: 16px; height: 460px;" scrollamount="1"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 625px; top: 0px; width: 16px; height: 700px;" scrollamount="6"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 580px; top: 5px; width: 16px; height: 570px;" scrollamount="7"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 306px; top: 15px; width: 16px; height: 300px;" scrollamount="2"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 549px; top: 5px; width: 16px; height: 610px;" scrollamount="4"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 209px; top: 25px; width: 16px; height: 280px;" scrollamount="7"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 1070px; top: 25px; width: 16px; height: 450px;" scrollamount="6"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 950px; top: 15px; width: 16px; height: 430px;" scrollamount="2"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 260px; top: 55px; width: 16px; height: 200px;" scrollamount="5"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 770px; top: 65px; width: 16px; height: 210px;" scrollamount="5"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 390px; top: 35px; width: 16px; height: 360px;" scrollamount="6"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 915px; top: 0px; width: 16px; height: 50px;" scrollamount="3"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 425px; top: 0px; width: 16px; height: 50px;" scrollamount="3"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 380px; top: 5px; width: 16px; height: 70px;" scrollamount="3"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 806px; top: 15px; width: 16px; height: 100px;" scrollamount="2"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 399px; top: 5px; width: 16px; height: 110px;" scrollamount="3"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 919px; top: 25px; width: 16px; height: 280px;" scrollamount="7"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 270px; top: 5px; width: 16px; height: 150px;" scrollamount="2"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 750px; top: 15px; width: 16px; height: 130px;" scrollamount="4"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 660px; top: 5px; width: 16px; height: 100px;" scrollamount="8"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 570px; top: 5px; width: 16px; height: 110px;" scrollamount="4"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 690px; top: 5px; width: 16px; height: 60px;" scrollamount="6"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 965px; top: 0px; width: 16px; height: 50px;" scrollamount="3"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 1200px; top: 0px; width: 16px; height: 50px;" scrollamount="6"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 1010px; top: 0px; width: 16px; height: 150px;" scrollamount="7"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 390px; top: 5px; width: 16px; height: 70px;" scrollamount="5"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 466px; top: 15px; width: 16px; height: 100px;" scrollamount="2"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 259px; top: 5px; width: 16px; height: 110px;" scrollamount="4"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 490px; top: 25px; width: 16px; height: 280px;" scrollamount="5"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 530px; top: 5px; width: 16px; height: 150px;" scrollamount="8"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 770px; top: 15px; width: 16px; height: 130px;" scrollamount="7"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 810px; top: 5px; width: 16px; height: 100px;" scrollamount="2"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 560px; top: 5px; width: 16px; height: 110px;" scrollamount="6"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 620px; top: 5px; width: 16px; height: 160px;" scrollamount="4"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 740px; top: 10px; width: 16px; height: 100px;" scrollamount="5"><span style="color: #ffffff;">•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 340px; top: 0px; width: 16px; height: 100px;" scrollamount="7"><span >•</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 890px; top: 0px; width: 16px; height: 200px;" scrollamount="8"><span style="color: #ffffff;">•</span></marquee>
</div>


En el código encontrarás varias líneas como esta:

<marquee behavior="scroll" direction="down" style="position: absolute; left: 100px; top: 20px; width: 18px; height: 120px;" scrollamount="5"><span style="color: #ffffff;"></span></marquee>

Cada una tiene valores únicos, en cuanto a la posición del copo y la velocidad a la que cae.

El círculo resaltado en verde () es el copo de nieve. Afortunadamente, puede sustituirse por cualquier otro símbolo (por ejemplo, un asterísco: *) o frase (como: Feliz Navidad!), además de una imagen.

En caso de querer usar un icono, necesitas usar esta línea:

<marquee behavior="scroll" direction="down" style="position: absolute; left: 100px; top: 20px; width: 18px; height: 120px;" scrollamount="5"><span style="color: #ffffff;"><img src="URL DE LA IMAGEN"/></span></marquee>

Y sustituir URL DE LA IMAGEN por la dirección de la imagen escogida [+].

Por otro lado, si quieres añadir una frase personal y que ésta caiga al igual que los copos de nieve, sustituye el "copo" () del primer código por el texto.

Ahora veamos la función de cada valor:

direction="down" La dirección a la que se dirige el copo de nieve (en este caso, hacia abajo).

left: 100px; Esta es la distancia desde la izquierda de la pantalla hasta la posición desde la cual el copo caerá. Será importante que cambiemos el valor (100) por otro diferente en cada caso, sumando 10 - 20 para que los copos no se junten demasiado.

top: 20px; El lugar en el que aparece el copo, empezando desde arriba. El valor (20) puede cambiarse, para que cada copo caiga a una distancia diferente.

width: 18px; y height: 120px; Representan la anchura (18) y altura (120) del copo. Si usas una imagen, tendrás que adaptar la anchura y la altura al tamaño de ésta.

scrollamount="5" Indican la velocidad a la que caerá el copo. Puedes incrementar o disminuir el valor (5) para hacer que el copo caiga a mayor velocidad o a menor velocidad.


Una vez hayas editado los valores necesarios, guarda el gadget.

Héctor Gutiérrez dice...

¡JA! "truco muy sencillo"

¡JA! "fácil instalación"

Copy-Paste... eso sí es fácil.

Agradezcamos al dios de los blogs por traer al mundo a gente como usted, porque yo ese código no lo hago ni aunque me paguen...

Gracias. Tantas como copos de nieve caen en su blog durante dos días. Multiplicadas por el número de gatos que han aparecido aquí.

Helena dice...

Me ha encantado! ya lo he puesto ;-)

Sanchete dice...

Gracias por este truco, enseguida he querido instalarlo en mi blog! La pena que ahora te voy a comentar es que, a pesar de este truco me funciona perfectamente, cuando lo tengo instalado tengo como "bloqueado" el menú desplegable, es decir, no se despliegan las opciones que tendrían que aparecer al pasar el ratón por encima. Es como si este truco formara una especie de "muro" entre el ratón y el menú, ¿tienes idea de como solucionarlo?

Mil gracias :)

Jaime Trujillo Escobedo dice...

Héctor Gutiérrez, en efecto, es sencillísimo. Muchísimas gracias a tí por comentar, jajajaja me encantó tu forma de dar las gracias (Tantas como copos de nieve caen en su blog durante dos días. Multiplicadas por el número de gatos que han aparecido aquí) :P.

Jaime Trujillo Escobedo dice...

¡Ya veo Helena, Te ha quedado divino!

Veo que has cambiado el color de los copos de nieve, los has dejado preciosos ;).

Jaime Trujillo Escobedo dice...

Es cierto todo lo que dices Sanchete. Te comento que acabo de entrar a tu blog y veo que conseguiste implementar la nieve en el blog sin que le afectase al menú (con un script).

Aún así, si en otra ocasión quieres implementar este truco avísame y encontraremos una solución ;).

¡Abrazos y muchísimas felicidades por la entrada número 100!

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