14/1/13

Crear cursor personalizado.

Como habéis visto mi puntero está personalizado con una imagen.


Para realizar un puntero personalizado haremos los siguientes pasos:

1.- Descargar la plantilla de PhotoShop que o he dejado ya que está editada para que la podáis utilizar de forma personalizada, encontrareis solo la imagen del puntero(flechita negra)ahora elegir la imagen y colocarla en esa plantilla, guardar el puntero editado en formato PNG

Plantilla.



2.- Ahora iremos a http://my.imageshack.us/ aquí subiréis vuestra imagen, cuando lo hagáis seleccionar no cambiar el tamaño, os recomiendo que os creéis una cuenta(es gratuita)ya que a largo tiempo pueden ser eliminadas las imágenes que subáis. No cerréis esta ventana ya que tendréis que copiar más adelante el código de la imagen.

3.- Este es el código HTML del cursor,donde pone LINK AQUÍ pegar el enlace de Imageshack, es la opción de enlace directo, ahora lo pegaréis entre los paréntesis habiendo eliminado antes el texto de LINK AQUÍ respetando los parentesis. A continuación solo tenéis que copiar y pegar el código HTML en vuestro blog, para ello iréis a diseño, añadir un gadget, elegiremos HTML/JavaScript y pegaremos el código. Guardaremos y volveremos a nuestro blog.

Código HTML:

<style type="text/css">
body, a, a:hover {cursor: url( LINK AQUÍ ),progress;}
</style><span style="font:tahoma; font-size:9px;"><a href=""></a></span>

Con esto ya os tiene que aparecer vuestro puntero o cursor personalizado.

No en todos los navegadores se detectan estos cursores personalizados, por ejemplo en Opera no se ven, en Mozilla Firefox y en Google Chrome si.

4 comentarios:

  1. Hola! Esta muy lindo tu blog!
    Gracias por todo lo que haces!

    Referente a esta entrada, el enlace nofunciona, el link de descarga esta roto.

    En lo posible lo podrias subir a mediafire?
    Mil gracias!
    Dios te bendiga

    ResponderEliminar
    Respuestas
    1. Hola linda siento que no lo puedas descargar los enlaces están eliminados lo subiré lo antes posible.

      Eliminar
  2. Me estas ayudando mucho a crear mi blog. Muchas gracias por tan buenos tutoriales!! eres muy buena :D

    ResponderEliminar