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!!