Les he traido ya una serie de contadores, pero aun no estoy satisfecha, y con el Trending Topic de hoy, y el hecho de que se cumplen 500 días exactos antes de la película, les he traido estos contadores tipo Poster.

Utilizando algunos arte fan de talentosas artistas como fondo y el script de Ciudadblogger para estos tres contadores, se los traigo de regalo para sus sitios de Cazadores de Sombras.

Contador hasta el segundo y de nuevo con un poco de ingenio puedes personalizarlo hasta el más mínimo detalle.

Si quieres insertar alguno de ellos, sigue leyendo ;)


Para insertar cualquiera de ellos debes copiar el código que aparece en el bloque y pegarlo en un widget de HTML Diseño/Añadir Elemento/ HTML-Java script ... pega todo, y guarda.

<center><table background="http://dl.dropbox.com/u/40744358/im%C3%A1genes/CoBjamie300x250.jpg"border="0"width="250"height="300"cellpadding="0"style="-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;"><tbody><tr><td><div style="margin-top:225px;margin-left:15px;font-size:22px;font-family:arial;text-shadow: 1px 1px 10px #cccccc;"><script language="JavaScript">TargetDate = "08/23/2013 00:00 AM";BackColor = "transparent";ForeColor = "yellow";CountActive = true;CountStepper = -1;LeadingZero = true;DisplayFormat = "%%D%% D,%%H%% H,%%M%% M,%%S%% S.";FinishMessage = "Disfruta la película!!!";</script><script language="JavaScript" src="http://ciudad-blogger.googlecode.com/files/countdown.js"></script></div></td></tr></tbody></table></center>

<center><table background="http://dl.dropbox.com/u/40744358/im%C3%A1genes/CoBlily300x250.jpg"border="0"width="250"height="300"cellpadding="0"style="-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;"><tbody><tr><td><div style="margin-top:-125px;margin-left:15px;font-size:22px;font-family:arial;text-shadow: 1px 1px 10px #cccccc;"><script language="JavaScript">TargetDate = "08/23/2013 00:00 AM";BackColor = "transparent";ForeColor = "white";CountActive = true;CountStepper = -1;LeadingZero = true;DisplayFormat = "%%D%% D,%%H%% H,%%M%% M,%%S%% S.";FinishMessage = "Disfruta la película!!!";</script><script language="JavaScript" src="http://ciudad-blogger.googlecode.com/files/countdown.js"></script></div></td></tr></tbody></table></center>

<center><table background="http://dl.dropbox.com/u/40744358/im%C3%A1genes/CoB300x250.jpg"border="0"width="250"height="300"cellpadding="0"style="-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;"><tbody><tr><td><div style="margin-top:250px;margin-left:15px;font-size:22px;font-family:arial;text-shadow: 1px 1px 10px #cccccc;"><script language="JavaScript">TargetDate = "08/23/2013 00:00 AM";BackColor = "black";ForeColor = "white";CountActive = true;CountStepper = -1;LeadingZero = true;DisplayFormat = "%%D%% D,%%H%% H,%%M%% M,%%S%% S.";FinishMessage = "Disfruta la película!!!";</script><script language="JavaScript" src="http://ciudad-blogger.googlecode.com/files/countdown.js"></script></div></td></tr></tbody></table></center>

Para personalizarlo, aquí está lo que puedes modificar:

background = "Esta es la URL de la foto de fondo"
width= ancho del contador
height= alto del contador
border radius = son los bordes redondeados, debes modificar todos los valores.
margin top= es el margen que hay desde la parte superior de la foto hasta donde están los números, si lo dejas en 0 se pondrá en el centro exacto de la foto.
margin left= margen izquierdo.
font size= tamaño de la letra
font family= fuente de la letra
text shadow # = es el color de la sombra
backcolor= si quieres agregar o cambiarle un fondo a los números distinto a la imagen que tiene de fondo el contador
forecolor= es el color de los numeros
Finish Message= es el mensaje que aparecerá cuando la cuenta termine.

Si modificas la imagen es posible que no se ajuste al tamaño del contador, para eso tendrás que corregir la imagen a un tamaño exacto de 250 pixeles de ancho por 300 de alto. O cambiar los valores del contador que están en widht y height. O ambas cosas. Esos valores no modifican la imagen sino el área en la que está puesta el reloj, por lo que si pones una imagen de mayor o menor tamaño puede que no tengas los resultados que esperas.

NOTA: Los contadores no trabajan juntos al mismo tiempo. Es decir, si pones dos de ellos, aun cuando lo hagas en dos gadgets distintos, uno va a funcionar y el otro no. Elige uno, y siempre puedes cambiarlos periódicamente para hacerlo más vistoso ;)

Espero que les guste mucho y que lo luzcan en sus páginas.

Se me olvidaba decirlo, si tienen alguna duda o encuentran algun error en sus contadores, escribanla en los comentarios o en el chat ;) y con gusto les ayudo a instalarlo!


Actualización: ¿Cómo instalarlo en tumblr?

Tumblr es un poco más complicado y la verdad aun no le tomo el truco totalmente pero les diré como lo puse en el de ciudadesmecánicas y les advierto que será un experimento colocarlo en el suyo y quizás no les sea de mucha ayuda en caso de que las cosas no resulten.

Si aun asi te animas a intentarlo, así es como lo hice yo:

En el Dashboard (Escritorio) vayan al blog en donde quieren insertarlo, luego a Customize Theme (Personalizar tema). Edición HTML. Les va a aparecer en el lado izquierdo su plantilla del blog, y en el lado derecho una vista previa. Es muy pero muy importante que copien absolutamente todo lo que está a su izquierda y lo peguen en un documento de word antes de modificar cualquier cosa. MUY IMPORTANTE! Guárdalo y conservalo a la mano, aun cuando creas que has terminado de modificar.  Es el salvavidas de tu blog. Hasta los más experimentados pueden ocupar un salvavidas.

Ya lo hiciste? Ahora si, en tu plantilla con un Find o Buscar, encuentra esta parte: <div id="sidebar"> esto marca el inicio de su barra lateral (si no tienen una barra lateral, en lugar de sidebar busquen footer). si lo quieren justo al principio de su barra coloquen el código del contador justo DEBAJO de ese código, (cuida no sustituir nada, si es necesario, parate justo después de <div id="sidebar"> y oprime la tecla Enter un par de veces para crear espacio y que no elimines nada).

Si en cambio lo deseas al final de esa sección tendrás que localizar una parte que dice </div><div id="bottom"></div> hay varios, tienen que encontrar la que está después de "sidebar". Peguen el código justo ANTES de eso y les quedará al final de su barra lateral justo como lo tenemos en ciudadesmecanicas.

Haz clic en Update Preview  (Actualizar Vista Previa) si algo está mal entonces revisa los pasos para ver que falló e intenta de nuevo, pero si todo se ve bien, entonces haz clic en Appearance (Apariencia) y luego en Save (Guardar).

Si de momento no te diste cuenta del error que cometiste y echaste a perder tu blog, no te preocupes, para eso copiaste todo en el documento de word en un principio. Basta con ir y pegar todo de nuevo sustituyendo lo que tienes en la plantilla de tumblr.

Espero que les sirva y para cualquier aclaración deja un comentario ;)


Fuentes de imágenes: Andrew Reyna, ardawlyn, hellyeahjamiebower
Fuente del reloj: ciudadblogger.com
Artículo: Cazadores de Sombras/Ciudades Mecánicas