¿Dónde puedo obtener el código HTML para un temporizador? (con ejemplo listo para copiar y pegar)

¿Necesitas un temporizador para tu blog o tu web y no sabes por dónde empezar? ¿Has buscado en Google y solo encuentras herramientas que te obligan a registrarte, o generadores que insertan publicidad en tu sitio?

La buena noticia es que no necesitas nada de eso. Un temporizador básico se puede crear con HTML, CSS y JavaScript puro, y lo puedes pegar directamente en cualquier entrada de Blogger, WordPress o página HTML.

En este post te explico dónde encontrar códigos de temporizador confiables y te dejo un código completo, funcional y personalizable que puedes copiar y pegar ahora mismo.

🧠 ¿Para qué sirve un temporizador en un blog?

Antes de tirar código, piensa en el uso que le vas a dar:

Ventaja de tener tu propio código: No dependes de un servicio externo, no cargas publicidad de terceros, y puedes personalizarlo al 100%.

📍 ¿Dónde encontrar códigos de temporizador confiables?

1. CodePen (la mejor fuente para inspirarte)

CodePen es una comunidad de desarrolladores donde puedes ver, probar y copiar fragmentos de código. Busca "countdown timer" y encontrarás decenas de ejemplos.

→ codepen.io/search/pens?q=countdown+timer

Ventaja: Puedes ver el resultado antes de copiar y editar el código en vivo.
Desventaja: No todos los ejemplos están pensados para copiar y pegar directamente en un blog.

2. GitHub (código fuente, seguro y sin publicidad)

GitHub es el repositorio de código más grande del mundo. Puedes buscar "countdown timer html" y encontrar proyectos completos.

→ github.com/search?q=countdown+timer+html

Ventaja: Código abierto, sin publicidad, y puedes ver el historial de cambios.
Desventaja: Requiere un mínimo de conocimiento para adaptar el código.

3. CSS-Tricks y Smashing Magazine

Son sitios de referencia para desarrolladores front-end. Tienen tutoriales detallados con código completo.

→ css-tricks.com y smashingmagazine.com

Ventaja: Explicaciones paso a paso.
Desventaja: Algunos artículos son antiguos y usan técnicas obsoletas.

4. El código que te dejo abajo (la opción más práctica)

Si no quieres buscar, aquí tienes un temporizador completo, funcional y personalizable. Cópialo, pégalo y ajusta lo que necesites.

⏱️ Código completo: Temporizador con cuenta regresiva

Este temporizador muestra días, horas, minutos y segundos hasta una fecha específica. Cuando llega a cero, muestra un mensaje personalizado.

📄 Código HTML + CSS + JavaScript

<!-- TEMPORIZADOR - Piensa para Crear -->
<div id="temporizador-ppc" style="font-family: Arial, sans-serif; text-align: center; padding: 20px; background: #f9f9f9; border-radius: 12px; max-width: 500px; margin: 0 auto;">
  <h3 id="titulo-temporizador" style="color: #1c1c1e; margin-bottom: 16px;">⏳ La oferta termina en:</h3>
  <div style="display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;">
    <div style="background: #1877f2; color: #fff; padding: 12px 18px; border-radius: 8px; min-width: 60px;">
      <span id="dias" style="font-size: 26px; font-weight: bold; display: block;">00</span>
      <span style="font-size: 12px;">Días</span>
    </div>
    <div style="background: #1877f2; color: #fff; padding: 12px 18px; border-radius: 8px; min-width: 60px;">
      <span id="horas" style="font-size: 26px; font-weight: bold; display: block;">00</span>
      <span style="font-size: 12px;">Horas</span>
    </div>
    <div style="background: #1877f2; color: #fff; padding: 12px 18px; border-radius: 8px; min-width: 60px;">
      <span id="minutos" style="font-size: 26px; font-weight: bold; display: block;">00</span>
      <span style="font-size: 12px;">Minutos</span>
    </div>
    <div style="background: #1877f2; color: #fff; padding: 12px 18px; border-radius: 8px; min-width: 60px;">
      <span id="segundos" style="font-size: 26px; font-weight: bold; display: block;">00</span>
      <span style="font-size: 12px;">Segundos</span>
    </div>
  </div>
  <p id="mensaje-final" style="display: none; color: #ff3b30; font-weight: bold; font-size: 18px; margin-top: 16px;">
    ¡El tiempo ha terminado!
  </p>
</div>

