El Perro de Papel Idea guardada 1 veces
Sé la primera persona en valorar esta idea Valorar

Cómo poner un contador regresivo en Blogger

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 HTMLINSTALAR 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




Fuente: este post proviene de El Perro de Papel, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Recomendamos

Relacionado

general propuestas

Cómo hacer adaptables a cualquier dispositivo las imágenes en Blogger

Hoy día una web o un Blog no sólo se visualiza en ordenadores, ahora es necesario cuidar también su presentación en dispositivos móviles. Los usuarios utilizan pantallas de toda clase y tamaño para adentrarse en nuestros contenidos, debemos cuidar la manera en que mostramos la información para que sea fácilmente accesible desde cualquier aparato. Una parte fundamental de cualquier web o Blog son s ...

general ayuda blogger otros tutoriales

Cómo poner un botón de 'Seguir con GFC' sin que sea el gadget de blogger

El jueves os decía en facebook que aceptaba sugerencias sobre lo que publicar esta semana. Tengo varias ideas en la recámara (es decir, en mi hoja de ideas para posts) pero ya que no tenía nada escrito, me daba igual coger una de las mías que una sugerencia vuestra. Mejor si cojo una sugerencia vuestra, ¿no? :) En cuestión de 3 minutos ya tenía dos sugerencias y una además me ha parecido muy buen ...

internet blog básico ...

Cómo poner botones interactivos en tu blog

¿Te has fijado en los botones que uso en todos mis blogs de blogger? Como los que puedes ver en la barra lateral de este blog anunciando mis cursos y ebooks para bloggers y diseñadores. Son botones interactivos, yo elijo los colores y escribo el texto, el resto lo hace solito blogger gracias al código que tengo instalado en mi plantilla. Y eso es lo que voy a compartir contigo hoy. ¡Verás que es m ...

general ayuda blogger otros tutoriales

Como poner la barrita de cookies en blogger

No me suele gustar publicar sobre cosas que ya han sido publicadas tropecientas veces en otros lados. Ojo, seguro que lo hago, pues realmente no leo otros blogs sobre mi temática, pero si algo sé o intuyo que ya lo han publicado mil sitios más, pues trato de evitarlo, porque para qué. Si es algo tipo el post sobre si es mejor blogger o worpdress, pues sí, porque al final yo doy mi punto de vista ( ...

general propuestas

Cómo añadir un botón para imprimir en tu web

Muchos creadores de contenidos web, especialmente Bloggers, siempre pueden complementar sus entradas con valor añadido: permitir al usuario descargarse las instrucciones en un archivo de lo que explican en sus entradas o la posibilidad de que el usuario se las imprima en papel. Aunque en Diarios de la nube hemos explicado con anterioridad cómo imprimir en Blogger de una manera más o menos sencilla ...

internet blog intermedio ...

Tutorial Blogger: Cómo poner una lupa en el buscador de blogger

Seguimos personalizando el diseño del blog para adaptarlo completamente a nuestra idea. Hoy vamos a ver cómo poner una lupa en el buscador de Blogger, un pequeño detalle que nos hará diferentes ¿no crees? 1.- El código que vamos a usar es: <form action="/search" id="buscador" method="get"> <input id="texto" name="q" onblur="if (this.v ...

Cómo personalizar el contador de visitas blogger

Señoras y señores... ¡otro post que tenía preparado y para no echarlo a perder! Os lo contaba el lunes, y este os otro que tenía, pero ya no tengo más... :( Tenía uno de la técnica Pomodoro, pero no tengo ni dos párrafos, así que tendría que escribirlo de cero como quien dice jaja, y luego otro sobre 10 razones por las que aprender html y css, que si queréis, lo publico, decírmelo en los comentari ...

general diseño

Cómo poner la primera letra del texto distinta al resto en blogger

Alguien me dejó un día en el formualrio una petición para que explicara, por favor, cómo poner la primera letra del texto de manera distinta en Blogger. Así: Supongo que querrá imitar el estilo revista. Aparentemente vio un tutorial por ahí pero no lo entendió y quería que yo lo explicara con mis palabras. Para que te quedes tranquila de todos modos, yo tampoco lo entendí. Vamos, en mi opinión no ...

avanzado BLOG blogging ...

Cómo instalar un slider de imágenes en blogger

Esta semana he recibido un correo con esta duda: ¿Cómo instalar un slider de imágenes debajo del cabecero en blogger? Y no es la primera vez que me preguntan por el mismo tema. Este tipo de correos no puedo contestarlos uno a uno, prefiero anotar las dudas y cuándo se repiten mucho, desarrollar un tutorial en el blog, para que pueda verlo todo el mundo. Si me conoces un poco, ya sabes que no soy m ...

desde0

Cómo crear un menú con submenús en Blogger sin tener experiencia en informática o programación

Crear un menú en cualquier Blog es algo fundamental para organizar nuestros contenidos de manera que podamos presentarlos a nuestros usuarios de una manera estructurada y sencilla. Hemos tratado con anterioridad cómo crear un menú sencillo en Blogger sin tener ninguna experiencia en programación, con simples opciones que agrupan entradas bajo las etiquetas de tu Blog y que se puede poner con suma ...