Gadget de cuenta regresiva para Blogger

thumbnail widget de contador hacia atras

Cuenta regresiva para mostrar el tiempo que falta para un evento, lanzamiento de un producto, cumpleaños de alguien, entre otros.

<b:includable id='main'>
  <b:include name='widget-title'/>
  <div class='widget-content'>
    <style>/*<![CDATA[*/.countdown{display:flex;gap:var(--countdown-gap,.5rem)}.countdown-options{display:none}.countdown-value{display:flex;flex-direction:column;text-align:center;color:var(--countdown-color,#fff);background-color:var(--countdown-bg,#23212b);border-radius:1rem;box-shadow:0 2px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2)}.countdown-value>*{padding:.5rem .875rem}.countdown-number{border-bottom:1px solid rgba(0,0,0,.9)}.countdown-name{font-size:.875rem;border-top:1px solid rgba(255,255,255,.1)}/*]]>*/</style>
    <data:content/>
    <div class="countdown">
      <b:loop values='["D","H","M","S"]' var='time'>
        <div class="countdown-value">
          <span class="countdown-number">00</span>
          <span class="countdown-name"><data:time/></span>
        </div>
      </b:loop>
    </div>
    <script>//<![CDATA[
      document.addEventListener("DOMContentLoaded", (event) => {
  const countdown=(()=>{if(window.countdownInitialized)return;const n=document.querySelectorAll("[data-countdown]"),e={};n.length>0&&n.forEach(((n,t)=>{!function(n,t,o){const i=new Date(t).getTime(),r=n.nextElementSibling,a=n.innerHTML;function c(){const n=(new Date).getTime(),t=i-n,c=r.querySelectorAll(".countdown-number"),d={days:Math.floor(t/864e5),hours:Math.floor(t%864e5/36e5),minutes:Math.floor(t%36e5/6e4),seconds:Math.floor(t%6e4/1e3)};if(t<0)return clearInterval(e[o]),r.classList.add("countdown-finished"),void(r.innerHTML=a);Object.keys(d).forEach(((n,e)=>{c[e].innerHTML=d[n].toString().padStart(2,"0")}))}n.innerHTML="",c(),e[o]=setInterval(c,1e3)}(n,n.dataset.countdown,t)})),window.countdownInitialized=!0})();
      });//]]>
    </script>
  </div>
</b:includable>

Ver en CodePen

En esta ocasión he programado un widget para Blogger que les permitirá mostrar una cuenta regresiva, muy útil para mostrar el tiempo que falta para un evento, lanzamiento de un producto, cumpleaños de alguien, entre otros.

Este aporte también inaugura la sección widgets para Blogger en zkreations, en donde ahora podrás instalar con un solo clic los widgets, sin necesidad de editar el código HTML de la plantilla.

Instalar

Como lo he mencionado, la instalación es muy sencilla, solo debes presionar el botón instalar que está más arriba, seleccionar el blog en el que deseas instalar el widget y listo. Todo el código está optimizado asi que no supondrá una carga adicional para tu blog.

Si tu plataforma no es Blogger, en ese caso te recomiendo revisar el código fuente del widget que encontrarás en codepen, y adaptarlo a tu proyecto, ubicando cada código en su respectivo lugar.

Configurar

Para configurar el widget, dirígete a la sección Diseño y busca el widget Cuenta regresiva, haz clic en el botón Editar y se abrirá una ventana con el contenido configurable del widget:

<div data-countdown="2025-01-01T00:00:00" class="countdown-options">
  <p>Feliz año 2025!! :D</p>
</div>

Fecha

Este valor es obligatorio y debe tener el siguiente formato: AAAA-MM-DDThh:mm:ss, donde AAAA es el año, MM es el mes, DD es el día, hh es la hora, mm son los minutos y ss son los segundos. Por ejemplo:

<div data-countdown="2025-02-02T16:00:00" class="countdown-options"></div>

El contador finalizará el 2 de febrero del 2025 a las 4 de la tarde.

Mensaje

Todo el código que se encuentre dentro de la etiqueta <div> de configuración permanecerá oculto y será mostrado cuando el contador finalice. Puedes agregar todo el codigo que desees, por ejemplo:

<div data-countdown="2025-01-01T00:00:00" class="countdown-options">
  <img src="https://i.imgur.com/7hinFAF.gif" alt="Capoo">
  <p>Feliz año 2025!! :D</p>
</div>

Al finalizar el contador, se mostrará la imagen de Capoo y un mensaje de felicitaciones.

Personalizar

Para personalizar el aspecto del contador, he dejado algunas variables css que puedes especificar con un nuevo valor, para ello dirígete a la sección Temas > Personalizar > Avanzado > Añadir CSS y pega el siguiente código:

.countdown {
  --countdown-bg: #111;
  --countdown-color: #fff;
  --countdown-gap: .5rem;
}

Podrás cambiar el color de fondo, el color del texto y el espacio entre los números.

Conclusión

Con este complemento podrás mostrar una cuenta regresiva en tu blog, ademas si ya no deseas mostrarlo, puedes desinstalarlo con tan solo borrar el widget desde la sección Diseño.