¿Que tal, como estas?, hoy me gustaria solventar la pregunta que me han hecho varios, sobre como insertar un reloj HTML en un blog o cualquier tipo de página web.

Ahora mismo conoceras la gran cantidad de formas con la que tu puedes lograrlo sin importar si usas Blogger, JIMDO, SquareSpace o cualquier otra plataforma de creación web.

En la mayoria de casos tan solo se trata de copiar y pegar códigos HTML, que función en cualquier página web.

Aun asi, tambien incluire algunos plugins exclusivos para ciertos sistemas como Shopify y mencionare como se puede hacer desde cero en puro código.

¿De que tipo de reloj HTML estamos hablando?

Me gustaria abarcar todo lo que se te venga a la cabeza, ya sea un reloj estandar, un countdown o un cronometro.

Interare poner todas las herramientas posibles, otorgandote una opinion tambien de cada una, para que tengas un adelanto de lo que ofrece.

Si crees que esta información es util, por favor comparte el post.

¿Como puede servirte algo asi en tu web hoy?

Actulamente las páginas pasan de ser documentos estaticos a a ser lugares bastante interactivos como las propias tiendas fisicas, creeme, no tiene nada de malo emplear este tipo de widget.

Si lo adaptas correctamente puedes crear una experiencia de usuario (UX) gratificante.

Se me ocurren unos ejemplos…

Que tal un reloj estandar mostrando la hora en el pais al que se va a viajar si se trata de una web turistica, o un countdown que anuncia el fin de una oferta, o talves un cronometro que dira cuanto tarda una persona en consumir un contenido.

Solo hace falta un poco de creatividad, para sacar provecho real de hasta este complemento que para muchos, parece poco util.

Relojes para Blogger, JIMDO, etc – ¿Donde sacarlos?

He recopilado sitios en donde puedes obtener uno totalmente gratis, me ha costado un poco, pero bueno. Se que valdra la pena este contenido.

Formato estandar:

• Diferencia Horaria

Ofrece un diseño muy atractivo. Tan solo hay que especificar el lugar en el que se medira la hora y finalmente copiar el código HTML que se muestra para insertarlo en tu sitio web.

Probar ahora:

[sociallocker]http://www.zeitverschiebung.net/es/clock-widget[/sociallocker]

• Time.is

Es un poco mas basico, pero igualmente funcional. Detecta tu ubicación automaticamente, aunque claro puedes elegir otro lugar utilizando el cuadro de busqueda.

