Reloj digital simple para blogger/sitio web

jcduranm · 15 Sep 2022

Reloj digital simple para Blogger/sitio web: en este tutorial compartiré cómo compartir un reloj digital simple en el blog de Blogger.

Esta es una parte simple de Blogger. Esta parte no es importante para tu blog. Esta es una belleza de blog. Usas este truco en todos los sitios web como WordPress.

Ver resultado

Antes de comenzar a trabajar, mantenga un archivo de respaldo de su plantilla y luego comience a trabajar.

Ahora comenzando: Haga clic en Plantilla> Editar HTML Luego presione " Ctrl + F " y busque </style> y antes de </style> Pegar el siguiente CSS

Insertar CODE, HTML o PHP:

/*-------Reloj Digital-------*/
#RelojDigital {
font-family: Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-weight: 700;
display: block;
text-align: center;
font-size: 30px;
padding: 4rem 0;
}

#RelojDigital span {
display: inline-block;
font-family: Avenir Next, Nunito, sans-serif;
font-weight: 100;
font-size: 8vw;
position: relative;
top: -2vw;
}

@media all and (max-width: 600px) {
#RelojDigital {
font-size: 4rem;
padding: 2rem 0;
};
}

@media all and (max-width: 350px) {

#RelojDigital {
font-size: 3rem;
padding: 2rem 0;
};
}

Ahora guarde la plantilla y haga clic en Diseño, luego agregue un nuevo widget HTML/Javascript y copie el siguiente código.

Insertar CODE, HTML o PHP:

<time id="RelojDigital"></time>
<script type='text/javascript'>
var currentTime = document.getElementById("RelojDigital");
function zeropadder(n) {
  return (parseInt(n,10) < 10 ? '0' : '')+n;
}
function updateTime(){
  var timeNow= new Date(),
  hh = timeNow.getHours(),
  mm = timeNow.getMinutes(),
  ss = timeNow.getSeconds(),
  formatAMPM = (hh >= 12?'PM':'AM');
  hh = hh % 12 || 12;
  currentTime.innerHTML = hh + ":" + zeropadder(mm) + ":" + zeropadder(ss) + " " + formatAMPM;
  setTimeout(updateTime,1000);
}
updateTime();
</script>

Eso es todo. Ahora actualice su página y vea los cambios.

DEMO

Reloj digital simple para blogger/sitio web

jcduranm