Widget de cuenta regresiva para Blogger

gadget widget cuenta atras javascript Crear Reloj de cuenta regresiva

Demostración Video

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

Dirígete a Temas, edicion html. Aquí tenemos que encontrar la etiqueta section que corresponde al sidebar. Para aprender a encontrarla te recomiendo ver el video de instalación. Luego agregamos el siguiente codigo dentro del section:


<b:widget id='TextList41' 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 2018</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>

Luego busca el cierre de head </head> y arriba de eso pega el siguiente código:


<style type='text/css'>/*<![CDATA[*/
/*! Contador regresivo v1.0.0 */
.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;border-radius:5px;padding-bottom:.5em}.counter-clock::after{clear:both}.counter-clock__item{background:#212121;color:#fff;font-size:1.2em;padding:1em .5em;margin:0 .3em 0 0;border-radius:3px;line-height:1;box-shadow:0 60px 60px -30px rgba(255,255,255,.05) inset,0 2px 1px 0 rgba(0,0,0,1);position:relative;float:left}.counter-clock__item::before{position:absolute;width:100%;top:50%;border-top:1px solid rgba(0,0,0,.5);margin-top:-1px;left:0;border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 0 10px 0 rgba(0,0,0,.5)}.counter-clock__info{padding:1em;background:rgba(0,0,0,.1);border-radius:3px;margin:0 0 1em;font-weight:500;color:rgba(0,0,0,.8)}
/*]]>*/</style>

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. Si tienes curiosidad por el código sin comprimir, aqui te dejo los gist publicados en mi cuenta de github:


contador-regresivo.css contador-regresivo.js

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 el video y asi entenderan como 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 tambien. Gracias por pasar y leer.