Gadgets de cuenta regresiva para Londres 2012

29 de marzo de 2012 97 comentarios ,
Los XXX Juegos Olímpicos están cada vez más cerca y muchos, sobre todo los que gustan del deporte, están esperando con ansias este acontecimiento que se celebra cada cuatro años.

Así que para todos aquellos que quieran estar al pendiente de los juegos, he hecho un gadget de cuenta regresiva para las Olimpiadas de Londres 2012 en tres colores.

Para poner uno de estos tres contadores entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pega el código del contador que más te guste.



<table background="http://lh3.googleusercontent.com/-KdDQSKyrKQc/T3UJzX6AzTI/AAAAAAAACV0/UBtcuUQD9S4/s000/countdown_bg.png"border="0"width="250"height="162"cellpadding="0"><tbody><tr><td><div style="width:145px; height;64px; text-align:center; margin-top:-20px; float:right; font-size:56px;font-family:impact; color:#da0080"><script type="text/javascript">// Cuenta regresiva Londres 2012
// Diseñado por ciudadblogger.com
function renderMessage(dateStr,msg1,msg2,countFrom){var date=new Date(dateStr);var now=new Date();var diff=date.getTime()-now.getTime();var days=Math.floor(diff/(1000*60*60*24))+1;if(days<1){document.write(msg1)}else{if(countFrom)days=countFrom-days;document.write(msg2.replace(/%days%/g,number_format(days)))}}function number_format(num){num=num.toString().replace(/\$|\,/g,'');if(isNaN(num)){num="0"}sign=(num==(num=Math.abs(num)));num=Math.floor(num*100+0.50000000001);num=Math.floor(num/100).toString();for(var i=0;i<Math.floor((num.length-(1+i))/3);i++)num=num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));return(((sign)?'':'-')+num)}</script><script type="text/javascript">renderMessage("July 27, 2012","00","%days%");</script></div></td></tr></tbody></table>



<table background="http://lh3.googleusercontent.com/-ApqPUOb_l_M/T3UJaZyosEI/AAAAAAAACVs/U3LOnq3vQKY/s000/countdown_bg.png"border="0"width="250"height="162"cellpadding="0"><tbody><tr><td><div style="width:145px; height;64px; text-align:center; margin-top:-20px; float:right; font-size:56px;font-family:impact; color:#009cde"><script type="text/javascript">// Cuenta regresiva Londres 2012
// Diseñado por ciudadblogger.com
function renderMessage(dateStr,msg1,msg2,countFrom){var date=new Date(dateStr);var now=new Date();var diff=date.getTime()-now.getTime();var days=Math.floor(diff/(1000*60*60*24))+1;if(days<1){document.write(msg1)}else{if(countFrom)days=countFrom-days;document.write(msg2.replace(/%days%/g,number_format(days)))}}function number_format(num){num=num.toString().replace(/\$|\,/g,'');if(isNaN(num)){num="0"}sign=(num==(num=Math.abs(num)));num=Math.floor(num*100+0.50000000001);num=Math.floor(num/100).toString();for(var i=0;i<Math.floor((num.length-(1+i))/3);i++)num=num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));return(((sign)?'':'-')+num)}</script><script type="text/javascript">renderMessage("July 27, 2012","00","%days%");</script></div></td></tr></tbody></table>



