Reloj digital con fondo personalizable

Este script mostrará un reloj digital al que podremos aplicar un fondo que nos guste.

El reloj es diferente al reloj tipo texto que previamente vimos, ya que este muestra los segundos, los minutos y las horas en tiempo "real" es decir, los números se mueven.

Aquí te dejo imágenes de dos modelos que yo hice:

Diseño>edición HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y encima pega este bloque de CSS:

#balcon_reloj{
background:#FFFFFF url(URL DE TU IMAGEN) no-repeat center;
border: 3px double #c9c9c9;
float: center;
padding-top: 5px;
padding-bottom: 5px;
}

Sustituye URL DE TU IMAGEN por la dirección de la imagen o fondo del reloj.

Te dejo las direcciones de las imágenes de los relojes aquí por si las quieres usar (aunque puedes poner tu fondo personal):

Fondo azul: http://i695.photobucket.com/albums/vv317/elbalcondejaime/reloj1.jpg?t=1247951357

Fondo marrón: http://i695.photobucket.com/albums/vv317/elbalcondejaime/reloj2reloj1-1.jpg?t=1247950937

Una vez termines, guarda cambios.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega el script del reloj:

<div id="balcon_reloj">
<center><form name="clock"> <input style="color: #666666;background: transparent;border:0;" value="hh:mm:ss" name="face" size="10" type="TEXT"/> </form><script>updateClock();

function updateClock() {
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
document.clock.face.value = ((hours < 10) ? '0' + hours : hours) +
':' + ((minutes < 10) ? '0' + minutes : minutes) +
':' + ((seconds < 10) ? '0' + seconds : seconds);
setTimeout("updateClock()",1000);
}</script></center></div>

Guarda el gadget y tendrás el reloj de fondo personalizable en tu blog.