Buscar

27 junio 2013

Gadget de cuenta regresiva para Blogger


He estado buscando gadgets para hacer una cuenta regresiva que necesito para un blog. La busqueda resultó ser más demorada de lo que pensé y con resultados insatisfactorios, pues la mayoria de "Countdowns" que hay por ahí (algunos gratis, otros no), tienen la desventaja de que casi no puedes modificarlos a tu gusto.
Por ello te he traído tres opciones perzonalizables para que pongas cuenta regresiva en tu Blog!. Puedes ponerlas tal cual como yo las preparé o puedes modificarlas a tu gusto.

Mira el demo de las tres opciones:


Countdown-1
Countdown-2
Countdown-3

Para cualquiera de las 3 opciones debes seguir estos pasos:

1. Vé a Diseño  Añadir gadget  HTML/javascrip

2. Pega el código HTML de la opción que hayas escogido, que pongo más abajo, teniendo en cuenta las cosas que debes cambiar en color rojo. Guarda los cambios.

3. Vé a Plantilla  editar HTML y busca el nombre del Gadget que creaste en el paso 2.
Nombre del Gadget
Si es tu primer gadget de HTML, por defecto se llama "HTML1", si no es así, debes buscar cómo se llama. Guarda ese nombre en un archivo de texto ya que lo usaremos en el código CSS.

4. Vé a Plantilla  Personalizar  Avanzado  Añadir CSS. Allí pega el código CSS de la opción que hayas escogido, cambiando también lo que resalta en rojo. Guarda los cambios.

5. Listo ya tienes tu countdown!

Nota para código HTML:


TargetDate corresponde a la fecha del evento (mes/día/año),
BackColor el color del fondo del texto,
ForeColor, el color de la fuente,
FinishMessage, el mensaje que quieres se muestre a la hora del evento

Nota para código CSS:


Juega con background-size y background-position para que cuadre la imágen de fondo con el texto.


Countdown 1: Cuenta regresiva de evento importante 

Imagen de fondo para este conuntdown aquí.







HTML
--------------------------------------------------------------------------------------
<div style="position:relative;top:25px; left: 90px">Faltan...</div>
<div style="position:relative;top:25px; left: 40px; "><script language="JavaScript">
TargetDate = "9/2/2013 ";
BackColor = "transparent";
ForeColor = "#C1338F";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Días";
FinishMessage = "Hoy es el gran día!";
</script>
<span style="font-family:Arial;font-size:37px">
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
</span>
</div>
<div style="position:relative;top:25px;left:-10px;  text-align:center">para el Gran Evento</div>
---------------------------------------------------------------------------------------

CSS
---------------------------------------------------------------------------------------
#HTML1/* Este es el nombre del gadget que copiaste y guardaste en el paso 3*/
width: 250px;/* Dimensiones del gadget*/
height: 160px;
background: url(URL_de_tu_imagen) ;
background-repeat: no-repeat;
background-size: 250px 140px;/* Dimensiones de la imagen de fondo*/
background-position: 0px 20px;/* Posición de la imagen de fondo, de izquierda y desde arriba respectivamente*/
}
--------------------------------------------------------------------------------------

Countdown 2: Cuenta regresiva para el fin de año

Imagen de fondo para este countdown aquí.



HTML:
------------------------------------------------------------------------------------------
<div style="position:relative;top:20px; left: 90px">Faltan...</div>
<div style="position:relative;top:20px; text-align:center; "><script language="JavaScript">
TargetDate = "1/1/2014 ";
BackColor = "transparent";
ForeColor = "#C1338F";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Días %%H%% Horas,<br> %%M%% Minutos, %%S%% Segundos";
FinishMessage = "Feliz año!";
</script>
<span style="font-family:Palatino Linotype;font-size:13px">
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
</span>
</div>
<div style="position:relative;top:20px;  text-align:center">para que se acabe el año</div>
-----------------------------------------------------------------------------------------

