22 diciembre 2010

100+ Animaciones navideñas para tu blog


Sé que a muchos les gustan las animaciones, y que son muy buscadas en esta época navideña para poner en el blog.

Si has buscado y buscado, y nada parece convencerte, ve a éste sitio, en donde encontrarás una colección con más de 100 animaciones navideñas gratuitas y sin derechos de autor, para que puedas usar en tu blog siempre y cuando no sea un sitio comercial.

Puedes encontrar  ángeles, arboles navideños, coronas navideñas, guias navideñas, velas con motivos navideños, monos de nieve, bolas de nieve, duendes, Santa Clous's, luces navideñas, bueno, de todo.

Algunas animaciones (gif's), además de prestarse para ser usadas en cualquier columna de tu blog,  también pueden ser usados dentro de  una marquesina, como el caso de santa_driving_car.gif, o el santa_sleigh2.gif.

Hay animaciones tan simpáticas, que inevitablemente soltarás la carcajada cuando las veas...sí que las hay para todos los gustos y sustos :)

¿Cómo pongo la animación en mi blog?


Paso 1. Primero, haz click en enlace del gif (en la columna de enlaces de los gif's a tu izquierda), para visualizar la animación .

Paso 2. Si usas Firefox, haz click en el botón derecho del mouse y seleccionas la opción guardar imagen como. Luego la guardas en una carpeta de tu computadora. Si usas Internet Explorer, igual haces click en el botón derecho de tu mouse, luego seleccionas copiar y luego lo pegas en una carpeta de tu computadora.

Paso 3. Sube la imagen a Blogger, para luego obtener su enlace. Si no sabes como obtener la URL de una imagen que has subido a Blogger, echa un vistazo a esta entrada.

Paso 4. Introduce la URL de la imagen, dentro del siguiente código:

<img src="URL_DEL_GIF" alt="" />

Paso 5. Pega el código donde lo quieras mostrar dentro de los elementos de página, eligiendo la opción HTML/Javascript.

Paso 6. Guarda los cambios.

Nota: Si lo prefieres, puedes subir la imagen a la columna lateral u otra sección de tu plantilla, eligiendo la opción "Imagen" que Blogger ofrece al añadir un gadget.

¿Cómo poner la imagen dentro de una Marquesina?


Si quieres poner el gif dentro de una marquesina, para que éste se desplace, deberás hacer lo mismo, sólo que ahora vas a usar este código:

<marquee direction="right" ><img src="URL_DEL_GIF"  alt="DESCRIPCION_CORTA_DEL_GIF"/></marquee>


Ejemplos

Usando el código anterior, y usando como ejemplo este Santa Moderno y al que el trineo ya no le funciona, y a optado por usar carro por aquello del tiempo (ah, eso sí, es híbrido), tu animación se desplazará así...

santa moderno

Atributos para la etiqueta marquee

Si al código anterior, le agregas scrollamount="50" .

<marquee direction="right"  scrollamount="50" ><img src="URL_DEL_GIF"  alt="DESCRIPCION_CORTA_DEL_GIF"/></marquee>,

A Santa,  parecerá que se le acaba el tiempo para entregar los regalos... ¿O lo estarán siguiendo?

santa moderno


Si  en lugar de direction="right" , pones direction="left" , o simplemente lo eliminas, ya que el valor "left"  es por defecto.

<marquee direction="left"><img src="URL_DEL_GIF"  alt="DESCRIPCION_CORTA_DEL_GIF"/></marquee>

o simplemente...

<marquee><img src="URL_DEL_GIF"  alt="DESCRIPCION_CORTA_DEL_GIF"/></marquee>

Santa, se desplazará hacia la izquierda. Ahora Santa anda de reversazo...o tal vez se arrepintió de entregar los regalos...


santa moderno


Si en lugar de direction "right", agregas behavior="alternate"

<marquee behavior="alternate"><img src="URL_DEL_GIF"  alt="DESCRIPCION_CORTA_DEL_GIF"/></marquee>,

Santa parecerá  no decidirse a dónde ir primero...

santa moderno


Es posible usar todos los atributos que quieras para la marquesina; aunque no todos son soportados por todos los navegadores. Hay que tomar en cuenta también que este elemento "<marquee>" no es un estandar. Pero sí que resulta divertida, por lo menos para probarla ¿verdad?

Ahora relájate, acércate un buen café o cualquier otra bebida caliente ó bien helada ¿por qué no?, pon una buena almohada en tu silla y elige la animación que más te guste para ponerla en tu blog, que la Navidad casi se nos adelanta :D

Nota: Recuerda que lo resultados pueden variar de navegador a navegador.


Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.