Si tienes un blog o un sitio en el que muestras información relacionada con el tiempo, es muy probable que desees adicionar ciertos toquecillos para hacer más informativa su presentación.
Es muy cierto, existen plugins para ser utilizados en ciertas plataformas y también que tu dispositivo o PC te puede brindar la fecha y hora. Pero, si deseas que estas se presenten en un gadget de blogger o donde desees, puedes disponer de los códigos y además editarlos a tu conveniencia.
Ejemplo de esto, es que puedas ver la fecha y hora tal como se muestra a continuación, aunque puedes estar requiriendo alguna otra aplicación, como hacer una cuenta regresiva hacia una fecha o inclusive mostrar el tiempo como titulo en la pestaña del explorador.
Fecha y Hora en el sitio
Fecha
El código para presentar la fecha en español es el siguiente:
<!-- Fecha Español -->
<div style="text-align:center;color:#000000;font-size:20px;font-family:Arial;font-weight:normal;font-style:bold;" id="fechespanol">
<script>
var now = new Date();
var days = new Array('Domingo','Lunes','Martes','Miercoles','Jueves','Viernes','Sábado');
var months = new Array('Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre');
var date = ((now.getDate() < 10) ? "0" : "") + now.getDate();
var year = (now.getYear() < 1000) ? now.getYear() + 1900 : now.getYear();
today = days[now.getDay()] + ", " + months[now.getMonth()] + " " + date + ", " + year;
var fechespanol = document.getElementById('fechespanol');
fechespanol.innerHTML = today;
</script>
</div>
Si deseas presentar la fecha en idioma inglés, solo necesitas cambiar las cadenas tal como se muestra en el siguiente código:
<!-- Fecha Inglés -->
<div style="text-align:center;color:#000000;font-size:20px;font-family:Arial;font-weight:normal;font-style:normal;" id="basicdate">
<script>
var now = new Date();
var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
var date = ((now.getDate() < 10) ? "0" : "") + now.getDate();
var year = (now.getYear() < 1000) ? now.getYear() + 1900 : now.getYear();
today = days[now.getDay()] + ", " + months[now.getMonth()] + " " + date + ", " + year;
var basicdate = document.getElementById('basicdate');
basicdate.innerHTML = today;
</script>
</div>
Hora
Para presentar la hora puedes utilizar el siguiente código:
<!-- Hora -->
<div style="font-size:34px;font-family:Arial;font-weight:bold;font-style:normal;" id="relojbasico"></div>
<script>
function clock()
{
var digital = new Date();
var hours = digital.getHours();
var minutes = digital.getMinutes();
var seconds = digital.getSeconds();
if (minutes <= 9) minutes = "0" + minutes;
if (seconds <= 9) seconds = "0" + seconds;
dispTime = "Hora: " + hours + ":" + minutes + ":" + seconds;
var relojbasico = document.getElementById('relojbasico');
relojbasico.innerHTML = dispTime;
setTimeout("clock()", 1000);
}
clock();
</script>
</div>
Fecha y hora
Si deseas hacer una presentación semejante a la que visualizas más arriba de este post, puedes utilizar este código:
<div id="contenedor-fh" style="border:10px;border-style:ridge;border-color: #403c3c;border-radius:5px;text-align:center;padding:7px;background-color:#f1f1f1">
<!-- Fecha Español -->
<div style="color:#000000;font-size:20px;font-family:Arial;font-weight:normal;font-style:normal;" id="fechespanol">
<script>
var now = new Date();
var days = new Array('Domingo','Lunes','Martes','Miercoles','Jueves','Viernes','Sábado');
var months = new Array('Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre');
var date = ((now.getDate() < 10) ? "0" : "") + now.getDate();
var year = (now.getYear() < 1000) ? now.getYear() + 1900 : now.getYear();
today = days[now.getDay()] + ", " + months[now.getMonth()] + " " + date + ", " + year;
var fechespanol = document.getElementById('fechespanol');
fechespanol.innerHTML = today;
</script>
</div>
<hr />
<!-- Hora -->
<div style="background-color:#000000;border-radius:5px;border-style:ridge;color:#17dc16;font-size:34px;font-family:Arial;font-weight:bold;font-style:normal;" id="basicclock"></div>
<script>
function clock()
{
var digital = new Date();
var hours = digital.getHours();
var minutes = digital.getMinutes();
var seconds = digital.getSeconds();
if (minutes <= 9) minutes = "0" + minutes;
if (seconds <= 9) seconds = "0" + seconds;
dispTime = "Hora: " + hours + ":" + minutes + ":" + seconds;
var basicclock = document.getElementById('basicclock');
basicclock.innerHTML = dispTime;
setTimeout("clock()", 1000);
}
clock();
</script>
</div>
Recuerda que puedes editar los atributos de los <div> en cuanto a colores, ancho, alto, tamaño de las fuentes, etc. según tus requerimientos.
En el último código, el div con id=”contenedor-fh”, actúa como contenedor del div de fecha y el div de hora.
👁 OJO: También recuerda que si no obtienes resultados, puede ser que el servidor de hosting que utilizas no permita la ejecución de este script, porque se relaciona con “tiempo” y tenga restricciones.
Sin embargo este código no presenta complicaciones si se ejecuta en Blogger. Además puedes insertarlo dentro de un gadget.
Ojo: Si en tu sitio utilizas plataforma WordPress, puede que necesites recurrir al uso de un plugin para poder insertar este código. Te aconsejo que utilices el plugin Woody Snippets, el cual te ayudará a que puedas insertar códigos (lo encuentras en el repositorio de WordPress).
¡ No dudes en consultar haciendo un comentario, por si tienes una duda.!
- Más sobre el autor
Me encantan los blogs y todo lo que se puede aprender con ellos.
Me desempeñé como profesor de sistemas informáticos unos años de mi vida. Estudios de Licenciatura en Publicidad y Marketing. Tnlgo. en Sistemas de Computación, enseñando lo poco o mucho que puedo saber y ahora con gusto lo comparto con ustedes.

Soy autor y fundador de este sitio. Me encantan los blogs y todo lo que se puede aprender con ellos.
Unos años de mi vida me desempeñé como técnico en una empresa de telecomunicaciones y otros como profesor de sistemas informáticos, enseñando lo poco o mucho que puedo saber y ahora lo comparto con ustedes.
En casa, no le huyo a preparar recetas de cocina, sobre todo si se trata de compartir la mesa con mis hijos. Me gusta también ver la vida en el proceso de las plantas y el respeto a los animales.
Tengo estudios formales de Tecnología en Sistemas de Computación y Licenciatura en Publicidad y Marketing. Aunque sobre varias temáticas me gusta ser autodidacta y experimentar para obtener resultados que pueda compartir de manera confiable.
Sin embargo, respecto a mi formación, regularmente evito me llamen por título y simplemente soy Vicente Ramírez, un instructor, un papá, un amigo. Y es que en ocasiones he escuchado cuando a alguien le preguntan por su nombre y responde… Mi nombre es “Ingeniero Juan Pérez” o “Master Ana Piguave”, por lo que me pregunto si sus padres le habrán puesto por nombre “Ingeniero” o “Master” (😃 Je, je, je, una cosa es el nombre, otra cosa es la profesión).
Realmente me apasiona el emprendimiento combinado con la tecnología, por lo que me he dado impulso para gestionar con mi proyecto web actual, plasmando este blog en el que se incluyen varias temáticas.
Así, esta web nace con la vocación de ser un sitio para compartir y divulgar estos conocimientos combinados con el de otros autores que poco a poco se van integrando.