Estrellas navideñas que caen y se desvanecen en el blog

Como ya estamos en épocas navideñas y no falta el bloguero que quiera decorar sus blogs con gadgets y demás artilugios sus blog, en Mil Trucos Blogger hemos decidido publicar desde esta semana varios trucos y gadgets navideños perfectos para ser agregados en sus blogs para esta época y darle un toque nuevo y navideño a sus blogs.

Estrellas navideñas que caen y se desvanecen en el blog 

Así que acorde con lo anterior, he hecho un pequeño truco para Blogger, el cual consta de unas bonitas estrellas que van cayendo lentamente hasta desvanecerse.

La estrella que se muestra en el truco es la siguiente:

Para agregar este truco ve  a Diseño | Añadir un gadget | HTML/Javascript y allí pegas lo siguiente:

<script>
    /***** Estrellas 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']="http://www.miltrucosblogger.com/wp-content/uploads/2014/12/truco-2Bestrella-2Bde-2Bnavidad-2Bblogger.gif";$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>

Por ultimo guardas los cambios y listo. Puedes ver el truco en este blog de pruebas.

Recuerda que el truco utiliza librería jQuery así que si no funciona ten en cuenta que se debe a la versión que usas de jQuery.

0
Shares

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *