Hace algunos días, mis compañeras de Saga Vanir FanClub me pidieron un contador de cuenta regresiva para la publicación de El libro de Ardan de la escritora Lena Valenti. Y el resultado fue lo que veis a continuación.








Después de buscar durante mucho rato en la red y los únicos contadores "profesionales" que encontré no me  terminaban de convencer o tenia que pagarlos, me inspiré en la web de nuestras amigas Dark Hunters Spain y basándome en los contadores que tienen ellas, cree este sencillo contador para lo que me habían pedido.


Cuando comencé a trabajar en ello, me encontré pensando en a ver como podía montar las imágenes para que no se notara que tenia que meter el código del contador entre ellas, y como no tenia ni idea de como hacerlo, al final preparé un contado compuesto por Tres partes.

FONDO=



IMAGEN DE LA PORTADA DEL LIBRO=

EL CONTADOR=


*El contador (Números marcha atrás) lo configuré en esta pagina (pulsar aquí) y reservar el código.


UNA VEZ TENGAMOS TODOS LOS ELEMENTOS QUE QUERAMOS (EN ESTE CASO ESTROS TRES) VAMOS A PROCEDER A MONTARLOS PARA CREAR EL CONTADOR.

Para agregar el contador, nos vamos a Diseño ➔ Añadir un gadgetHTML/Javascript y una vez lo tenemos este es el código que hay que insertar.


<table background="URL DE LA IMAGEN DEL FONDO" border="1" bordercolor="#ee0505" cellpadding="5" cellspacing="5" style="height: 150px; width: 125px"><tbody>
<tr><td><br />
<br /><br />
<img src="URL DE LA IMAGEN DE LA PORTADA DEL LIBRO" style="height: 175px; width: 150px;" />
<center>
<iframe frameborder="0" height="49" src="http://free.timeanddate.com/countdown/i3jirabu/n141/cf12/cm0/cu4/ct1/cs1/ca0/co0/cr0/ss1/cacf00/cpc000/pc000/tcfff/fn3/fs100/szw576/szh243/iso2013-04-17T10:00:00/bas2/bat1/bac900/pl18/pr18/pt6/pb6" width="227"></iframe></center>
</td></tr>
</tbody></table>

Podemos hacer ciertas modificaciones del codigo tocando los siguientes codigos:
border="1" bordercolor="#ee0505" cellpadding="5" cellspacing="5" style="height: 150px; width: 125px"
Con este código podemos modificar las características del FONDO. Borde o no Borde, Color de este, y tamaño.

Con este otro código:
style="height: 175px; width: 150px;
Modificamos las características del Tamaño de la imagen de la portada del libro dependiendo de las proporciones de las medidas del fondo.

Y por ultimo, con este codigo, insertamos el contador:
<iframe frameborder="0" height="49" src="http://free.timeanddate.com/countdown/i3jirabu/n141/cf12/cm0/cu4/ct1/cs1/ca0/co0/cr0/ss1/cacf00/cpc000/pc000/tcfff/fn3/fs100/szw576/szh243/iso2013-04-17T10:00:00/bas2/bat1/bac900/pl18/pr18/pt6/pb6" width="227"></iframe>

Este es el código que habíamos reservado antes que nos ha dado la pagina "externa" donde hemos hecho el contador numérico.

OJO! RECORDAR QUE LA IMAGEN DEL FONDO TIENE QUE TENER LAS PROPORCIONES NECESARIAS PARA COMPRENDER LA PORTADA DEL LIBRO Y EL CONTADOR!!!

Y hasta aquí este mini tutorial, espero que se me haya entendido porque, me suelo explicar un poquito mal.

Mordis!!










Shia Wechsler