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:
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.
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.
Muy buena idea. Me gusta mucho.
Deybi, a mi también me gusta bastante. Creo que es mejor que el de "estilo texto" ya que solo podías ver la hora real cuándo se actualizaba la página. ☺