<table background="http://lh6.googleusercontent.com/-lwy8tIUEIOY/T3UI-XUr0SI/AAAAAAAACVk/S5LztYfslYc/s000/countdown_bg.png"border="0"width="250"height="162"cellpadding="0"><tbody><tr><td><div style="width:145px; height;64px; text-align:center; margin-top:-20px; float:right; font-size:56px;font-family:impact; color:#ee8600"><script type="text/javascript">// Cuenta regresiva Londres 2012
// Diseñado por ciudadblogger.com
function renderMessage(dateStr,msg1,msg2,countFrom){var date=new Date(dateStr);var now=new Date();var diff=date.getTime()-now.getTime();var days=Math.floor(diff/(1000*60*60*24))+1;if(days<1){document.write(msg1)}else{if(countFrom)days=countFrom-days;document.write(msg2.replace(/%days%/g,number_format(days)))}}function number_format(num){num=num.toString().replace(/\$|\,/g,'');if(isNaN(num)){num="0"}sign=(num==(num=Math.abs(num)));num=Math.floor(num*100+0.50000000001);num=Math.floor(num/100).toString();for(var i=0;i<Math.floor((num.length-(1+i))/3);i++)num=num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));return(((sign)?'':'-')+num)}</script><script type="text/javascript">renderMessage("July 27, 2012","00","%days%");</script></div></td></tr></tbody></table>


Y con eso podrás llevarte a tu blog este gadget que contará los días que faltan para los juegos olímpicos. Espero que les gusten :)


97 comentarios en:

" Gadgets de cuenta regresiva para Londres 2012 "

  1. Excelente idea... Saludos Potro.

    PD. Me está gustando esto de comentar primero jajajaja.

    ResponderEliminar
    Respuestas
    1. Es que me agarras casi dándole click al botón de Publicar :)

      Eliminar
    2. Lo que sucede que vive en CiudadBlogger :p

      Eliminar
  2. Qué bárbaro, ¡¡estás en todo!! eres demasiao...
    ...lo mismo me animo a ponerlo, porque las olimpiadas me gustan, aunque siempre ando muy despistada con los calendarios, jeje ;).
    Muchísimas gracias, Potro.
    ¡beso enorme!

    ResponderEliminar
    Respuestas
    1. Pues para los despistados también es el contador, así no se les pasará la fecha :)
      Gracias por el beso, otro para ti.

      Eliminar
  3. buenísimo. No se podrá editar el tiempo de la cuenta para darle otros usos??

    ResponderEliminar
    Respuestas
    1. Sí, de hecho puedes basarte en este script, y a partir de él hacer los tuyos:
      http://ciudadblogger.com/2009/06/reloj-de-cuenta-regresiva.html

      Eliminar
  4. Ha! como siempre! Pionero en opciones para volver el blog mucho más interesante!

    Gracias Potro!

    ResponderEliminar
  5. Respuestas
    1. Sólo hay un gadget, el primero, los demás son imágenes de ejemplo :)

      Eliminar
  6. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  7. Potro, no tenes otros tipos de tabs para colocar en mi blog en 4 gadgets (fíjate en mi blog como son los actuales)? Porque los tabview andan cada vez mas lentos, cuando tengo mas de 500 personas en linea directamente no aparecen y se queda cargando y cargando el blog. Necesito cambiarlo urgente!

    ResponderEliminar
    Respuestas
    1. No estoy seguro, pero me parece que en Compartidísimo tienen unos con jQuery, sería cuestión de que buscaras ahí.

      Eliminar
    2. No me sirven esos porque son para agrupar gadgets y eso no quiero yo, lo que necesito es en un solo gadget colocar todo el código y dividirlo en dos tabs, uno para la tabla de la A y otro para la B. Espero algún día de estos crees un tutorial para dividir varios gadgets en dos o mas tabs, o no sabes de otra página que tenga algún tuto?

      Eliminar
    3. No, pero será más fácil que tú lo busques pues tú sabes con exactitud qué es lo que deseas.

      Eliminar
    4. Busque en internet, pero recordarás que te mostre y sólo funcionaba 1 tab solo entre todos los gadgets HTML/JavaScript.
      Te explico mejor y mas fácil lo que quiero hacer: en un mismo gadget HTML/JavaScript, ejemplo, coloco: Los XXX Juegos Olímpicos... y Así que para todos aquellos... La primera frase que se vea en el primer TAB y la otra en el segundo. Y así hacer con otros gadgets HTML/JavaScript más.

      Eliminar
    5. Pues hay menús de tabs que podrías meter en un sólo HTML/Javascript pero pesará tanto como si aplicas un tabview, así que al final es casi lo mismo que lo hagas de una u otra forma.

      Eliminar
    6. Bueno entonces los mantengo estos, menos trabajo xD jajaja

      Eliminar
  8. Muy bueno, hace algún tiempo que ya puse uno así en mi página http://www.entretiempocba.com.ar/, modificando un poco el script de aquel de cuenta regresiva del fin del mundo que habías publicado. =)

    ResponderEliminar
    Respuestas
    1. Ah ¿pero sabes qué? Cambia el script, el otro que tenía en el Fin del mundo como se basa en las horas tiene un día de diferencia, por ejemplo, con ese a ti te sale que faltan 117 días, pero en realidad son 118.
      Ya el del Fin del mundo lo cambié justamente para corregir ese error :)

      Eliminar
  9. Genial. Me gustaría aprender a crear scripts, pero se ve difícil. Buen artículo.
    Saludos.

    ResponderEliminar
    Respuestas
    1. De hecho este es bastante sencillo, quizá de los más sencillos que hay :)

      Eliminar
    2. Me pregunto cómo son los difíciles entonces Jajaj :)

      Eliminar
  10. Wow! Que buen diseño Potro, te la has rifado.

    ResponderEliminar
  11. Como ya te dije anteriormente, podrías poner un listón con la bandera Olímpica.
    Muy buenos los contadores, gracias.

    ResponderEliminar
    Respuestas
    1. Sí está contemplado Ulisses, de hecho no sabía si hacer primero el contador o las banderas; me decidí por el contador, así que las banderas vendrás después ;)

      Eliminar
  12. Buenas Potro, te quería hacer una consulta pero no se el sitio adecuado para hacerlo. Te lo dejo aquí, y si eso ya lo mueves si quieres.

    El caso es que quería comentarte, si hay alguna forma de hacer que los post se muestran como en el panel de control de blogger, en el apartado de los blogs que seguimos.

    Es decir tener una lista de feeds y que vayan subiendo según se actualizan y tener eso en vez de post particulares.

    Vi la opción del gadget lista de blogs, pero claro, lo ideal es que tenga un resumen considerable y la imagen del post en tamaños aceptables.

    Gracias de nuevo Potro, un saludo...

    ResponderEliminar
    Respuestas
    1. Hola Juan José, puedes ocultar las entradas del blog en la página principal, puedes hacerlo usando condicionales:
      http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

      El ID de las entradas es #Blog1
      Ya que las tengas ocultas puedes poner un gadget de últimas entradas:
      http://ciudadblogger.com/2011/05/ultimas-entradas-por-categorias-con.html

      Aunque ahí dice que es por categorías en los comentarios verás cómo modificarlo para que muestre las últimas entradas del blog, o bien, puedes usar cualquier otro gadget que lea el feed de tu blog.

      Saludos.

      Eliminar
    2. Ok muchas gracias Potro, en cuanto tengas unos minutitos lo pruebo. Lo unico es, que lo que yo quiero es que se publiquen varias entradas de otros blogs por feed, es decir como la lista de blogs.

      Ya te comento como voy.
      Gracias y un saludo...

      Eliminar
    3. Es igual, a ese gadget bien le puedes poner la dirección de tu blog o la de algún otro.

      Eliminar
  13. El diseño es estupendo.. y que decir de los colores.. genial!

    Aunque al parecer el primero ya se "atoró" je je.

    Un saludo

    ResponderEliminar
    Respuestas
    1. El primero es el de verdad. Los otros tres son fotos.

      Eliminar
    2. Exacto, pero creo que los cambiaré todos por contadores, para que no haya confusiones, en un rato más lo pongo :)
      Saludos!

      Eliminar
    3. Ya he visto que los has cambiado. Así mejor. Yo tardé un poco en descubrir que los tres ejemplos eran imágenes.

      Eliminar
  14. hola potro se que no viene al caso pero me gustaría implementar esto en mi blog es como lo q tiene youtube al ver un vídeo se puede elegir apagar las luces como el cine.. se queda oscura la pagina excepto el video.. aqui la url http://www.elwebmaster.com/articulos/usa-jquery-para-apagar-las-luces-al-ver-un-video ya que no entendi muy bien como hacerlo...

    ResponderEliminar
    Respuestas
    1. Hola Jesus, deja reviso el código con más calma y veo si es posible usarlo sin problemas, si es así preparo una entrada sobre ello ¿vale? ;)

      Eliminar
  15. buen, lo pondré en un blog de deportes que tengo, bueno también busco un gatget de cuenta regresiva para wretlemania, ya lo busque por casi toda la red pero lo encuentro, haber si lo encuentras. Saludos Potro

    ResponderEliminar
    Respuestas
    1. Pues algo muy sencillo pero efectivo sería un simple reloj de cuenta regresiva:
      http://ciudadblogger.com/2009/06/reloj-de-cuenta-regresiva.html

      Saludos.

      Eliminar
  16. ...interesante, de todas maneras va en mi blog....buen dato.

    ResponderEliminar
  17. Hola Potro!
    Ultimamente me pasa que muchas veces cuando entro a mi blog no me aparece y en su lugar pone:
    "Service Unavailable
    Error 503"

    ¿Por que pasa eso? ¿Como puedo solucionarlo?

    Gracias

    ResponderEliminar
    Respuestas
    1. Por cierto, mi blog es: www.winxlovely.com

      Eliminar
    2. Es un problema con el servidor de Blogger, estos dos últimos días a varios les sucede lo mismo con varios blogs, incluyendo este.

      Eliminar
    3. Ok, gracias por la aclaración! :-D

      Eliminar
  18. Potro exactamente me pasa lo mismo que Lovix, me sale mucho ese error "Service Unavailable Error 503" y carga lento el blog,pero no tiene que ver nada con esto.
    Sabes a que se debe ese problema?.

    ResponderEliminar
  19. Esto fue lo que hize para tratar de arreglar el problema pero no funciono

    - Hospede los archivos .js por mi parte.
    - Las imagenes que componen la plantilla las subi en mi cuenta blogger.
    - Reduci el numero de entradas visibles en la pagina principal.
    - solo incruste un video de youtube en el blog.

    ResponderEliminar
    Respuestas
    1. Es un problema del servidor de Blogger, y como se trata del servidor no hay nada qué podamos hacer o dónde meter mano, habrá que esperar a que ellos lo arreglen.

      Eliminar
  20. potro no se si te as fijado en un problema que esta pasando con los elementos de pagina sale como inasecible cerrao que no se pueden ni mover .. que es eso

    ResponderEliminar
    Respuestas
    1. A mí no me ha pasado Chino BLack. ¿Has probado moverlos desde otro navegador, otra interfaz o después de haber eliminado las cookies y caché del navegador?

      Eliminar
  21. Potro , podrias hacer un contador así que diga no se , hay 100 conectados, y cambie en tiempo real?? :)

    ResponderEliminar
    Respuestas
    1. No Jordan, pero hay varios contadores web que lo hacen:
      http://ciudadblogger.com/search/label/Contadores

      Eliminar
  22. Que tal Potro, se que no es el tema de esta entrada pero EL GADGET DE PAGINAS NO APARECE En MI BLOG, ya se lo active desde la opcion PAGINAS y nada de nada... a ver si le puedes echar un vistazo jeje te lo agradeceré http://laslajastv.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola VDesing, busca esta parte de tu plantilla y elimínala:
      #crosscol-wrapper{display:none;}

      Eliminar
  23. Que tal: Ya lo hice pero me aparecen ocultas o en sí al pasar el mouse aparecen pero no esta visibles como tal.

    ResponderEliminar
    Respuestas
    1. No es que esté oculto, sino que el color del enlace es blanco, por eso no se ve porque se confunde con el color de fondo. Así que podrías añadirle un color de fondo, por ejemplo así:
      #crosscol-wrapper{
      background: green;
      }

      Eliminar
  24. Cómo te doy lata, pero al buscar una parte de ese código, vi que fué la que eliminé... y ya le urgé pero esa línea obviamente no está y no hay ninguna que se le parezca...

    Gracias de nuevo por tu respuesta

    ResponderEliminar
    Respuestas
    1. Sí, fue la que eliminaste, pero si pones lo que te digo también funcionará.

      Eliminar
    2. Al parecer ya quedó, no me gustó pero al menos ya se ven las pestañas de pagina jeje gracias Potro eres lo más, exitos!!!

      Eliminar
  25. Hola Potro..me encanta lo voy colocar en los Blogs..y para la Eurocopa no hay? .-))) besotes desde Venezuela..

    ResponderEliminar
    Respuestas
    1. Aquí no, en alguno otro blog quizás.
      Gracias por los besotes :)

      Eliminar
  26. Potro disuclpame que te escriba aca, pero me parecio la seccion mas acertada ya que lo que puse es un gadget. Te cuento.. no puedo cambiar el tamaño de la fuente en ese lugar, si las fuentes pero no el tamaño. Porque si vario mucho las fuentes se varian en todo el blog. Busque el html la parte de contacto y no tiene nada mas que palabras como list text. Te paso el blog.. fijate donde dice contacto abajo... esta muy chico alguna sugerencia?.. muchisimas gracias, me toca hacer esto para mi lugar de trabajo y quiero hacerlo bien ;) http://wardessa.blogspot.com.ar/

    ResponderEliminar
    Respuestas
    1. Esa es la fuente general del blog, no sé si desde el Diseñador puedas cambiarlo, en caso de que no entonces debajo de body { verás la sección de font donde está el tamaño de la fuente (sino lo ves entonces sí se cambia con el Diseñador).

      Eliminar
  27. Es la fuente del blog. Lo que sucede es que desde dieño puedo cambiar la fuente y el tamaño pero a ese gadget lista solo le afecta la fuenta el tamaño no se mueve... Gracias Potro

    ResponderEliminar
    Respuestas
    1. Desde el navegador no parece que el gadget tenga otro estilo o tamaño de fuente definido, así que en teoría, según el navegador, cambiando la fuente del blog se debe cambiar el tamaño de todos esos gadgets de abajo.

      Eliminar
  28. Gracias Potro he cambiado los tipos de fuente y afectan a blog pero no a ese gadget. Y queda muy feo si aunemnto la fuente porque se ve todo lo demas muy grande. Entre a html pero no hay referencia a fuentes en ese gadget solo dice, text list un monton de veces.

    ResponderEliminar
    Respuestas
    1. Pues necesitaría ver los cambios que dices para ver por qué no se aplica.
      Otra opción es que agregues estilos específicos a ese gadget:
      #TextList1 {
      font-size:15px;
      }

      Eliminar
  29. En que parte de todo esto debo poner eso. Pues intenté en muchos y siempre me da error

    <b:section-contents id='footer-1'/><b:section-contents id='footer-2-1'>
    <b:widget id='Image1' locked='false' title='' type='Image'/>
    <b:widget id='Stats1' locked='false' title='Visitas' type='Stats'/>
    <b:widget id='Label1' locked='false' title='Etiquetas' type='Label'/>
    </b:section-contents><b:section-contents id='footer-2-2'>
    <b:widget id='TextList1' locked='false' title='CONTACTO' type='TextList'/>
    </b:section-contents></html>

    ResponderEliminar
  30. Potro.. ya lo solucione.. Gracias por tu dedicación siempre.

    ResponderEliminar
  31. Me salgo un poco de contexto.. potro conoces algún gadget para blogger, donde los visitantes respondan a una pregunta mía (respuesta libre), y su respuesta me llegue a mi correo?

    Sin que tengan que poner el email ni nada.. y que solo pueda enviarlo una vez por persona

    ResponderEliminar
    Respuestas
    1. Quizá con un formulario de contacto:
      http://ciudadblogger.com/2009/06/crear-un-formulario-para-el-blog.html

      Eliminar
    2. Pero no quiero que ellos pongan nada más que su mensaje..
      Y que solo se pueda una respuesta por persona.

      Yo lo que quiero hacer es como una encuesta de respuesta libre, y que dicha respuesta me llegue a mi correo

      Eliminar
    3. Entonces tendrás que usar los comentarios de Blogger realizando tu pregunta en una entrada, no conozco otro método.

      Eliminar
  32. se puede agregar tambien segundos y minutos?

    ResponderEliminar
    Respuestas
    1. Este contador sí incluye minutos:
      http://ciudadblogger.com/2009/06/reloj-de-cuenta-regresiva.html

      Eliminar
  33. Potro como esta un saludo de este lado hermano! tengo una inquietud sobre mi blog, http://www.djmanny22.info/ que lo es diseñado usando tu guía y otras pero es usado el editor de blogger, ahora necesito sabes como puedo usar un solo fondo para todos mi gadgets si puede notar entrando a mi blog te dará cuenta que no esta asi un mejor ej es tu mismo blog como noto que tiene diferentes gadgets pero todos están en un mismo fondo y de no ser así quiero que me explique como hacerlo!ya que como lo tengo es horrible hno! un abrazo de este lado

    ResponderEliminar
    Respuestas
    1. En esa plantilla no sé, el problema es que esa plantilla tiene los mismos estilos en todos los contendores :(

      Eliminar
  34. Dios creo que sera ya para mi imposible solo me salvaría si me hiciera una plantilla con el concepto de mi pagina y yo terminaría programando la basándome en tu enseñanza!!

    ResponderEliminar
    Respuestas
    1. Pues si quieres hacer una plantilla empieza desde cero con la Mínima, con esa es más fácil personalizar, o sino quieres complicarte tanto usa una ya hecha de btemplates.com

      Eliminar
  35. Potro Saludes. Quisiera saber si puedes explicar como hacer para personalizarlo, para colocarlo dentro de un fondo, y también si existe otros que no sea el mismo. ? Gracias

    ResponderEliminar
  36. Potro veo que le dijiste que creara el mismo la plantilla. Donde la empiezo a crear y si hay alguna entrada que nos ayude a crearla me lo puedes decir ???

    ResponderEliminar
    Respuestas
    1. Hola Jose, en el código del contador verás una URL, esa es la imagen de fondo, puedes cambiarla por otra que tú hagas en algún editor de imágenes.

      Eliminar
  37. Muhas gracias potro, una ves que se edita sirve para todo!!

    Pero, Como hago para que la letra no se pixele? es posible agregar un borde o de suavisarla o ponerla nitida o redondeada o algun estilo? :/

    Gracias :)

    ResponderEliminar
  38. Hola! lo olvide, como agrego enlace a el background del gadget? eh intentado pero no me sale :/

    ResponderEliminar
    Respuestas
    1. Sólo hay que cambiar la URL por la de la imagen que quieras. La letra quizá quieras cambiarla por otra, hay algunas que tienden a pixelarse más que otras.

      Eliminar
    2. gracias, intentare cambiar la letra, lo de la URL me refiero a agregarle un enlace a la imagen que ponga, ya eh intentado con hacerlo pero nunca se agrega el link a la imagen

      Eliminar
    3. Eso no, porque la imagen está como fondo y los fondos CSS no tienen enlaces.

      Eliminar
    4. Oh! ok, gracias y perdona la molestia

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger