gadget widget cuenta atras javascript Crear Reloj de cuenta regresiva

Demo en Codepen

Seguimos con los pedidos hechos por usuarios. En esta ocasión se trata de un widget de cuenta regresiva, el cual podemos utilizar para lo que queramos, ya sea para eventos especiales o simplemente indicar lo que falta para culminar el año.


Contenido


Instalar

Ve a tu panel de administración en Blogger Temas Personalizar opciones avanzadas Agregar CSS y pega lo siguiente:


/*!
 * Cuenta regresiva v2.0.0
 * Copyright 2020 zkreations
 * Developed Daniel Abel M. (fb.com/danieI.abel)
 * Licensed under MIT
 */
/*! Core (No modificar) {{*/
.counter-clock::after,
.counter-clock__item::before {
   content: "";
   display: block
}
.counter-clock,
.counter-clock *,
.counter-clock ::after,
.counter-clock ::before {box-sizing: border-box}
.counter-clock::after {clear: both}
.counter-clock__item {
   line-height: 1;
   position: relative;
   float: left
}
.counter-clock__item::before {
   position: absolute;
   width: 100%;top: 50%;left: 0;
   margin-top: -1px;
}
/*}} Fin del core */

/*! Personalización */
/* Contador
-------------------------------------*/
.counter-clock__item {
   margin-right: 4px; /* separación */
   background: #212121; /* color de fondo */
   color: #fff; /* color del texto del contador */
   font-size: 16px; /* tamaño de fuente */
   padding: 16px 8px; /* relleno */
   box-shadow: 0 60px 60px -30px rgba(255,255,255,.05) inset,
               0 2px 1px 0 rgba(0,0,0,1); /* sombra */
   border-radius: 3px;  /* borde redondeado */
}
.counter-clock__item::before{
   border-top: 1px solid rgba(0,0,0,.5); /* borde medio superior */
   border-bottom: 1px solid rgba(255,255,255,.1); /* borde medio inferior */
   box-shadow: 0 0 10px 0 rgba(0,0,0,.5); /* sombra */
}
/* Informacion
-------------------------------------*/
.counter-clock__info {
   padding: 14px;  /* relleno */
   background: #e4e4e4; /* color de fondo */
   border-radius: 3px;  /* borde redondeado */
   color: #757575; /* color de la informacion */
   font-weight: 500; /* densidad del texto */
   margin-bottom: 14px; /* separación */
}

Presiona "Aplicar" para guardar los cambios y ahora dirígete a Temas Editar HTML. Busca <b:section id='sidebar'> o cualquier etiqueta section. Debajo de eso pega lo siguiente:


<b:widget id='Text51' title='Cuenta regresiva' type='Text'>
   <b:widget-settings>
      <b:widget-setting name='content'><![CDATA[info: "Tiempo restante",
time: "Jan 01 2021 00:00:00",
end: "Mensaje Final"]]></b:widget-setting>
   </b:widget-settings>
   <b:includable id='main'>
      <b:with expr:value='"{" + data:content + "}"' var='array'>
         <b:include expr:name='data:widgets ? "widget-title" : "title"'/>
         <b:include name='content'/>
         <b:include name='js'/>
      </b:with>
    </b:includable>
   <b:includable id='title'>
      <b:tag name="h2" class='widget-title'>
         <span class='widget-name'><data:title/></span>
      </b:tag>
   </b:includable>
   <b:includable id='content'>
      <div class='widget-content'>
        <p class='counter-clock__info'><data:array.info/></p>
        <div class='counter-clock' id='counter-clock'>
           <b:loop values='["d","h","m","s"]' var='clock' >
              <span class='counter-clock__item'>00<data:clock/></span>
           </b:loop>
        </div><!-- .counter-clock -->
      </div><!-- .widget-content -->
   </b:includable>
   <b:includable id='js'>
      <script>//<![CDATA[
"use strict";var getRemainingTime=function(e){var n=new Date,a=(new Date(e)-n+1e3)/1e3,i=("0"+Math.floor(a%60)).slice(-2),r=("0"+Math.floor(a/60%60)).slice(-2),s=("0"+Math.floor(a/3600%24)).slice(-2),c=Math.floor(a/86400);return{remainSeconds:i,remainMinutes:r,remainHours:s,remainDays:c,remainTime:a}},countdown=function(e,n,a){var i=document.getElementById(n),r=setInterval(function(){var n=getRemainingTime(e);i.innerHTML='<span class="counter-clock__item">'+n.remainDays+'d</span><span class="counter-clock__item">'+n.remainHours+'h</span><span class="counter-clock__item">'+n.remainMinutes+'m</span><span class="counter-clock__item">'+n.remainSeconds+"s</span>",n.remainTime<=1&&(clearInterval(r),i.innerHTML='<p class="counter-clock__info">'+a+"</p>")},1e3)};
//]]>
countdown('<data:array.time/>', 'counter-clock', '<data:array.end/>');
      </script>
   </b:includable>
</b:widget>

Guarda los cambios y listo. En la pestaña "Diseño" del panel de administración de Blogger, encontraremos un nuevo widget, que podemos mover de lugar o configurar.


No importa la región o la zona horaria ya que se usa la establecida por el usuario, de esa forma nos aseguramos que la cuenta atrás sea la correcta para todos.


Configurar

Por defecto el contador calcula lo que falta para terminar el año, si deseas cambiar la fecha, ve a Diseño y edita el gadget "Cuenta regresiva". El contenido del widget será un código JSON igual a este:


info: "Tiempo restante",
time: "Jan 01 2021 00:00:00",
end: "Mensaje Final"

El primer valor corresponde al mensaje de espera, el segundo es la fecha límite en mes/dia/año y la hora establecido en horas/minutos/segundos. Tanto el día como el año se especifican de forma numérica, el mes tiene que estar abreviado en inglés:


Mes Inglés Abreviación
Enero January Jan
Febrero February Feb
Marzo March Mar
Abril April Apr
Mayo May May
Junio June Jun
Julio July Jul
Agosto August Aug
Septiembre September Sep
Octubre October Oct
Noviembre November Nov
Diciembre December Dec

En cuanto a las horas, van desde 00 a 23, los minutos desde 00 hasta 59 y los segundos desde 00 hasta 59. Por último, el tercer valor corresponde al mensaje que el contador mostrará al alcanzar la fecha y hora especificadas.


Cualquier duda puedes dejarla en los comentarios. Si te ha servido no olvides compartir esta entrada, ayudarás a más personas y me ayudaría mucho también. Gracias por pasar y leer.