domingo, 26 de mayo de 2013

Como Crear Efecto Animado De Fuegos Artificiales En Blog

Leave a Comment
Como Crear Efecto Animado De Fuegos Artificiales

En la víspera de Año Nuevo,y en 4 de Julio que celebramos con alegría y tratamos de aprender de los errores que hemos hecho anteriormente. Del mismo modo, en la víspera de Año Nuevo,y en 4 de Julio muchos bloggers les encanta decorar su sitio con los fuegos artificiales. Teniendo esto en mente, hemos diseñado un nuevo widget de fuegos artificiales impresionante, que literalmente producen la chispa ante los ojos de sus visitantes. El efecto de fuegos artificiales no es uno normal porque hemos utilizado jQuery flexible que funciona bastante brillante. Hoy, en este artículo vamos a aprender a añadir el efecto jQuery  de Fuegos Artificiales de Ano Nuevo a tu blog de blogger.


EfectoAnimado de Fireworks (DEMO)


Como Luce el Widget de Fuegos Artificiales de jQuery  ?

No hay una ciencia de planetas en este widgetsolo hemos usado la funcionalidad de Jquery cual crea un efecto Animado de Fuegos Artificiales. Imagino te encantan los fuegos artificiales?este usualmente consiste de cohetes de todo tipo.Con eso en mente, hemos creado a widget basado en Firecrackers. Cuando un visitante, a tu website se mostraran fuegos artificiales animados en tu sitio o blog Mira el ejemplo:




Como Añadir El Efecto De Fuesgos Artificiales en Blogger?

Los pasos mencionados abajo van justo al punto y le tomara menos de 3 minutos para integralo. No Hay necesidad de aprender nadasolo siga los pasos como se mencionan.

Entra en Blogger.com >> Plantilla >> Editar HTML >> Proceda.

En la plantilla, busque el siguiente etiqueta ]]></b:skin> y antes de esta pega el siguiente codigo CSS . Por favor no trate de modificarlo o personalizarlo  CSS podria no resultar como esperamos.

#mblfireworks{
            display: block;     
            width: 1000px;
            height: 735px;
            float: center;
            color:#6F6F6F;
            text-align: center;
            font-size: 12px;
        }
        #mblfireworks a {
            color:#6F6F6F;
        }

Una vez mas en la Plantilla busca la siguiente etiqueta </body> luego debajo de esta pega el codigo completo de Jquery .Si no encuentras la etiqueta de </body> en la plantilla entonces, podrias pegarlo debajo del codigo de Footer.

<div id="mblfireworks">  </div>

<script src="https://mybloggerlab.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="https://mybloggerlab.googlecode.com/files/fireworks.js" type="text/javascript"></script>

<script>
/*Fire Works By MyBloggerLab.com*/  
jQuery(function($){              
Xteam.fireworkShow('#mblfireworks', 100);                
});  
</script>

Todo Listo: Despues de personalizarlo, Guarda la Plantilla presionando el boton de “Guardar Plantilla” .
If You Enjoyed This, Take 5 Seconds To Share It

0 comentarios:

Publicar un comentario