miércoles, 22 de diciembre de 2010

100+ Animaciones navideñas para tu blog





Sé que a muchos les gustan las animaciones, y que son muy buscadas en ésta época navideña para engalanar 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 de tu 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?


S 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, 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 default...




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





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 donde ir primero...



santa moderno





Puedes usar todos los atributos que quieras para tu marquesina; aunque no todos son soportados por todos los navegadres. Para aprender otros atributos de la etiqueta marquee, visita: Tutorialspoint o visita esta página en español.



Muy bien, ahora, relajate, acercate 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.




Enlace del sitio: webdeveloper.com

No hay comentarios:

Publicar un comentario