Retro html hacks

Vistas a la página totales

Cómo poner un cursor personalizado estilo 2000 en tu blog de Blogger (Y2K)

Publicado por neonbyte | jueves, 19 de febrero de 2026

¿Recuerdas los blogs de los años 2000? Cursores con manitos pixeladas, estrellas brillantes, corazones o flechas neón que seguían el mouse por toda la pantalla.

En este tutorial aprenderás cómo cambiar el cursor en Blogger usando solo CSS, sin plugins y sin complicaciones, para darle a tu blog un estilo totalmente retro Y2K.

 Paso 1: Consigue tu cursor retro

Lo primero que necesitas es la imagen de tu cursor personalizado.

Recomendaciones técnicas:

  • Tamaño ideal: 32x32 o 48x48 píxeles
  • Formato: PNG con fondo transparente
  • Diseño: pixel art para mantener la estética 2000

Puedes:

  • Buscar íconos retro en bancos gratuitos.
  • Crear tu propio cursor pixelado y exportarlo en PNG.

Paso 2: Subir la imagen a Blogger y copiar la URL

Ahora necesitas obtener la URL directa de tu imagen.

  1. Entra a tu panel de Blogger.
  2. Crea una nueva entrada (puede ser borrador).
  3. Sube la imagen como si fueras a insertarla en el post.
  4. Cambia a la vista HTML.
  5. Copia la URL que aparece en el atributo src.

Ejemplo:

https://blogger.googleusercontent.com/img/b/AAAAAA/hand-pixel.png
Guarda esa URL porque la usarás en el código.

 Paso 3: Aplicar el cursor retro en todo el blog

Ahora vamos a agregar el CSS en la plantilla.

  1. Ve a Tema > Editar HTML.
  2. Busca la etiqueta </head> o ]]></b:skin>.
  3. Pega el siguiente código antes de esa línea.
  4. Reemplaza la URL por la tuya.
  5. Guarda y recarga tu blog.
<style>
/* Cursor retro global */
html, body {
  cursor: url("https://TU-URL-DEL-CURSOR.png"), auto;
}

/* Cursor diferente en enlaces */
a:hover, button:hover {
  cursor: url("https://TU-URL-DEL-CURSOR-HOVER.png"), pointer;
}
</style>

Si quieres una versión más simple (sin hover diferente): 

<style>
html, body {
  cursor: url("https://TU-URL-DEL-CURSOR.png"), auto;
}
</style>

Paso 4 (Opcional): Ajustar el “punto caliente” del cursor

El punto caliente es el píxel exacto donde se hace clic. Si notas que el clic no coincide con la punta del cursor, puedes ajustarlo. 

<style>
html, body {
  cursor: url("https://TU-URL-DEL-CURSOR.png") 4 0, auto;
}
</style>

Los números 4 0 indican la posición X e Y dentro de la imagen. Prueba distintos valores hasta que el clic coincida correctamente.

 Extra: Cursor retro solo en ciertas zonas

También puedes aplicar el cursor solo en áreas específicas del blog. Por ejemplo, solo en los posts: 

<style>
.post {
  cursor: url("https://TU-URL-DEL-CURSOR.png"), auto;
}

.post a:hover {
  cursor: url("https://TU-URL-DEL-CURSOR-HOVER.png"), pointer;
}
</style>


Con unas pocas líneas de CSS puedes transformar completamente la experiencia visual de tu blog y devolverle ese estilo auténtico de los 2000.

Prueba diferentes diseños: mano pixel, estrella, corazón, flecha neón o incluso un cursor animado.

En el próximo tutorial puedes ir un paso más allá y crear un efecto que siga el mouse usando CSS + JavaScript para lograr una experiencia aún más Y2K.

© Retro html hacks - Portal Retro 2005