Hoy veremos como cambiar el cursor en nuestro Blog con dos métodos algo radicales aunque muy eficaces. Hace unos años dejó de funcionar el método antiguo para efectuar esta modificación, dejando así inutilizable el efecto hover al posicionar el cursor sobre enlaces o imágenes.
En esta guía se exponen dos métodos para realizar esta modificación: el primer método sirve para todo el blog y el segundo para páginas o entradas individuales. Haz clic en el método que quieras para ser redirigido de forma automática.
Lo primordial e indispensable será escoger el diseño a utilizar de vuestra página de preferencia. Recomiendo la web Cursors-4U por la cantidad y variedad de cursores que tienen, pero también sirven otras como Totally Free Cursors o RealWorld Graphics.
MÉTODO 1: PARA TODO EL BLOG
Nos dirigirnos a la parte de Tema > Editar HTML de nuestra plantilla y abrimos el buscador del editor.
Ahora buscamos la etiqueta
Una vez pegado en la plantilla ya tendremos nuestro cursor listo, ahora vamos con el cursor alternativo (hover) para los elementos que queramos.
Para ello seguiremos el mismo proceso, buscamos otro diseño a ser posible que sólo cambie el color para que resulte más elegante. Después, lo pegaremos justo debajo de nuestro anterior diseño.
Lo siguiente será decidir qué elementos de nuestro Blog queremos que al pasar el cursor sobre ellos éste cambie. En mi caso, recomiendo utilizarlo con las etiquetas de estos elementos:
Finalmente nuestro código debe quedar como en este ejemplo de abajo:
/* Start http://www.cursors-4u.com */
* {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), auto !important;}
* a, img, kbd, button {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur117.cur), auto !important;}
/* End http://www.cursors-4u.com */
MÉTODO 2: PARA PÁGINAS Y ENTRADAS
Si lo que deseas es cambiar el cursor solo en una entrada o página concreta al igual que he hecho yo en esta publicación, copia el código de la pestaña Blogger/Blogspot, la opción para la Nueva Interfaz de Blogger.
A continuación, pega ese texto en la ventana de edición de la página/entrada donde quieras aplicarlo. Debes pegarlo en la pestaña HTML, normalmente al final de todo para que no nos estorbe al editar la publicación.
Si utilizas un protocolo HTTPS en tu web, lo más probable será que te aparezca el siguiente error.
Simplemente pulsa en Reparar y el propio editor hará el trabajo sucio o puedes corregirlo manualmente añadiendo la letra
Para añadir un cursor alternativo a la publicación, es tan sencillo como pegar el código del nuevo diseño debajo del anterior, añadiendo nuevamente los elementos en los que queramos que éste cambie. Los elementos debemos incluirlos justo entre el asterisco
El resultado final del código debe ser parecido a este. He incluido los espacios pertinentes para una mejor interpretación:
<style type="text/css">
* {cursor: url(https://cur.cursors-4u.net/cursors/cur-2/cur116.cur), auto;}</style>
<a href="http://www.cursors-4u.com/cursor/2008/12/17/cool-blue-outer-glow-pointer.html" target="_blank" title="Cool Blue Outer Glow Pointer"><img alt="Cool Blue Outer Glow Pointer" border="0" src="https://cur.cursors-4u.net/cursor.png" style="position: absolute; right: 0px; top: 0px;" /></a>
<style type="text/css">
* a, img, kbd, button {cursor: url(https://cur.cursors-4u.net/cursors/cur-2/cur117.cur), auto;}</style>
<a href="http://www.cursors-4u.com/cursor/2008/12/17/cool-red-outer-glow-pointer.html" target="_blank" title="Cool Red Outer Glow Pointer"><img alt="Cool Red Outer Glow Pointer" border="0" src="https://cur.cursors-4u.net/cursor.png" style="position: absolute; right: 0px; top: 0px;" /></a>
El código de color rojo corresponde a la publicidad de la página, puedes eliminarlo todo sin problema.
Y listo, ya tenemos el cursor listo para lucir en el blog. Con este último método doy por concluida esta pequeña y espontánea guía, espero que haya sido de utilidad y de fácil comprensión.
No hay comentarios:
Publicar un comentario