Esta es una forma muy peculiar de adornar el cursor, y en cierto modo la página. Se trata de hacer que salgan destellos del cursor cuando éste se mueve y se van esparciendo y cayendo con forme se sigue moviendo el cursor.
Puedes ver un ejemplo en esta página de Wallpapers para el móvil gratis. Cuando cargue la página mueve el cursor a donde quieras y verás cómo salen y caen los destellos del mouse; entre más muevas el cursor más destellos saldrán.
Para poner este efecto del cursor en tu blog, entra en Diseño > Edición de HTML y antes de </head> pega lo siguiente:
<script type='text/javascript'>
// <![CDATA[
var colour="#FFFFFF";
var sparkles=40;
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>
En var colour="#FFFFFF"; modifica el color de los destellos, en este caso son blancos pero puedes cambiarlos por el color que quieras, sólo te recomiendo que sea un color que contraste con el fondo del blog para que pueda apreciarse.
De esta forma puedes crear un ambiente "mágico" en el blog.
Tantos códigos me han dado mucha sed ¿qué tal una cerveza?



Enlaza este blog
Suscribirse al feed
Suscribirse por e-mail
Agregar en tu iGoogle
Seguir en Twitter
Enviar un correo
¿Dónde estás Superman?
Iconos RSS




42 comentarios:
siempre creì que era nieve :C
jajaja
yo lo puse en mi blog pensando que era un buen motivo para navidad, por aquello de 'la nieve'...
jajaja
saludos
Whoa me gusto en primera la web de los fondos, de hecho los descargue pero en mi telefono salen pequeños es Iphone
pero igual se ve genial es efecto, estare colocandolo en proximos dias por que apenas y me da tiempo para postear en un blog ahora ok
nos vemos
HOLA POTRO, SOY WALTER DE COSTA RICA, ESPERO QUE TODOS TUS ASUNTOS MARCHEN BIEN. SOLO QUIERO AGRADECERTE POR ESTE GRANDIOSO BLOG. DESEO CONTARTE QUE ESTOY IMPARTIENDO UNA PEQUE;A CAPACITACION SOBRE PAGINAS WEB EN LA INSTITUCION EDUCATIVA DONDE LABORO (http://cneefcg.blogspot.com/)Y UTILIZAMOS A CIUDAD BLOGGER COMO REFERENCIA PUES A MI CRITERIO ES EL MEJOR DE TODAS LAS FUENTES DE TRUCOS BLOGGER. YA TE CONOCEN MAS PERSONAS. MUCHAS GRACIAS.
Te quedo super en la de fondos 240 felicitaciones por esos buenos trucos!
RIDDLE, sí tiene el aspecto de nieve y combina perfecto para la época, aunque igual se puede usar todo el tiempo. Saludos.
Alex, son fondos de pantalla para teléfonos de 240 x 320px. Es una lástima que hayas cerrado temporalmente el otro blog pero entiendo que cuando no hay tiempo es difícil postear. Un abrazo!
Walter, de verdad muchas gracias por tus comentarios. Me siento honrado saber que este humilde blog ha sido de ayuda para otras personas. Un saludo!
fabian, gracias por tus comentarios, qué bueno que te ha gustado =) Saludos!
potro x favor podes subir un tutorial de como instalar el reproductor flow player al blog...
Hola jonathan,
Desconozco ese reproductor, lo siento =S
Pues si pero a veces es mucho estar con tantos blogs al que cerre temporalmente es popular pero ya no puedo más lo regalare o haber si alguien se anima a ayudar pues me vere menos precionado
nos vemos
y gran post para esta navidad
hola potro gracias pero no una manera de poner este script de manera abreviado, osea crear un .txt y subirlo a una web de alojamiento de archivos y ponerlo en la plantilla por medio de al url, para luego cuando quiera quitarlo no enredarme con tanto código que tiene.
Salu2
Ummm no creo, el script tiene muchas funciones () que llamar para su funcionamiento.
Pero no le veo gran problema, cuando lo quieras quitar regresa a este post para que veas cuál es el código que debes quitar.
Saludos.
listo ya lo puse, cuando lo valla a quitar regreso por este post, lo mando a marcadores ;).
Salu2.
El potro, existe alguna manera de reemplazar las crucesitas que salen del cursor x otro caracter?
awwww k lindo cursor con estrellitas me encanto!!!
creiste k ya no te leia ehhhhh?????
ahora ya sabes k si!!!
te mando muuuuchos besos!!!
xoxoxoxo
Seguro esta muy divertido tener el curso con destellos..
cargohe, vale, suerte!
jared, lamentablemente sólo se puede configurar el color de las estrellas, nada más. Saludos.
elizaquiereamor, yo sé que me lees y que me quieres casi tanto como yo a ti =)
ARMANDOKUN, siii, como que saca el niño que todos llevamos dentro ;)
Hola :El Potro" vuelvo a ti esperando que puedas ayudarme, mira, voy a cambiar el estilo de comentarios en el Blog y voy a poner el de DISQUS, y kisiera saber como cambiar el contador de comentarios de blogger y poner el de DISQUS. Este es el contador de DISCUS (http://disqus.com/)(http://ivpaste.com/view.php?id=39967) pero no se que kitar o que cambiar en mi plantilla de Blogger, ya hice todo lo q esta a mi alcance pero no logre nada, espero que me ayudes.
Seria bueno que tambien publicaras una entrada acerca de ese servicio, esta buenisimo.
Mi Blog D Pruebas es: http://webprosperity-negocio.blogspot.com/2009/11/buscador-google.html#disqus_thread
Otra duda, como hago para que cuando se de click al enlace COMENTARIOS (2) se agregue a la URL #disqus_thread y no el default de blogger #comments
Mira, en este blog hay un ejemplo (http://naruedyoh.blogspot.com/2009/11/no-hay-nativos-digitales.html#disqus_thread)
Me encanta tú blog!. Puedes decirme como se cambia el color de las estrellas?. Gracias mil.
Hola, tienes un premio esperando por tí en mi Blog, por favor pasa por el, FELICITACIONES!!! Un abrazo
@rielCastellanos, nunca he probado Discus, así que no sabría cómo ayudarte =(
carla, al inicio del código hay una parte marcada en color rojo, debes cambiar donde dice #FFFFFF por el código del color que quieres.
DE INTERES, wow, muchas gracias, ahora mismo me doy una vuelta =) Saludos!
hola genio (A) jaja yo ya no te digo mas potro :P
disculpa que te haga la pregunta aca, es que no sabia donde hacerla, tengo una duda, yo a veces respondo los comentarios que me hacen al igual que vos, ahora a veces me salteo una palabra o la escribo dos veces por distraccion, entonces lo que quiero saber es como se puede hacer (en caso de que se pueda) para borrar los comentarios que yo hago o sea borrar un comentario especifico del administrador del blog o sea yo :P
muchas graciass, un abrazo grandee
PD: sos profesor? porque tenes o eso pareciera una excelente manera de expresarte y explicar las cosas (o sea lo que me falta a mi :P jajja)
un abrazoo :)
Jajaja, me parece que tú te explicas mejor que yo (créeme).
Para borrar un comentario, ya sea de un usuario o tuyo, sólo entra en la entrada que tiene el comentario y abajo del comentario que quieres eliminar verás un ícono de un basurero, haz click ahí para eliminar el comentario.
Un abrazo y gracias por tus comentarios =)
ese icono solo me aparece para los comentarios de los demas, pero en los mios no aparece :S
mira: http://sites.google.com/site/probar123456/probar1234567/asd.jpg?attredirects=0
Pon en tu plantilla esto:
.comment-timestamp {
display: block;
float: left;
}
Con eso debe aparecer.
Saludos.
jojo, yo siempre empiezo por tus pistas (A) y termino llegando a la solucion :), no era eso :P, me faltaba el siguiente codigo dentro de este codigo
if cond='data:comment.author == data:post.author'>
...
....
include data='comment' name='commentDeleteIcon'/>
...
...
muchas gracias como siempre :)
un abrazo grandee
Jaja, creo que tendré que cambiar el nombre del blog por Las Pistas de Blue =P
Qué bueno que ya diste con la solución.
Un abrazo!
Hola, lo logre, ya quedo perfectamente instalado, si tienes un chance, me gustaria que probaras el nuevo sistema y me dieras tu opinion ya que hace dias queria algo distinto a este formulario de Blogger, dime q tal su desempeño y si no te da problemas.
Enlace --->>> http://blogunah.blogspot.com/
Gracias amigo
Muy bueno bro! lo acabo de ver en el blog de Carla y queda fantástico! se lo voy a recomendar a una amiga que tiene un blog personal, que seguro lo va a agregar!
Un abrazo!!!
No lo había visto pero sí le quedó muy bien. Ojalá a tu amiga le guste.
Un abrazo!
Queda fenomenal Potro. Eres un fenómeno, de verdad
Siempre mil gracias
Ahora una preguntilla, se podía cambiar la cruz por otro símbolo como estrella, corazón etc?
Aquí lo puse
http://elclubdemisamores-meri.blogspot.com/
Hola Meri,
Lamentablemente sólo se puede cambiar el color de las estrellitas y nada más =(
Te ha quedado muy bien en tu blog.
Muchas gracias por tus comentarios.
Saludos!
Gracias por tu respuesta.
Sería un puntazo poder cambiar el simbolito
Saludos
muchas gracias, está super !
Qué bueno que te ha gustado :)
Hola, la verdad no sé si este comentario lo llegues a leer, pero quisiera saber si existe alguna manera de cambiar el caracter que cae desde el cursor, en este código lo que cae son "+", y no sé, por ejemplo se podrá cambiar por un "*" ???, he tratado de ver el código ya varias veces y ver que cambiar, pero no tengo ni la menor idea, no hay nada en referencia al caracter utilizado
de antemano muchas gracias
Saludos!
Hola Mr.Juglar,
Lamentablemente no se puede modificar, lo único configurable es el color, nada más.
Saludos.
Holaaa
muy lindo
pero tengo un problemita y es k lo pongo en mi blog de prueba pero en el cual lo quiero poner lo funciona y ambos tienen la misma plantilla
que puedo hacer?
Hola Lucy Veras,
Debe ser por algún otro script que tienes, muy posiblemente el del título en movimiento.
Generalmente estos tipos de scripts no son compatibles con otros.
Saludos.
ahh gracias
lastima
y tan lindos k se ven
Hey me acaba de pasar algo medio raro
y es k cuando estoy en editar diseño el cursor tiene los destellos pero no en el blog
Eso es porque cuando estás en Elementos de la página los demás scripts no se ejecutan por lo que no interfieren con su funcionamiento, pero cuando estás ya en el blog los demás scripts arrancan y obstruyen a este :(
como le cambio el color a los destellos, como se q escribir para cada color, x ejemplo, rosa?
Hola Chibi,
Para el color rosa usa este código #FA58AC
Aquí hay una tabla con más códigos de colores:
http://html-color-codes.info/codigos-de-colores-hexadecimales/
Publicar un comentario en la entrada
Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.