CSS:
-----------------------------------------------------------------------------------------
#HTML1{/* Este es el nombre del gadget que copiaste y guardaste en el paso 3*/
width: 250px/* Dimensiones del gadget*/
height: 160px;
background: url(URL_de_la_imagen) ;
background-repeat: no-repeat;
background-size: 80px 80px/* Dimensiones de la imagen de fondo*/
background-position: 0px 20px;/* Posición de la imagen de fondo, de izquierda y desde arriba respectivamente*/
}
----------------------------------------------------------------------------------------

Countdown 3: Cuenta regresiva para evento escolar


Imagen de fondo para este countdown aquí.







HTML:
-----------------------------------------------------------------------------------------
<div style="position:relative;top:23px; left: 55px">Faltan...</div>
<div style="position:relative;top:25px; left: 20px; "><script language="JavaScript">
TargetDate = "9/2/2013 ";
BackColor = "transparent";
ForeColor = "#8A0808";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat ="%%D%% Días";
FinishMessage = "The time is now!";
</script>
<span style="font-family:Palatino Linotype;font-size:37px">
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
</span>
</div>
<div style="position:relative;top:30px;left:-45px;  text-align:center">para el próximo<br /> encuentro estudiantil</div>
-----------------------------------------------------------------------------------------

CSS
-----------------------------------------------------------------------------------------
#HTML1{/* Este es el nombre del gadget que copiaste y guardaste en el paso 3*/
width: 250px;/* Dimensiones del gadget*/
height: 200px;
background: url(URL_de:_la_imagen) ;
background-repeat: no-repeat;
background-size: 300px 210px;/* Dimensiones de la imagen de fondo*/
background-position: -70px 0px;/* Posición de la imagen de fondo, de izquierda y desde arriba respectivamente*/
}
-----------------------------------------------------------------------------------------

Nota: Para mayor información del código de countdown visita: http://www.hashemian.com/tools/javascript-countdown.htm

Espero sea de gran ayuda!!

9 comentarios:

  1. Este comentario ha sido eliminado por el autor.

    ResponderBorrar
  2. Después de mucho mirar, al fin he dado con lo que necesitaba, muchas gracias por compartirlo con los demás.

    Ahora si no es mucho pedir necesitaría un reloj de las mismas características, que al menos se pudiera cambiar el color del fondo y de los numeros, gracias de antemanos

    ResponderBorrar
    Respuestas
    1. Hola, puedes editar el estilo de los relojes usando codigo html y en CSS como se muestra en las explicaciones, sólo debes cambiar la url de la imagen de fondo o color de fondo que quieres que se muestre, por ejemplo en css:

      background: url(URL_de:_la_imagen) ; /* ó puedes usar un color en vez de una url*/
      background:#2EFEF7

      Cualquiera de las dos formas te sirve, sólo cambia lo que está en rojo del codigo (en el post) y dale el estilo que quieras.

      Borrar
  3. Pufff un poco complicado para quienes no tenemos ni idea de informática. ¿No habría algo más sencillo de poner?

    ResponderBorrar
    Respuestas
    1. Hola Isa, puedes hacerlo más fácil en esta página: http://countingdownto.com/. O busca en Google "free Countdown Clock Widget" y te saldrán muchas opciones. Saludos

      Borrar
  4. Queda perfecto. Lo único que me falta es saber cómo cambiar el color del texto, es decir, para "Faltan" y "encuentro estudiantil". Me salen por defecto en blanco y me gustaría más oscuro. Muchas gracias y un saludo.

    ResponderBorrar
  5. Perdón, se me olvidaba... Y el tamaño de la fuente.
    Gracias de nuevo ;-)

    ResponderBorrar
    Respuestas
    1. Hola, el color de la fuente lo cambias en la sección de HTML que dice "ForeColor = #8A0808", allí cambias el código de color que quieras y para el tamaño dirígete a "Fontsize". Espero haber resuelto tus dudas. Saludos

      Borrar

Gracias por comentar!

 
Tips para los productos de Google | Copyright © 2014 Angela Sofía Parra Paz | Diseñado por: compartidisimo | Con la tecnología de: Blogger