Cambiar el Puntero del Mouse en Blogger

Estaría de mas mencionar que es el puntero del Mouse, ya que día a día interactuamos con este ya sea desde el escritorio de nuestra PC hasta en todas las paginas de Internet, esa flechita que es la guía y dirigente de los movimientos que entablamos en cualquier ventana o pagina, sin duda algunas es muy importante para la navegación y elección de opciones.

Así que dar un estilo personalizado a ese puntero no nos vendría mal a la hora de llamar la atención a los visitantes de nuestra pagina. En esta entrada aprenderemos a cambiar la clásica flechita que tenemos como puntero, por una personalizada.

Cambiar el Puntero del Mouse:

Para cambiar el puntero de nuestro Mouse en una pagina web o Blog solo tenemos que aplicar el atributo cursor, el cual mediante la magia de CSS nos da la prioridad de personalizar nuestro Puntero. Si quieren profundizar un poco mas sobre esta propiedad visiten librosweb.es.

Ahora veremos algunos ejemplos de lo que se puede hacer al cambiar el puntero del mouse:

 cursor: crosshair




 cursor: pointer

 cursor: move




 cursor: wait




 cursor: help




 cursor: e-resize




 cursor: s-resize

Si fueron curiosos y posicionaron el puntero sobre las imágenes de los iconos, se habrán dado cuenta que el puntero del mouse cambia, esa es la idea de este tutorial, ahora solo si queremos que este efecto sea aplique a toda nuestra pagina solo tenemos que poner este atributo en el body, ademas si queremos que se aplique a los enlaces tambien aplicamos a la etiqueta a, entonces el código general quedaría de la siguiente forma:

body, a

           {

                 cursor : 'colocamos la propiedad del cursor';

           }

Ahora ya vimos como hacer que cambien nuestro Puntero, en base a punteros predeterminados, pero sin duda lo mas fantástico de esta propiedad es que podemos poner nuestro propio puntero de esta forma una imagen que elijamos puede ser nuestro Puntero, todo eso se logra con:

cursor : url(......);

de esta forma ponemos la URL de nuestra imagen y hacer que el puntero sea de nuestro Gusto haciendo mas atractiva el putero del Mouse en nuestra pagina.

Ojo: Tener en cuenta que no es cualquier imagen, deben ser imágenes con la extensión: .cur, .svg o .gif

Cambiar el Puntero de Mouse en Blogger:

ya vimos la base teórica y practica de la propiedad Cursor en CSS, ahora veremos como aplicarlo en nuestro Blog.

Primero debemos entrar al perzonalizador de plantillas de Blogger, luego a avanzado y por ultimo añadir CSS, en esta parte añadimos el código CSS del Puntero a nuestro Blog, el codigo nos quedaria de la siguiente forma:

De esta forma al poner la propiedad Cursor en el Body, el efecto de cambio de cursor se vera en toda nuestro Blog.

A Continuación veremos algunos ejemplos de lo que podemos obtener al cambiar nuestro Puntero de Mouse por una imagen personalizada:

Pasa el Puntero del Mouse por el cuadro

Pasa el Puntero del Mouse por el cuadro

Pasa el Puntero del Mouse por el Cuadro

Pasa el Puntero del Mouse por el cuadro

Espero que les aya sido de mucha utilidad este Tutorial, si quieres mas imágenes de Punteros visita punteros.org.

Cualquier duda o Aporte Hacerlo por Comentarios. Gracias por su Tiempo!