24 de diciembre de 2014

Contador regresivo en Blogger

Puede usarse para contabilizar los días que faltan para fin de año.
O para que finalice el plazo de un sorteo,etc
Solo hay que añadir un pequeño código en la plantilla, personalizarla para adaptarlo al diseño del blog.

Ir a Diseño ► Añadir un gadget  HTML/Javascript.
Dentro del gadget pegaremos el siguiente código:

<div id="contador">
<script language="JavaScript">
TargetDate = "12/31/2014 00:00 AM";
BackColor = "#ffffff";
ForeColor = "#000000";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "¡2015!";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
</div>


► Puede personalizarse:
TargetDate: La fecha y hora de finalización del evento / promoción o lo que quieras.
BackColor: Color de fondo.
ForeColor: Color del texto.
FinishMessage: El mensaje que aparecerá cuando finalice tu promoción / evento.

✎ Recuerda que los códigos de los colores puedes encontarlos aquí :Colores HTML
✎ Puedes añadirlo como elemento HTML/Javascript desde Diseño o insertarlo dentro de cualquiera de tus entradas en Vista HTML.

#contador { font-family: 'Raleway', Arial, Verdana, sans-serif; font-size: 18px; font-weight: normal; }
►Para personalizarlo:
font-family: el tipo de letra, puedes cambiarla por la tuya o instalar una fuente nueva desde Google Fonts , (ver como instalar nuevas fuente en el blog).
font-size: tamaño de la letra.
font-weight: "peso de la letra". Si quieres que aparezca en negrita, cambia normal por bold.

✎ Recuerda que los colores se personalizaban en el código anterior, el del contador.

#contador { font-family: 'Raleway', Arial, Verdana, sans-serif; font-size: 18px; font-weight: normal; text-align: center; text-transform: uppercase; background: transparent; width: 450px; border: 1px solid #000000; padding: 5px; }
text-align: alineamos el texto al centro.
text-transform: todo el texto en mayúsculas. Si lo quieres normal, solo tienes que eliminar esta línea del código.
background: color de fondo. Si usas un color sólido, verás que se colorea toda la línea, para solucionar esto, añadimos el siguiente fragmento:
width: ancho del contador. Puedes ir sumando o restando píxeles hasta que quede tal y como quieres.
border: añadimos un borde fino de color negro. Ver Aquí  para usar otros tipos de bordes.
padding: el espacio entre el texto del contador y el borde.

Ver ejemplo






No hay comentarios:

Publicar un comentario

Diseño por Blogger Sin Escalones Con la tecnología de Blogger.