El día de hoy vamos a ver a cómo crear una cuenta regresiva para Blogger a la cual le puedes dar el uso que quieras como por ejemplo para cuando sacarás un producto, una fecha especial para tu blog, anunciar la fecha de publicación de un sitio web en contrucción, ente otras.
Para realizar esta cuenta atras para Blogger no vamos a necesitar ninguna librería de Javascript o plugin ni siquiera jQuery. Esto ayudará mucho en que nuestra web no cargue lento.
Instalar Cuenta Regresiva en Blogger
Lo primero que debemos hacer es agregar los estilos CSS en el Diseñador de temas de Blogger que se encuentra en Tema > Personalizar luego en esta sección buscamos Opciones avanzadas > Añadir CSS
#clock .clock-wrapp { float: left; }
#clock .clock__number,
#clock .clock__text { display: block; }
#clock .clock__number { position: relative; }
#clock .clock__number:before { content: ''; width: 100%; position: absolute; top: 50%; left: 0; }
/** Modificar **/
#clock .clock-wrapp {
margin-right: 12px;
text-align: center;
}
#clock .clock__number {
letter-spacing: 1.5px;
font-size: 22px;
font-weight: bold;
padding: .9rem .8rem;
border-radius: 10px;
text-align: center;
color: #fff;
background: #212121;
margin-bottom: 4px;
}
#clock .clock__number:before {
border-top: 1px solid rgba(0,0,0,.5);
border-bottom: 1px solid rgba(255,255,255,.1);
box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
}
#clock .clock__text {
text-transform: uppercase;
font-size: 10px;
text-align: center;
}
Una vez agregado los estilos pasamos a integrar el código Javascript puro a nuestro blog en Tema > Editar HTML y pegamos el siguiente código arriba de </head>
<script>//<![CDATA[
window.onload = function() {what(); function what() {
let fecha = "Apr 17 2022 10:56:14",
mensaje = "Mensaje Final";
const getRemainTime=s=>{let a=new Date,n=(new Date(s)-a+1e3)/1e3;return{remainTime:n,remainSeconds:("0"+Math.floor(n%60)).slice(-2),remainMinutes:("0"+Math.floor(n/60%60)).slice(-2),remainHours:("0"+Math.floor(n/3600%24)).slice(-2),remainDays:Math.floor(n/86400)}},countdown=(s,a,n)=>{const e=document.getElementById(a),t=setInterval(()=>{let a=getRemainTime(s);e.innerHTML=`<div class="clock-wrapp"><span class="clock__number">${a.remainDays}</span><span class="clock__text">días</span></div>ntttttttt<div class="clock-wrapp"><span class="clock__number">${a.remainHours}</span><span class="clock__text">horas</span></div>ntttttttt<div class="clock-wrapp"><span class="clock__number">${a.remainMinutes}</span><span class="clock__text">minutos</span></div>ntttttttt<div class="clock-wrapp"><span class="clock__number">${a.remainSeconds}</span><span class="clock__text">segundos</span></div>`,a.remainTime<=1&&(clearInterval(t),e.innerHTML=n)},1e3)};countdown(fecha,"clock",mensaje);};}//]]>
</script>
Configurar la cuenta regresiva
Lo único que nos queda es configurar nuestra cuenta regresiva de Blogger con la fecha que nosotros queramos y el mensaje final que se mostrará al finalizar la cuenta atras.
En el código anterior veremos al principio (línea 3 y 4) dos variables fecha y mensaje las cuales tendrán valores que debemos modificar.
La fecha tiene el siguiente formato mes/día/año y las horas horas/minutos/segundos. Tanto el día como el año se especifican de forma numérica y el mes tiene que estar abreviado en inglés:
| Español | Inglés | Abreviatura |
|---|---|---|
| Enero | January | Jan |
| Febrero | February | Feb |
| Marzo | March | Mar |
| Abril | April | Apr |
| Mayo | May | May |
| Junio | June | Jun |
| Julio | July | Jul |
| Agosto | August | Aug |
| Setiembre | September | Sep |
| Octubre | October | Oct |
| Noviembre | November | Nov |
| Diciembre | December | Dec |
Con las horas el formato es de 24h es decir van desde 00 a 23, los minutos desde 00 hasta 59 y los segundos desde 00 hasta 59.
Por último tendríamos la variable mensaje que es donde debemos colocar el texto que se mostrará al finalizar la cuenta atrás. El valor puede ser un texto plano o alguna etiqueta HTML para poder personalizarlo al máximo.
Creo que falta el código para mandar a llamar el contador
ResponderBorrar