Personalizar el cursor en el blog

Ya aprendimos a usar distintos cursores en el blog, así como a colocar una frase personal que siga el camino de éste.

Con esta entrada aprenderemos a personalizar el cursor del blog, escogiendo una imagen cualquiera para que aparezca al abrir el blog.

Para añadir uno de estos iconos en el blog tienes dos opciones:

Mediante el código ofrecido en TotallyFreeCursors:

1) Accede a Totally Free Cursors y elige uno de las múltiples opciones.

2) Una vez escogido, haz clic en su nombre:



3) Copia el primer código que aparece debajo de "MySpace Profile 1.0 Codes"...

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </body> y pégalo justo encima...

<div align="center" style="z-index:9;visibility:visible;"><a href="http://www.totallyfreecursors.com/" target="_blank" class="tfc"><img src="http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif" border="0" width="88" height="31" alt="Free Blue Drk Glitter Pointer MySpace Cursors at www.totallyfreecursors.com" /></a></div><style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/bluedkglitter.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/bluedkglitter.gif"), auto;}</style>

El código de arriba muestra el aspecto que tendrá. Para deshacerte de la publicidad, bastará con eliminar lo que ves en naranja.

Agregando una línea de CSS con la dirección del cursor:

1) Busca un bloque similar a este y añade la línea marcada en verde:

body {
cursor: url("URL CURSOR ANI"), url("URL CURSOR GIF, PNG O JPG"), auto;
background:#fff;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

2) Reemplaza URL CURSOR ANI por la dirección de cualquier cursor en formato .ani (de manera que pueda visualizarse con Internet Explorer) y URL CURSOR GIF, PNG O JPG por la dirección de cualquier cursor en formato .gif, .png o .jpg (de manera que pueda visualizarse con Firefox y demás navegadores).

Ambas URL pueden encontrarse en la misma página (TotallyFreeCursors), al copiar el código del cursor. Después, bastará con introducirlas en la línea de CSS.

3) Haz vista previa para ver el resultado y guarda tu plantilla para terminar...




Nota:

Si en lugar de añadir el cursor personalizado en todo el blog, prefieres utilizarlo simplemente en determinados lugares de la plantilla avísame y podré ayudarte.