jueves, 9 de febrero de 2012

Corazones que caen y se desvanecen en el blog


¿No les choca cómo me pongo de meloso en febrero? Pero es que es el mes del amor, así que podemos justificar ver tanta miel por doquier.
Y como no soy el único enamorado, aquí hay una romántica decoración para el blog, se tratan de unos corazones cayendo por el blog, algunos tienen efecto de opacidad y al caer se van desvaneciendo hasta desaparecer. Puedes verlos en este blog de pruebas.

La buena noticia es que sólo necesitamos un simple y sencillo paso para colocarlos en el blog, la mala es que usa jQuery, así que si algo no funciona ya sabes que se debe a las versiones de jQuery.

Aun así, es de esos scripts que no necesitamos tenerlos todo el tiempo, sólo esta temporada de los enamorados.

Para poner estos corazones que caen en tu blog vamos a meterlos dentro de un gadget. Si usas la interfaz antigua entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript.
Si usas la nueva interfaz entra en Diseño | Añadir un gadget | HTML/Javascript.

Ahí pega este código:

<script>
/***** Corazones cayendo en el blog *****/
if(typeof $pdj=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(typeof $pdj=='undefined'){var $pdj=jQuery.noConflict()}if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['corazon']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkZuTfbqGjHipG1SpN30EYZVsGc334T4dK5wopxPNnZzdDd8hMeYlp7Xe4oCnRpC5_cPyy6pcJh6aFYjPKGj0IcwxDrq01f7BsvWhgMbnwxmnKVxZGvpsNsRsHyQPw5wRCzWhpooqjUmw/s32/heart.png";$pdj(document).ready(function(){var c=$pdj(window).width();var d=$pdj(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(8500,10000),function(){$pdj(this).fadeOut('slow',function(){f(a)})})},e(1,9000))};$pdj('<div></div>').attr('id','corazonDiv').css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=15;i++){var g=$pdj('<img/>').attr('src',image_urls['corazon']).css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('corazonDrop').appendTo('#corazonDiv');f(g);g=null};var h=0;var j=0;$pdj(window).resize(function(){c=$pdj(window).width();d=$pdj(window).height()})});</script>

Guarda los cambios y listo, en un 2 x 3 tendrás esta lluvia de corazones en tu blog.
Si se te complica la cuestión del script y su compatibilidad con otras versiones de jQuery, puedes usar otros corazones que caen en el blog que no tienen ninguna complicación.

No hay comentarios:

Publicar un comentario