Cambiar puntero del ratón en blog

Como bien dice el título de esta entrada, os enseñaré a personalizar el puntero del ratón en vuestro blog para que no tenga la apariencia de flecha.

En primer lugar, necesitaréis tener alojada en Internet la imagen del puntero que queréis poner. La extensiones que pueden tener los punteros son las habituales, ANI si el puntero es animado o CUR si no tiene animación.
Un apunte más sobre las extensiones es que podemos utilizar también GIF o PNG, pero solo serán visualizados si navegamos con Mozilla Firefox, si lo estamos haciendo con Internet Explorer estos punteros no serán visualizados.

Una vez tengamos decicida y alojada la imagen del puntero, pasaremos a introducir el código necesario. Para ello, accedemos a la ficha Diseño -> Edición de HTML y buscamos la parte CSS del apartado BODY de nuestra plantilla.

body {

background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;

}

Una vez lo hayamos encontrado, solo hará falta pegar el siguiente código:

cursor: url("url_cursor_1"), url("url_cursor_2"), auto;

Una aclaración sobre el código pegado es que vemos varios cursores en él. La explicación es muy sencilla, hay navegadores que pueden encontrar problemas para mostrar ciertos cursores, como el ejemplo que hemos visto con las extensiones PNG o GIF y el navegador Internet Explorer. Por este motivo, en la definición de nuestro cursor, podemos poner varios cursores en el orden de preferencia siguiente:

1º - cursor_1
2º - cursor_2
3º - auto

El cursor auto indica la típica flecha que, normalmente, tenemos como puntero del ratón.

Si no tenemos cursores alternativos, podemos dejar el código de la siguiente forma:

cursor: url("url_cursor_1"), auto;

Una vez hayamos hecho las modificaciones en el código, solo hará falta guardar y visualizar los resultados.

Para quien no se aclare todavía con el código, aqui le dejo un ejemplo para que vea el resultado del código que deberíamos tener al final.

body {

background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
cursor: url("http://mukuia.bay.livefilestore.com/y1peRlTnNIXRLeSkG1UKAG5kqOIr2hjrk-MJAqHhMKEYGBxMcerJFUSXeSyiAaMmKgXux_LoGEN0T7CH-3iLBd4-w/calendario.png"), auto;

}