<script>
(function() {
  // ====== CONFIGURACIÓN ======
  // Cambia esta fecha por la que quieras (formato: AAAA-MM-DDTHH:MM:SS)
  var fechaObjetivo = new Date("2026-12-31T23:59:59").getTime();

  // ====== LÓGICA DEL TEMPORIZADOR ======
  var intervaloTemporizador = setInterval(function() {
    var ahora = new Date().getTime();
    var distancia = fechaObjetivo - ahora;

    // Si la cuenta regresiva terminó
    if (distancia < 0) {
      clearInterval(intervaloTemporizador);
      document.getElementById("dias").textContent = "00";
      document.getElementById("horas").textContent = "00";
      document.getElementById("minutos").textContent = "00";
      document.getElementById("segundos").textContent = "00";
      document.getElementById("mensaje-final").style.display = "block";
      document.getElementById("titulo-temporizador").style.display = "none";
      return;
    }

    // Cálculos de tiempo
    var dias = Math.floor(distancia / (1000 * 60 * 60 * 24));
    var horas = Math.floor((distancia % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutos = Math.floor((distancia % (1000 * 60 * 60)) / (1000 * 60));
    var segundos = Math.floor((distancia % (1000 * 60)) / 1000);

    // Mostrar en pantalla (con ceros a la izquierda)
    document.getElementById("dias").textContent = String(dias).padStart(2, "0");
    document.getElementById("horas").textContent = String(horas).padStart(2, "0");
    document.getElementById("minutos").textContent = String(minutos).padStart(2, "0");
    document.getElementById("segundos").textContent = String(segundos).padStart(2, "0");
  }, 1000);
})();
</script>
<!-- FIN TEMPORIZADOR -->

🎨 Cómo personalizar el temporizador

1. Cambiar la fecha objetivo

Busca esta línea y modifica la fecha:

var fechaObjetivo = new Date("2026-12-31T23:59:59").getTime();

Formato: AAAA-MM-DDTHH:MM:SS

Ejemplos:

• "2026-10-15T20:00:00" → 15 de octubre de 2026 a las 8:00 PM

• "2026-12-24T00:00:00" → 24 de diciembre de 2026 a medianoche

2. Cambiar el título

<h3 id="titulo-temporizador" ...>⏳ La oferta termina en:</h3>

3. Cambiar el mensaje final

<p id="mensaje-final" ...>¡El tiempo ha terminado!</p>

4. Cambiar los colores

• Fondo del contenedor: background: #f9f9f9

• Fondo de los bloques: background: #1877f2

• Texto: color: #fff

• Mensaje final: color: #ff3b30

5. Ocultar días (si solo quieres horas:minutos:segundos)

Borra el <div> de los días y elimina las líneas del cálculo de días en el JavaScript.

🧩 Cómo insertarlo en Blogger

1. Ve a Entrada nueva (o edita una existente).

2. Cambia el editor a Vista HTML.

3. Pega el código completo.

4. Vuelve a la vista Redactar para verificar que se ve bien.

5. Publica o guarda.

⚠️ Importante: En Blogger, el editor a veces escapa las etiquetas < y >. Si ves que el código no funciona, usa la opción "HTML" del editor, no "Redactar".

🧩 Cómo insertarlo en WordPress

Opción A: Bloque de HTML personalizado

1. Añade un bloque "HTML personalizado".

2. Pega el código completo.

3. Publica o actualiza.

Opción B: Editor clásico

1. Cambia a la vista Texto (no Visual).

2. Pega el código.

3. Actualiza.

Opción C: Widget o plantilla

Si quieres el temporizador en la barra lateral o en el footer:

1. Ve a Apariencia → Widgets.

2. Añade un widget "HTML personalizado".

3. Pega el código.

4. Guarda.

⚠️ Errores comunes y cómo evitarlos

1. El temporizador no aparece

Causa: El editor de tu CMS escapó el código (convirtió < en <).
Solución: Usa la vista HTML/Texto, no la visual. O envuelve el código en un bloque de HTML.

2. Los números no se actualizan

Causa: El <script> se ejecuta antes de que el HTML esté en el DOM.
Solución: El código usa IIFE (función autoejecutable) y setInterval, que espera 1 segundo antes de actualizar. Debería funcionar. Si no, envuelve todo en window.addEventListener('load', ...).

3. La fecha se interpreta mal

Causa: El formato de fecha no es el correcto.
Solución: Usa siempre "AAAA-MM-DDTHH:MM:SS". No uses barras (/) ni formatos locales.

4. El temporizador se reinicia al recargar

Causa: Es normal. El temporizador siempre calcula desde la fecha actual hasta la fecha objetivo. No guarda estado.

5. Quieres que el temporizador dure X minutos desde que el usuario llega

Solución: Cambia la lógica para que la fecha objetivo sea ahora + X minutos:

var ahora = new Date().getTime();
var fechaObjetivo = ahora + (15 * 60 * 1000); // 15 minutos

🎯 Conclusión: tu propio temporizador, sin depender de nadie

Tener un temporizador en tu blog no requiere plugins ni servicios externos. Con el código que te dejé:

• Funciona en cualquier plataforma (Blogger, WordPress, HTML plano).

• No carga publicidad de terceros.

• Es personalizable al 100%.

• Pesa menos de 2 KB.

Si buscas más ejemplos, CodePen y GitHub son tus mejores aliados. Pero si quieres algo que funcione ahora mismo, copia el código de arriba y ajústalo a tu gusto.

💬 ¿Necesitas ayuda para insertar el temporizador en tu blog o quieres uno más avanzado (con animaciones, sonidos, etc.)?
En Piensa para Crear ofrecemos servicios de personalización de blogs, integración de funciones interactivas y optimización.
Contáctanos aquí y hablemos.

❓ Preguntas frecuentes

¿Puedo usar este código en Blogger?
Sí. Pégalo en la vista HTML de una entrada o en un gadget HTML/JavaScript.

¿Funciona en WordPress?
Sí. Usa un bloque de HTML personalizado o el editor clásico en modo Texto.

¿El temporizador sigue funcionando si el usuario recarga la página?
Sí. El cálculo se hace en tiempo real contra la fecha objetivo, así que siempre muestra el tiempo restante correcto.

¿Puedo tener varios temporizadores en la misma página?
Sí, pero debes cambiar los id de cada uno (dias, horas, etc.) para que no entren en conflicto. Mejor usa clases en lugar de IDs si vas a repetirlo.

¿Cómo hago que el temporizador dure X minutos desde que el usuario llega?
Cambia la línea de fechaObjetivo por var fechaObjetivo = new Date().getTime() + (15 * 60 * 1000); (15 minutos).

¿Puedo añadir un sonido cuando termine?
Sí. Añade un <audio> y reproduce el sonido dentro del if (distancia < 0).

¿El código es responsive?
Sí. Los bloques usan flex-wrap: wrap, así que se adaptan a móviles.

📚 Recursos relacionados

• CodePen: ejemplos de countdown timers

• GitHub: buscador de proyectos de temporizador

• MDN: Documentación de setInterval

• MDN: Documentación de Date en JavaScript