Cursor con Reloj

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)

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:

✵ Ver SCRIPT [+/-]

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. 

Fuente: http://diyva.blogspot.com.es/2015/01/reloj-de-colores-con-fecha-y-hora-que.html