Si pasaste por mi blog de Servicios de Diseño Gráfico entre el 28 y 29 de noviembre seguro que viste el contador regresivo que instalé para que se viera el tiempo que quedaba para poder disfrutar de la oferta. Me gustó porque es sencillito pero puede personalizarse y queda bastante integrado en la web.
Ahora que se acerca la Navidad puede usarse para contabilizar los días que faltan para fin de año. ¡O para que finalice el plazo para apuntarse a un sorteo! Hay un montón de utilidades. Además ¡es muy sencillo de instalar! Solo hay que añadir un pequeño código en la plantilla, personalizarla para adaptarlo al diseño del blog ¡y listo! Vamos a ver cómo hacerlo paso a paso.
Instalar una Cuenta Atrás en Blogger
EL CÓDIGO DEL CONTADOR
<div id="contador"><script language="JavaScript">
TargetDate = "11/30/2014 00:00 AM";
BackColor = "#ffffff";
ForeColor = "#000000";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "¡Fin de la Promo!";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
</div>
Donde 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 extraerlos de esta web:
Colores HTML
INSTALAR EL CONTADOR
Puedes añadirlo como elemento HTML/Javascript desde Diseño o insertarlo dentro de cualquiera de tus entradas en Vista HTML.Si lo haces tal y como está, te aparecerá el contador muy sencillo, sin formato, pero te aconsejo publicarlo en un blog de pruebas para poder darle las características que quieras usando la Vista Previa. Sino, diseñarás a ciegas y es un rollo.
PERSONALIZAR EL CONTADOR
Ahora vamos a darle estilo para adaptarlo al tipo de letra y colores de nuestro blog:
1.- Entramos en nuestra plantilla HTML y buscamos: ]]></b:skin>
2.- Justo encima pegamos:
#contador {
font-family: 'Raleway', Arial, Verdana, sans-serif;
font-size: 18px;
font-weight: normal;
}
Esto es lo básico para personalizarlo:
font-family: el tipo de letra, puedes cambiarla por la tuya o instalar una fuente nueva desde Google Fonts solo para tu contador.
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.
3.- Podemos personalizarlo un poco más añadiendo otras variables, por ejemplo:
#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;
}
Lo que hace cada código es:
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. Ya sabes que puedes consultar ESTA ENTRADA para usar otros tipos de bordes.
padding: el espacio entre el texto del contador y el borde.
4.- Si has seguido mi consejo y has probado a hacer el tutorial en un blog de pruebas, podrás ir viendo los cambios en tu contador gracias a la Vista Previa. Cuando esté tal y como quieres, solo tienes que guardar la plantilla y ponerlo en tu blog.
Queda chulo ¿verdad? ¿Te animas a probarlo? ¡Ya me contarás los resultados! Si quieres puedes dejarme el enlace a tu blog en comentarios para verlo cuando lo hayas instalado.
>> Fuente del Código: hashemian
Suscríbete a mis entradas por email ¡para no perderte nada!
♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