Cómo Agregar un Botón de Descarga con Temporizador en Blogger

Ofrecer archivos para descarga con un temporizador de conteo regresivo aumenta el tiempo de permanencia de los usuarios en tu blog, un factor clave para el SEO y la monetización. En este tutorial aprenderás a instalar un botón de descarga interactivo y responsive utilizando HTML, CSS y Javascript puro.

Ventajas del Botón con Conteo Regresivo

• Mayor tiempo de permanencia: Mantiene al usuario enganchado mientras espera la habilitación del enlace.
• Sin plugins externos: Funciona directamente con JavaScript liviano sin afectar la velocidad.
• Diseño atractivo: Transición animada que indica de forma clara cuándo la descarga está lista.

Pasos para la Instalación

1. Ingresa a tu panel de administración de Blogger.
2. Navega a Diseño y añade un gadget de tipo HTML/JavaScript (o entra a la vista HTML de una entrada).
3. Copia el siguiente bloque de código.
4. Ajusta la variable del temporizador (en segundos) y la URL del archivo final.
5. Guarda los cambios.

Código HTML, CSS y JS del Botón de Descarga

<!-- Boton de Descarga con Conteo Regresivo -->
<style>
  .download-box {
    text-align: center;
    background: #f8f9fa;
    border: 1px dashed #cccccc;
    padding: 20px;
    border-radius: 8px;
    margin: 15px 0;
    font-family: Arial, sans-serif;
  }
  .download-btn {
    display: inline-block;
    background-color: #007bff;
    color: #ffffff !important;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .download-btn:disabled {
    background-color: #a0a0a0;
    cursor: not-allowed;
  }
  .download-btn:hover:not(:disabled) {
    background-color: #0056b3;
  }
  .timer-text {
    font-size: 14px;
    color: #555;
    margin-top: 10px;
  }
</style>

<div class="download-box">
  <button id="dlBtn" class="download-btn" onclick="startDownloadTimer()">Iniciar Descarga</button>
  <p id="timerMsg" class="timer-text">Haz clic en el botón para generar el enlace de descarga.</p>
</div>

<script>
  function startDownloadTimer() {
    var timeLeft = 10; // Tiempo en segundos
    var btn = document.getElementById("dlBtn");
    var msg = document.getElementById("timerMsg");
    var downloadUrl = "https://tudominio.com/archivo-para-descargar.zip"; // URL de tu archivo

    btn.disabled = true;
    
    var countdown = setInterval(function() {
      if (timeLeft <= 0) {
        clearInterval(countdown);
        msg.innerHTML = "¡Tu enlace está listo!";
        btn.innerHTML = "Descargar Ahora";
        btn.disabled = false;
        btn.onclick = function() {
          window.open(downloadUrl, '_blank');
        };
      } else {
        msg.innerHTML = "Tu descarga comenzará en <strong>" + timeLeft + "</strong> segundos...";
        btn.innerHTML = "Espere " + timeLeft + "s";
        timeLeft -= 1;
      }
    }, 1000);
  }
</script>