Los cursores en el blog

Hace mucho tiempo me preguntaron la forma de cambiar el cursor al pasarlo por encima de un enlace, un título, un bloque de texto, una imagen...

Por suerte, todo eso e incluso más puede hacerse en blogger.

Antes de comenzar, conozcamos los tipos de cursores y sus respectivos nombres que serán necesarios para incluirlos en el CSS:

move
wait
crosshair
ne-resize
col-resize
progress
text
vertical-text
help
e-resize
se-resize
s-resize
sw-resize
nw-resize
w-resize
no-drop
row-resize
not-allowed

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

1) Para poner cualquier cursor en el título de las entradas busca este bloque:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

y añade debajo de .post h3 { esta línea:

cursor: NOMBRE;

Para terminar sustituye NOMBRE por el nombre del cursor que más te guste, por ejemplo move.

2) Para poner cualquier cursor en todos los enlaces del blog busca este bloque:

a:hover {
color:$titlecolor;
text-decoration:underline;
}

Y añade debajo de a:hover { esta línea:

cursor: NOMBRE;

Para terminar sustituye NOMBRE por el nombre del cursor que más te guste, por ejemplo help.

3) Para poner cualquier cursor en un enlace específico busca la siguiente etiqueta:

]]></b:skin>

Y encima pega esto:

.enlacecurs:hover{cursor: NOMBRE; text-decoration: none;}

Guarda la plantilla.

Ahora, cada vez que desees insertar el enlace con cursor especial haz uso de esta línea:

<a class="enlacecurs" href="DIRECCION">TITULO</a>

Reemplaza DIRECCION por la URL de tu sitio web y TITULO por el texto del enlace.

Nota:

Para no estar copiando la línea que inserta el enlace con cursor especial, puedes hacer uso de la plantilla de entrada.

4) Para poner cualquier cursor en los enlaces de la sidebar (barra lateral):

Busca la etiqueta ]]></b:skin> y encima añade esto:

.sidebar ul li a:hover{
cursor: NOMBRE;
text-decoration: none;
}

Reemplaza NOMBRE por el nombre del cursor elegido y guarda la plantilla.

5) Para poner cualquier cursor en los enlaces del post-footer o pie del post:

Busca la etiqueta ]]></b:skin> y encima añade esto:

.post-footer ul li a:hover{
cursor: NOMBRE;
text-decoration: none;
}

Reemplaza NOMBRE por el nombre del cursor elegido y guarda la plantilla.

6) Para poner cualquier cursor en las imágenes de las entradas:

Busca la etiqueta ]]></b:skin> y encima añade esto:

.post img a:hover {cursor: NOMBRE;}

Reemplaza NOMBRE por el nombre del cursor elegido y guarda la plantilla.