Crear efecto de Estrella Fugaz en Blogger

Aprende cómo agregar un efecto de estrella fugaz al mover el cursor en Blogger. Decora tu sitio fácilmente añadiendo un gadget o widget HTML/JavaScript con un código liviano que no afecta la velocidad de tu blog.

Efecto de estrella fugaz en el mouse para Blogger — Creación e instalación del efecto interactivo de destellos mediante un gadget de Blogger.

¿Por qué añadir un efecto de estrellas fugaces al cursor en Blogger?

Agregar efectos interactivos al movimiento del ratón es una forma dinámica de personalizar la apariencia de tu blog. Este código crea un rastro de estrellas y destellos luminosos que siguen suavemente el cursor antes de caer con un efecto estilo nieve.

Al implementarse a través de un gadget o widget, el código no satura la plantilla principal, es extremadamente liviano y no genera retrasos de carga ni interfiere con los clics de tus visitantes.

Paso 1: Agrega un Gadget HTML/JavaScript en tu Blog

Para instalar este widget sin tocar la plantilla HTML, dirígete a tu panel de Blogger y sigue estos sencillos pasos:

Ingresa a Blogger > Diseño.
Haz clic en Agregar un Gadget en cualquier sección (preferiblemente en el pie de página o barra lateral).
Selecciona la opción HTML/JavaScript.
Deja el título en blanco y pega el siguiente código dentro del área de contenido:

<!-- Inicio Gadget Estrella Fugaz -->
<script type='text/javascript'>//<![CDATA[
var colour="#ffffff",sparkles=60,x=ox=400,y=oy=300,swide=800,shigh=600,sleft=sdown=0,tiny=new Array,star=new Array,starv=new Array,starx=new Array,stary=new Array,tinyx=new Array,tinyy=new Array,tinyv=new Array;function sparkle(){var t;if(x!=ox||y!=oy)for(ox=x,oy=y,t=0;t<sparkles;t++)if(!starv[t]){star[t].style.left=(starx[t]=x)+"px",star[t].style.top=(stary[t]=y)+"px",star[t].style.clip="rect(0px, 5px, 5px, 0px)",star[t].style.visibility="visible",starv[t]=50;break}for(t=0;t<sparkles;t++)starv[t]&&update_star(t),tinyv[t]&&update_tiny(t);setTimeout(sparkle,40)}function update_star(t){if(25==--starv[t]&&(star[t].style.clip="rect(1px, 4px, 4px, 1px)"),starv[t]){if(stary[t]+=1+3*Math.random(),!(stary[t]<shigh+sdown))return star[t].style.visibility="hidden",void(starv[t]=0);star[t].style.top=stary[t]+"px",starx[t]+=(t%5-2)/5,star[t].style.left=starx[t]+"px"}else tinyv[t]=50,tiny[t].style.top=(tinyy[t]=stary[t])+"px",tiny[t].style.left=(tinyx[t]=starx[t])+"px",tiny[t].style.width="2px",tiny[t].style.height="2px",star[t].style.visibility="hidden",tiny[t].style.visibility="visible"}function update_tiny(t){if(25==--tinyv[t]&&(tiny[t].style.width="1px",tiny[t].style.height="1px"),tinyv[t]){if(tinyy[t]+=1+3*Math.random(),!(tinyy[t]<shigh+sdown))return tiny[t].style.visibility="hidden",void(tinyv[t]=0);tiny[t].style.top=tinyy[t]+"px",tinyx[t]+=(t%5-2)/5,tiny[t].style.left=tinyx[t]+"px"}else tiny[t].style.visibility="hidden"}function mouse(t){set_scroll(),y=t?t.pageY:event.y+sdown,x=t?t.pageX:event.x+sleft}function set_scroll(){"number"==typeof self.pageYOffset?(sdown=self.pageYOffset,sleft=self.pageXOffset):document.body&&(document.body.scrollTop||document.body.scrollLeft)?(sdown=document.body.scrollTop,sleft=document.body.scrollLeft):document.documentElement&&(document.documentElement.scrollTop||document.documentElement.scrollLeft)?(sleft=document.documentElement.scrollLeft,sdown=document.documentElement.scrollTop):(sdown=0,sleft=0)}function set_width(){"number"==typeof self.innerWidth?(swide=self.innerWidth,shigh=self.innerHeight):document.documentElement&&document.documentElement.clientWidth?(swide=document.documentElement.clientWidth,shigh=document.documentElement.clientHeight):document.body&&(swide=document.body.clientWidth,shigh=document.body.clientHeight)}function createDiv(t,e){var n=document.createElement("div");return n.style.position="absolute",n.style.height=t+"px",n.style.width=e+"px",n.style.overflow="hidden",n.style.backgroundColor=colour,n.style.pointerEvents="none",n.style.zIndex="999999",n}function initSparkles(){if(document.getElementById){for(var t=0;t<sparkles;t++){var e=createDiv(3,3);e.style.visibility="hidden",document.body.appendChild(tiny[t]=e),starv[t]=0,tinyv[t]=0,(e=createDiv(5,5)).style.backgroundColor="transparent",e.style.visibility="hidden";var n=createDiv(1,5),i=createDiv(5,1);e.appendChild(n),e.appendChild(i),n.style.top="2px",n.style.left="0px",i.style.top="0px",i.style.left="2px",document.body.appendChild(star[t]=e)}set_width(),sparkle()}}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",initSparkles):initSparkles(),document.onmousemove=mouse,window.onresize=set_width;
//]]></script>
<!-- Fin Gadget Estrella Fugaz -->

Personalización y Ajustes del Efecto

Puedes personalizar la apariencia de las estrellas modificando fácilmente los valores que se encuentran al inicio del código:

Color de las estrellas (colour): Por defecto el valor es #ffffff (blanco). Puedes cambiarlo por el código de color Hexadecimal que prefieras para combinar con el fondo de tu blog.
Cantidad de destellos (sparkles): Viene configurado con 60 estrellas. Si prefieres un efecto más discreto, reduce la cifra a 20 o 30.