Tutoriales Blogger#10: Como añadir una Barra de Progreso

 

Barras de Progresos

¡Que tal mundo!!
Como muchos blogs literarios siempre tenemos RETOS o Proyectos a lo largo del año con lecturas o listas de pendientes por terminar. Y una forma muy creativa de mostrarle a nuestros lectores el progreso del cualquiera que sea nuestro proyecto es poniendo una barra. Lo único que tienen que tener en cuenta es que esta barra hay que ir modificándola a medida que vamos avanzando en nuestro proyecto pero tranquilos no es nada complicado una vez lo entiendan.
SIMPLE 6/20 libros leídos. 

<div style="width:200px; height:13px; padding:0px; background:#FFFFFF; border:1px solid #666; margin:auto; border-radius:0px;"> <div style="width:60%; height:13px; background:#94e0f0;"> </div> </div> <center>6/10 libros leídos</center>

SIMPLE (con padding) 6/10 libros leídos

<div style="width:200px; height:13px; padding:2px; background:#FFFFFF; border:1px solid #666; margin:auto; border-radius:0px;"> <div style="width:60%; height:13px; background:#e665bd;"> </div> </div> <center>6/10 libros leídos</center>

REDONDEADO
6/10 libros leídos

<div style="width:200px; height:13px; padding:0px; background:#FFFFFF; border:1px solid #666; margin:auto; border-radius:5px;"> <div style="width:60%; height:13px; background:#b0f368;"> </div> </div> <center>6/10 libros leídos</center>

REDONDEADO (con padding) 6/10 libros leídos

<div style="width:200px; height:13px; padding:2px; background:#FFFFFF; border:1px solid #666; margin:auto; border-radius:5px;"> <div style="width:60%; height:13px; background:#e9e451;"> </div> </div> <center>6/10 libros leídos</center>

TEXTO EN EL INTERIOR60% 60/100 libros leídos

<div style='width:200px;height:13px;padding:0px;background:#fff;margin:0px auto;border:1px solid #666;border-radius:4px;'><div style='width:60%;height:13px;background:#9f7af3;font-size:9px;line-height:13px;border-radius:4px;text-align:center; color:#4e1dbe;'><b>60%</b></div></div> <center>60/100 libros leídos</center>

Barras para lecturas
SIMPLE (con padding y borde de puntos)
99/329 Paginas. 30% Leído!REDONDEADO(con padding y Borde de líneas discontinuas) 99/329 PAGINAS30% Leído!TEXTO EN EL INTERIOR30% 99/329 Paginas.
▸Vamos ahora a Explicar el código:
1) width: 200px y height:13px

Estos valores hacen referencia al ancho y al alto, respectivamente, del recuadro de la barra de progreso. De modo que si alteramos sus números, obtendremos diferentes tamaños de anchura y altura. Si nos fijamos, existen dos códigos "height:13px", que deben tener el mismo valor. Así que si cambiamos el número del primero, deberemos poner el mismo en el segundo.

2) width: 60%

Este valor establece la longitud de la barra de progreso, será lo único que tendremos que actualizar constantemente según vayamos avanzando en el reto. De modo que si tenemos que leer 10 libros y hemos leído 2, el valor que le daremos será del 20%, es el porcentaje que llevamos completado del reto.

3) padding: 0px

Este valor funciona como una especie de relleno que provoca una separación dentro de la barra de progreso.

4) background: #ffffff

Es el color de fondo del recuadro que, aunque se puede modificar al gusto, es recomendable dejarlo tal cual está, que sería de color blanco

5) border: 1px solid #666

Este valor hace referencia al borde del recuadro, si cambiamos el número, el borde será más o menos grueso. Por otro lado, "solid" es la forma del borde, pero existen otras por las que podemos sustituir esta: - solid: normal. - dotted: puntos. - double: doble borde. - dashed: líneas discontinuas.

6) margin: auto

Este código sirve para que la barra de progreso quede centrada de forma automática. Así que esto no lo tocaremos.

7) border-radius

Con este valor vamos a curvar las esquinas del recuadro.

8) background

Este es el color de la barra de progreso.

9)libros leídos

Este es el texto que cambiaremos según nuestros intereses y que también tendremos que modificar constantemente junto con el "width: %". En caso que escojas el progreso por paginas. tienes que seguir los mismos pasos.

¿Como añadir el Codigo

1. Ve a Diseño. 2. Añadir gadget. 3. Escoge HTML/Javascript. 4. Una vez ahí pegamos el código. 5. Una vez todo esté como queremos, ponemos el título y damos a guardar. 6. ¡Y listo! Recuerda actualizarlo siempre que hagas avances en nuestro reto o lectura.

Esto seria todo.Muchas Gracias por leer me, No olviden: comentar, seguir el blog y compartir!!Besitos¡¡Kc...
¿Te gusta lo que hago? Me ayudas

í