Cómo poner un contador regresivo en Blogger

diciembre 23, 2014

Cómo poner un contador en Blogger

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 ♥






Te encantará:

4 pensamientos ¡falta el tuyo! ;)

  1. Muchas gracias por esto! Ya instalé un contador en mi blog para la navidad y después lo cambiaré para el nuevo año.
    Cariños

    ResponderEliminar
  2. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  3. Me ha servido de mucha ayuda este tutorial, pero tengo una pregunta, ¿Se puede poner varios contadores regresivos en un mismo gadget en blogger? Tengo un blog donde quisiera poner en la columna lateral un gadget (HTML) donde salgan varias cuentas atrás pero lo he intentado con el código que has puesto y me lo suma todos en vez de ponerlo por separado, no sé si me estoy explicando bien.

    Gracias.

    ResponderEliminar



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.