Personalizar cursor con Destellos.

Destellos para el cursor en Blogger.

Vamos a adornar nuestro cursor con destellos, este efecto se vera cuando visiten nuestro blog y muevan el cursor por la página que estén viendo, puede aplicarse estando personalizado el cursor o sin estar este personalizado.

Antes de nada es recomendable guardar una plantilla de seguridad por si hay algún problema después y poder volver a recuperar el blog.

Para dar este efecto al cursor  iremos a:
Diseño/Plantilla/Editar HTML.

y ahora buscaremos con Control+F (barra de búsqueda adicional) el siguiente código:

Nota:

Para poder encontrar el código dentro de la plantilla haremos clic en un espacio en blanco de esta y a continuación presionaremos las teclas Control+F.

En la barra de búsqueda pegaremos </head>

Una vez localizado en la línea de arriba pondremos el puntero justo donde termina esta y presionaremos la tecla Enter para bajar un espacio dejando este justo encima de </head>

Ahora pegaremos el siguiente código:

<script type='text/javascript'> // <![CDATA[ var colour="#FFFFFF"; var sparkles=40; /**************************** * Tinkerbell Magic Sparkle * * (c) 2005 mf2fm web-design * * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ****************************/ var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var tiny=new Array(); var star=new Array(); var starv=new Array(); var starx=new Array(); var stary=new Array(); var tinyx=new Array(); var tinyy=new Array(); var tinyv=new Array(); window.onload=function() { if (document.getElementById) { var i, rats, rlef, rdow; for (var i=0; i<sparkles; i++) { var rats=createDiv(3, 3); rats.style.visibility="hidden"; document.body.appendChild(tiny[i]=rats); starv[i]=0; tinyv[i]=0; var rats=createDiv(5, 5); rats.style.backgroundColor="transparent"; rats.style.visibility="hidden"; var rlef=createDiv(1, 5); var rdow=createDiv(5, 1); rats.appendChild(rlef); rats.appendChild(rdow); rlef.style.top="2px"; rlef.style.left="0px"; rdow.style.top="0px"; rdow.style.left="2px"; document.body.appendChild(star[i]=rats); } set_width(); sparkle(); }} function sparkle() { var c; if (x!=ox || y!=oy) { ox=x; oy=y; for (c=0; c<sparkles; c++) if (!starv[c]) { star[c].style.left=(starx[c]=x)+"px"; star[c].style.top=(stary[c]=y)+"px"; star[c].style.clip="rect(0px, 5px, 5px, 0px)"; star[c].style.visibility="visible"; starv[c]=50; break; } } for (c=0; c<sparkles; c++) { if (starv[c]) update_star(c); if (tinyv[c]) update_tiny(c); } setTimeout("sparkle()", 40); } function update_star(i) { if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)"; if (starv[i]) { stary[i]+=1+Math.random()*3; if (stary[i]<shigh+sdown) { star[i].style.top=stary[i]+"px"; starx[i]+=(i%5-2)/5; star[i].style.left=starx[i]+"px"; } else { star[i].style.visibility="hidden"; starv[i]=0; return; } } else { tinyv[i]=50; tiny[i].style.top=(tinyy[i]=stary[i])+"px"; tiny[i].style.left=(tinyx[i]=starx[i])+"px"; tiny[i].style.width="2px"; tiny[i].style.height="2px"; star[i].style.visibility="hidden"; tiny[i].style.visibility="visible" } } function update_tiny(i) { if (--tinyv[i]==25) { tiny[i].style.width="1px"; tiny[i].style.height="1px"; } if (tinyv[i]) { tinyy[i]+=1+Math.random()*3; if (tinyy[i]<shigh+sdown) { tiny[i].style.top=tinyy[i]+"px"; tinyx[i]+=(i%5-2)/5; tiny[i].style.left=tinyx[i]+"px"; } else { tiny[i].style.visibility="hidden"; tinyv[i]=0; return; } } else tiny[i].style.visibility="hidden"; } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sdown; x=(e)?e.pageX:event.x+sleft; } function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } window.onresize=set_width; function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height+"px"; div.style.width=width+"px"; div.style.overflow="hidden"; div.style.backgroundColor=colour; return (div); } // ]]> </script>
 

Si queréis modificar el color ya que por defecto os aparecerán los destellos en color blanco,encontrareis el código para modificar en la 4ª linea  var colour="#FFFFFF"; 

Solo tenéis que cambiar este código en el código a aplicar por el color que queráis, por ejemplo yo he puesto este:

var colour="#DF01D7";

Os dejo un enlace donde podréis encontrar una tabla de colores HTML.

http://html-color-codes.info/codigos-de-colores-hexadecimales/

Una vez realizados los cambios podéis ver si ha funcionado desde la opción Vista previa de la plantilla.

Para guardar los cambios en la plantilla seleccionaremos la opción Guardar Plantilla.

Si no queréis los cambios hacéis clic en Atrás.

Si quereis los cambios haceis clic en Guardar Plantilla. 

Para quitar el efecto en el puntero solo hay que eliminar el código en la plantilla (simplemente es buscarlo y eliminarlo) o restablecer plantilla de artilugios a los valores predeterminados,con esta última opción se perderán todos los cambios que tenéis en el blog  como entradas relacionadas, numeración de páginas etc..así que cuidado. 

Aquí esta ya el código HTML aplicado y cambiado el color.