jueves, 9 de octubre de 2014

Barra de progreso

En varios blogs he visto barras de progreso cuando se desea mostrar gráficamente el avance de algo, ya sea un reto o una meta a cumplir.

Por eso me puse a buscar en internet cómo crear una y me llevé una gran sorpresa al ver lo sencillo que era.

Código HTML

El siguiente es un ejemplo con el código correspondiente, para aquellos que tienen algún conocimiento de HTML. Destaqué en rojo lo mínimo que querrán modificar para personalizar su barra:



34 / 100 páginas. 34% cumplido!

<div style="background: #FFFFFF; border: 1px solid #000000; height: 15px; width: 200px;">
<div style="background: #006699; font-size: 8px; height: 15px; line-height: 8px; width: 34%;">
<br /></div>
</div>
34 / 100 páginas. 34% cumplido!


Generador del código

Para aquellos que no desean meterse con el código, existe una página que, ingresando unos pocos datos, generará el código final para que podamos copiarlo y pegarlo en nuestro blog. He acá los pasos a seguir:

1. Ingresar a esta página.

2. Buscar el ejemplo de la barra de progreso, un poco más abajo.

3. En Create Your Own! ingresar nuestros datos:

    a. En Current Word Count ingresar el valor que llevamos

    b. En Total Word Goal ingresar el valor total al que queremos llegar

    c. En Progress Bar Color ingresar el color de la barra de progreso. Si no sabemos de colores en hexadecimal, simplemente hacemos click en Pick Color for your Word Meter y seleccionamos el color en la ventanita que se abrirá.

4. Presionar Calculate

5. Más abajo se mostrará la barra de progreso que hemos creado y, en un recuadro, el código que deberemos copiar y pegar en nuestro blog.
Si estás en Blogspot,  nos vamos a Diseño, agregamos por un gadget de tipo HTML/javaScript y en él copiamos el código.

Y listo!!!



No hay comentarios:

Publicar un comentario