[symple_button url=»https://time.is/es/widgets» color=»orange» button_target=»_blank» btnrel=»nofollow»]Probar ahora[/symple_button]

• MyTicTac (Flash)

Talves es lo que buscabas, se trata de una colección de relojes Flash, pero los cuales, aunque son muy atractivos no son recomendables de usar en la actualidad por los problemas de usabilidad que generan.

[symple_button url=»http://www.mytictac.com/es/relojes-digitales.html» color=»orange» button_target=»_blank» btnrel=»nofollow»]Probar ahora[/symple_button]

• RelojesWeb (Flash)

Esta es otra colección en formato Flash, son bastantes relojes y la verdad tambien muy atractivos, aun si, sigo recordando que a Google no le gusta este tipo de complementos.

[symple_button url=»http://www.relojesweb.net/» color=»orange» button_target=»_blank» btnrel=»nofollow»]Probar ahora[/symple_button]

• Yavez (Flash)

Aqui puedes encontrar mas relojes del mismo tipo, incluso algunos con sonido y otros son muy realistas. Tan solo copia y pega el código HTML del que deseas.

Formato countdown:

• CountingDownTo

Esta herramienta permite crear una cuenta regresiva totalmente personalizable en cuanto a diseño y comportamiento, lo bueno es que esta en español y es facil de entender.

[symple_button url=»https://countingdownto.com/es» color=»orange» button_target=»_blank» btnrel=»nofollow»]Instalar ahora[/symple_button]

• Time and Date

Cuenta con un diseño menos minimalista, aun si creo que es una opción muy eficaz, pues su configuración es enorme, muy recomendable.

[symple_button url=»https://www.timeanddate.com/clocks/freecountdown.html» color=»orange» button_target=»_blank» btnrel=»nofollow»]Instalar ahora[/symple_button]

• Tick Counter

Esta aplicación ofrece el tamaño y es estil ideal. se trata de un countdown bastante grande, perfecto para una landing page y es muy configurable tambien.

[symple_button url=»https://www.tickcounter.com/» color=»orange» button_target=»_blank» btnrel=»nofollow»]Instalar ahora[/symple_button]

• Powr C. Timer

Esta plataforma de widgets te deja crear un atractivo conteo regresivo, es la que mas opciones de personalización ofrece aqui, ademas cuenta con caracteristicas unicas y muy utiles.

[symple_button url=»https://www.powr.io/plugins/countdown-timer» color=»orange» button_target=»_blank» btnrel=»nofollow»]Instalar ahora[/symple_button]

Formato toma de tiempo:

Esto requiere un poco mas de conocimientos en programación mas que nada en JavaScript, puesto que no hay herramientas que de manera visual te permitar crear un medidor de tiempo (cronometro segun mi pais y yo).

See the Pen Cronometro con JavaScript by Romlonix (@Romlonix) on CodePen.

• Cronometro by CodePen

Un trabajo muy bueno el que ha hecho el usuario «Romionix», tiene los botones ideales y el estilo perfecto de un stoptwatch. Ademas ver su código fuente es super agradable gracias a «CodePen».

[symple_button url=»https://codepen.io/Romlonix/pen/Fwsza/» color=»orange» button_target=»_blank» btnrel=»nofollow»]Ver desarrollo[/symple_button]

• Contador de tiempo by TheCodePlayer

Otra opción realmente fantastica. TheCodePlayer te presenta de una manera muy interactiva el funcionamiento de un cronometro html para que puedas programarlo tu mismo/a solo con CSS3.

[symple_button url=»http://thecodeplayer.com/walkthrough/make-a-stopwatch-using-css3-without-images-or-javascript» color=»orange» button_target=»_blank» btnrel=»nofollow»]Ver desarrollo[/symple_button]

• Reloj contador by GitHub

Tambien puedes ocupar este trabajo de la plataforma GitHub, el cual te muestra lo necesario para armar un buen stopwatch, aunque con unos estilos un poco desfasados.

[symple_button url=»https://gist.github.com/electricg/4372563″ color=»orange» button_target=»_blank» btnrel=»nofollow»]Ver desarrollo[/symple_button]

• Cronometro by OSTraining

El equipo de OSTraining desarrollo un widget de este tipo, que la verdad luce y funcione muy bien y explica su realización detalladamente en un tutorial. Aunque como la mayoria esta en ingles, se puede traducir de volada.

[symple_button url=»https://www.ostraining.com/blog/coding/stopwatch/» color=»orange» button_target=»_blank» btnrel=»nofollow»]Ver desarrollo[/symple_button]

Plugins de reloj exclusivos para ciertos CMS’s

Me he dado a la tarea de incluir tambien aquellos complementos realizados especialmente para algun sistema de desarrollo web. Con el tiempo, añadire mas.

Para WordPress:

• Countdown Timer Ultimate

Un plugin que ofrece diseños espectaculares a comparación de la gran mayoria. Ofrece un manejo sencillo, mediante shortcodes.

• T(-) Countdown

Proporciona una configuración muy completa. Ademas esta optimizado adecuadamete por lo que no genera inconveniente alguno.

• Stopwatch

Un complemento que luce bien, pero que ya no recibe soporte por parte de sus desarrolladores. Aun asi, se le puede dar un increible uso.

Para Wix:

• Reloj de Cuenta Regresiva

Desarrollado por la propia plataforma, tiene todo lo necesario para añadir a una web cuentas regresivas y configurar su aspecto y comportamiento.

Para Joomla:

• CountdownAholic

Aunque esta muy completo no es de pago como suelen ser los buenos plugins en Joomla y ofrece un soporte de actualizaciones genial.

• Cuenta regresiva smart

Otra opción gratuita, pero como pocos complementos de este tipo proporciona diseños muy modernos y adaptables al de nuestro sitio.

Para Weebly:

• Countdown

Talves es el unico exclusivo, pero son mas que suficiente sus muchas opciones de estilos y comportamiento. Es un buen trabajo.

Para Shopify:

• Timer Plus

Aunque es de pago, si que es de calidad premium. Es un robusto gadget, lleno de posibilidades. Ofrece algunas funciones unicas.

• Countdown Cart

Especial para las tiendas online, en el punto de compra. Este tipo de widget es usado hasta por sitios de comercio mas grandes del mundo.

• Sales Timer Bar

Segun las valoraciones de los usuarios es catalogado el mejor complemento de su tipo en la Shopify App Store. Es como pocos responsive.

Para Drupal:

• jQuery Countdown

Un proyecto creado por «Robloach». Permite la creación de una cuenta regresiva basica pero eficaz utilizando la tecnologia jQuery.

• jQuery Countdown Timer

Algo parecido al anterior, pero con diseños aun mas modernos y llamativos. Creado no hace mucho por el usuario Marcin Pajdzik.

Para OpenCart

• Specials offer Extension

Se basa directamente en la creacíon de una gran oferta y te permite mostrar al usauario un  atractivo timer para su fin.

• Specials Countdowns

Ofrece tres colores disitntos para crear countdowns y permite integrarse a la función de precio especial del CMS. Es buena opción.

• Coupon Countdown banner

Es una herramienta que te permite mostrar un caja con un cupón con fecha de vencimiento ocupando una atractiva cuenta regresiva.