Reloj de colores con fecha y hora que sigue al cursor


En tutoriales anteriores hemos visto varios efectos para los cursores (estrellas que caen, burbujas que suben, explosión de estrellas y humo que sale del cursor).

Hoy vamos a ver otro efecto, que consiste en un reloj colorido con fecha y hora, que sigue al cursor cada vez que lo movemos. Además, es totalmente personalizable y opcionalmente podemos agregar un botón para activar o desactivar el reloj.

( Ver DEMO)
cursor, efecto, clock, blog

Para agregar el reloj sigue estos sencillos pasos:

1.§ Vamos a Plantilla - Editar HTML.

2.§ Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos </head> y justo antes de éste, pegaremos los siguientes estilos:
<style type='text/css'>
.css1{
position:absolute;top:0px;left:0px;
width:16px;height:16px;
font-family:Arial,sans-serif;
font-size:16px;
text-align:center;
font-weight:bold;
}
.css2{
position:absolute;top:0px;left:0px;
width:10px;height:10px;
font-family:Arial,sans-serif;
font-size:10px;
text-align:center;
}
#control{ /* estilos del botón */
background: #e2e2e2; /* color de fondo */
color: #000; /* color del texto */
border: 1px #66CCCC solid; /* ancho y color de borde */
border-radius: 10px; /* redondeo de esquinas */
}
</style>

3.§ Debajo de los estilos pegaremos el siguiente script. En este código podemos modificar los colores del reloj, la fecha y las manecillas:


Si buscas otros colores para el reloj y el botón, te puede servir este post.

3.§ Damos clic a Guardar plantilla y ya podemos ver el reloj funcionando en el blog.

PASO OPCIONAL: BOTÓN

Con los pasos anteriores, el reloj ya estará funcionando. Sin embargo, podemos incluir un botón On/Off para que nuestros lectores decidan desactivar o activar el reloj cada vez que lo requieran. Sólo debemos hacer lo siguiente:

1.§ Vamos a Diseño - Añadir un gadget - HTML/Javascript.

2.§ En la ventana emergente del gadget, insertaremos el siguiente script:
<script type="text/javascript">
if (document.getElementById&&!document.layers){
document.write('<input type="button" id="control" value="Apagar reloj" onClick="this.blur();onoff()">');
}
</script>
3.§ Damos clic a guardar y listo.

Si incluyes el reloj en tu blog, házmelo saber con un comentario y tienes alguna duda no dudes en preguntar para ayudarte. Y no olvides visitarme en mis redes sociales.

2 opinaron:

Rossy Villalobos Javier

holap muchas gracias quedo muy bonito:P

Responder
Josie Mirella Aguilar Coaquira

Funciono, gracias ;)

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio