JMiur [E]

Este script de jQuery, crea un reloj muy especial al que han llamado tzineClock y es muy sencillo de agregar.

Podemos descargar el ejemplo completo en formato ZIP desde la web del autor y obviamente, lo primero es tener la librería y lo más simple es usar las AJAX Libraries API de Google:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js' type='text/javascript'/>
Luego, el script en si mismo llamado jquery.tzineClock.js que podemos alojar en un servidor:
<script type='text/javascript' src='URL_jquery.tzineClock.js'/>
o agregar a la plantilla utilizando CDATA:
<script type='text/javascript'>
//<![CDATA[
... aquí colocamos el contenido del script ...
//]]>
</script>
y por último el CSS que también está en el demo y donde podemos configurar algunas cosas; por ejemplo:
.clock { /* aquí podemos establecer el color del fondo y el tamaño */ }
.clock .bg, .clock .front { /* aquí podemos establecer el color del fondo y los tamaños de cada sector */ }

/* esto, deberemos cambiarlo, alojar las tres imágenes (o cualquier otra) y colocar la URL */
.orange .bg.left { background: url(URL_bg_orange.png) no-repeat left top; }
.green .bg.left { background: url(URL_bg_green.png) no-repeat left top; }
.blue .bg.left { background: url(URL_bg_blue.png) no-repeat left top; }
.orange .bg.right { background: url(URL_bg_orange.png) no-repeat right top; }
.green .bg.right { background: url(URL_bg_green.png) no-repeat right top; }
.blue .bg.right { background: url(URL_bg_blue.png) no-repeat right top; }
¿Cómo hacemos que funcione? Agregamos un DIV donde nos guste verlo y ejecutamos el script cuando la página haya termiando de cargarse:
<div id="fancyClock"></div>
<script type='text/javascript'> $(document).ready(function(){ $('#fancyClock').tzineClock(); }); </script>


REFERENCIAS:Tutorialzine

15 comentarios:

Graciela  

Ya no pondría relojes, pero con JQuery se logran cosas maravillosas :)

Responder
DJ BENKO  

Hola Jmiur saludos desde colombia, soy seguidor de este blog maravilloso, queria aprovechar para preguntarte algo que no tiene que ver con esta entrada. ¿Como hago para poner expandir y contraer a las entradas? Asi de la misma forma que tu la tienes que al hacer click en la flechita de despliegan, Si hay algun post donde explicas eso me pones el link, te lo agradezco... ;)

Responder
HaCk CrAcK  

Hola Jmiur, tengo un problema, la cosa es que me dejo de funcionar el buscador de mi blog clanime.com.ar, pero busque por internet y no encontre ninguna solucion. El html es el siguiente, creo que esta todo bien noc porq no funciona:

<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' id='searchform' method='get'>
<div id='buscador'>
<input class='buscar' id='q' name='q' type='text' value=''/>
<input class='lupa' src='http://img208.imageshack.us/img208/9041/lupa.png' type='image'/>
</div>
</form>

Responder
CineKid - Cinedot  

hola! queria preguntarte si hay forma alguna de ofrecer un registro para usuarios en blogger.com en uno de mis blogs. Esque querria que cada usuario fuese identiicado con un nik o algo similar. ¿es posible crear una cuenta de registro?

Gracias.

Responder
JMiur  

Graciela:
Yo tampoco pero es divertido :D

DJ BENKO:
Hay muchas formas, fíjate en esta entrada o si usas alguna librería como Prototype o jQuery hay muchas más.

HaCk CrAcK:
Por lo que veo , el código es correcto ¿Habrá algún otro cambio? ¿Algo que tenga que ver con el dominio, por ejemplo?

CineKid - Cinedot:
Los blogs pueden ser privados o públicos, si son privados, el acceso es con un registro (hasta 100 usuarios) pero, no hay ningún término medio como ese que quieres; para ello, se necesita un servicio diferente y una base de datos donde se guarden los registros.

Responder
HaCk CrAcK  

No creo pero me acabo de dar cuenta que hice cagadas en la plantilla porque no se ve los post en otras categorias osea solamente se ven en la pagina principal y si me voy a alguna etiqueta no los muestra, algo raro pero voy a ver q puedo hacer para solucionarlo..

Responder
Dña. Urraca  

¿Por qué marca mi hora y no la tuya?

Responder
JMiur  

Dña. Urraca:
La hora que se muestra es la del visitante; es un dato que es enviado por el mismo navegador.

Responder
Lagarto  

y de donde descargo el script por que veo que ya no funciona la descarga, porfa.

Responder
JMiur  

El enlace de Tutorialzine sigue funcionando correctamente:
http://tutorialzine.com/2009/12/colorful-clock-jquery-css/

Responder
Lagarto  

Ok gracias listo.

Responder
Drawer 4 Everyone  

JMiur, podrías poner como ejemlo del css el que tu has puesto para que lo pueda modificar? porfi? Es que me está dando problemas... :S

Responder
JMiur  

Es el mismo que está en el demo con las modificaciones indicadas en el post. Eventualmente, habrá algo más qpero sólo para que puea mostrarse en un iframe.

Deberías mostrarme el ejemplo para ver si hay un error.

Responder
Drawer 4 Everyone  

Con decirte que me salen los tres uno debajo del otro y sin las imágenes...
Siento parecer torpe, pero es que lo soy un poco para el css.

Responder
JMiur  

Imposible saberlo sin ver el ejemplo concreto.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR