gadget widget cuenta atras javascript Crear Reloj de cuenta regresiva

Demo en Codepen

Seguimos con los pedidos realizados 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.


Para este contador he modificado el widget lista de texto de blogger y con la ayuda de vanilla javascript he conseguido un contador totalmente configurable y de fácil instalación.


Instalar

Ve a tu panel de administración en Blogger, elige la opción "Temas", presiona el botón "Personalizar", opciones avanzadas y da clic en "Agregar CSS", en este campo pega lo siguiente:


/*!
* Widget: Contador regresivo v1.0.1
* by zkreations
*/.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{font-size:14px}.counter-clock::after{clear:both}.counter-clock__item{margin:0 .3em 0 0;line-height:1;position:relative;float:left}.counter-clock__item::before{position:absolute;width:100%;top:50%;margin-top:-1px;left:0}.counter-clock__info{margin:0 0 1em;font-weight:500}
/*
=> Personalizacion
*/
/* Contador
-------------------------------------*/
.counter-clock__item {
    background:#212121; /*fondo*/
    color:#fff; /*color*/
    font-size:1.2em; /*tamaño de fuente*/
    padding:1em .5em; /*Relleno*/
    box-shadow:0 60px 60px -30px rgba(255,255,255,.05) inset, 0 2px 1px 0 rgba(0,0,0,1);
    border-radius:3px; /* Bordes redondeados */
}
.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:1em; /*Relleno*/
    background:#e4e4e4; /*fondo*/
    border-radius:3px; /* Bordes redondeados */
    color:#757575; /*color*/
}

Presiona "Aplicar" para guardar los cambios y ahora dirígete a Temas, Editar HTML. Aquí tenemos que encontrar la etiqueta </section>, generalmente cualquiera sirve. Arriba de eso pega lo siguiente:


<b:widget id='TextList51' locked='false' title='Cuenta regresiva' type='TextList' version='1'>
   <b:widget-settings>
      <b:widget-setting name='shownum'/>
      <b:widget-setting name='sorting'>NONE</b:widget-setting>
      <b:widget-setting name='item-3'>(ノ◕ヮ◕)ノ Feliz año nuevo!</b:widget-setting>
      <b:widget-setting name='item-2'>00:00:00</b:widget-setting>
      <b:widget-setting name='item-1'>Jan 01 2019</b:widget-setting>
      <b:widget-setting name='item-0'>Esto es lo que falta para que se termine el año :D</b:widget-setting>
   </b:widget-settings>
   <b:includable id='main'>
      <b:if cond='data:title != &quot;&quot;'>
         <h2><data:title/></h2>
      </b:if>
      <div class='widget-content'>
         <p class='counter-clock__info'><b:eval expr='data:items[0]'/></p>
         <div class='counter-clock' id='counter-clock'>
            <span class='counter-clock__item'>00d</span>
            <span class='counter-clock__item'>00h</span>
            <span class='counter-clock__item'>00m</span>
            <span class='counter-clock__item'>00s</span>
         </div>
         <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('<b:eval expr='data:items[1]'/> <b:eval expr='data:items[2]'/>', 'counter-clock', '<b:eval expr='data:items[3]'/>');
         </script>
      </div>
   </b:includable>
</b:widget>

Guardamos los cambios y listo. Si nos dirigimos a 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 contador

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". A cada uno de los elementos ya establecidos, da clic en "Editar" y tendrás algo como esto:


contador regresivo fin de año

Primer elemento - Este valor corresponde al mensaje de espera, es el que aparece arriba de la cuenta regresiva y podemos cambiarlo por cualquier otro.


Segundo valor (Jan 01 2018) - Se trata de la fecha límite establecida en mes/dia/año. Tanto el día como el año se especifican de forma numérica, sin embargo el mes tiene que estar escrito en inglés y abreviado. Aqui les dejo un cuadro que les será de mucha ayuda:


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

Tercer valor (00:00:00) - Se trata de la hora establecida en horas/minutos/segundos. El valor de las horas va desde 00 a 23, el de minutos va desde 00 hasta 59, y los segundos van desde 00 hasta 59 también.


Cuarto valor - Corresponde al mensaje que el contador mostrará una vez alcanzada la fecha y hora límites especificadas.


Ejemplo

Voy a establecer lo que falta para mi próximo cumpleaños en el contador (Junio 26 del 2018), haré que finalice al mediodía (12:00:00) y que los mensajes de espera y finalizado sean los correcto. Haciendo todo esto me quedaria asi:


cuenta atras contador regresivo ejemplo cumpleaños

Por último solo queda guardar los cambios y comenzará la cuenta regresiva con la nueva fecha límite.


Recomendaciones

Ya que se trata del widget Lista que ya cuenta con 4 elementos creados, no puedes cambiarlos de lugar o agregar nuevos elementos, si lo haces el contador dejara de funcionar o lo hará de forma incorrecta, solo puedes editar los valores ya establecidos.


He aprendido a desarrollar el contador (la parte del javascript) gracias a un video publicado por Alvaro felipe de EDteam (Escuela digital), les recomiendo ver su video para aprender cómo funciona.


Si tienen alguna duda pueden 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.