¡Hola!, para ayudarnos en el tema de los retos del 2016 que escribí ayer en el blog, les traigo un tutorial de como hacer la barra de progreso, esa que ponemos debajo de las imagenes de nuestros retos. Hace como dos años les publiqué un creador de estas barras, pero lamentablemente dejó de funcionar, por ello les enseñaré como hacerlo manualmente, con un poco de código HTML y por supuesto, nuestro muy hermoso CSS.

Claro que jugando con el diseño podemos obtener una gran variedad de barras, a continuación les ofrezco algunas junto con su código para que solo copien y peguen en su blog, más abajo les daré una explicación sobre el código.

Diseños cuadrados

---

Por cuadrado me refiero a las esquinas, pues habrá personas a las que no les guste tanto lo redondeado y estoy de acuerdo, pues el exceso puede quitarle un poco de formalidad o minimalismo al blog. Quizás es por eso que muchos blogger optan por el siguiente:

a) Centrado, el progreso se expande a los lados.

60/100 páginas (60% leído)

Código HTML <center><div style="width:200px; height:13px; background:#FFFFFF; border:1px solid #666;"><div style="width:60%; height:13px; background:#abdcf0;"></div></div>60/100 páginas (60% leído)</center>

---

b) Normal, el progreso se expande a la derecha.
60/100 páginas (60% leído)

Código HTML <div style="width:200px;height:13px;background:#FFFFFF;border:1px solid #666;margin:auto;"><div style="width:60%;height:13px;background:#fad4b8;"></div></div> <center>60/100 páginas (60% leído)</center>

---

c) Utilizando padding (relleno).
60/100 páginas (60% leído)

Código HTML <div style='width:200px;height:11px;padding:2px 0px;background:#fff;margin:0px auto;border:1px solid #666;'><div style='width:60%;height:11px;background:#a0c6e1;font-size:3px;line-height:3px;'> </div></div> <center>60/100 páginas (60% leído)</center>

Diseños redondeados

---

Pero, habrá personas a las que sí les guste lo redondeado, pues si se usa de manera sutil puede resultar llamativo en el diseño del blog:

d) Centrado, el progreso se expande a los lados.

60/100 páginas (60% leído)

Código HTML <center><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:#abdcf0;font-size:3px;line-height:3px;border-radius:4px;'> </div></div></center> <center>60/100 páginas (60% leído)</center>

---

e) Normal, el progreso se expande a la derecha.
60/100 páginas (60% leído)

Código HTML <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:#eef6bc;font-size:3px;line-height:3px;border-radius:4px;'> </div></div>

---

f) Utilizando padding (relleno).
60/100 páginas (60% leído)

Código HTML <div style='width:200px;height:11px;padding:2px 0px;background:#fff;margin:0px auto;border:1px solid #666;border-radius:4px;'><div style='width:60%;height:11px;background:#a0c6e1;font-size:3px;line-height:3px;'> </div></div> <center>60/100 páginas (60% leído)</center>

---

Pues los anteriores son solamente ejemplos, uno puede personalizar su barra de la manera en que guste por ejemplo la mía es la que pueden ver a continuación, en ella le agrego un color de fondo, y la hago más delgada. U otras con el texto en el centro.

g) Como la uso en el blog.
60/100 páginas (60% leído)

Código HTML <div style='width:200px;height:4px;padding:2px;background:#f9f9f9;margin: auto;border:1px solid #ccc;border-radius:4px;'><div style='width:60%;height:4px;background:#FB686D;font-size:3px;line-height:3px;'></div></div> <center>60/100 páginas (60% leído)</center>

---

h) Con texto en el centro.
60/100 páginas (60% leído)

Código HTML <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:#eef6bc;font-size:9px;line-height:13px;border-radius:4px;text-align:center; color:#8e9f25;'><b>60%</b></div></div> <center>60/100 páginas (60% leído)</center>

Una breve explicación del código HTML

---

Bien, empecemos con el código HTML. Esto se compone de un bloque <div> dentro de otro bloque <div>, como lo siguiente:

<div style="width:200px; height:13px; background:#FFFFFF; border:1px solid #666; margin:auto;"> <div style="width:60%; height:13px; background:#fad4b8;"> </div> </div> <center>60/100 páginas (60% leído)<br /><br /></center>

En el código tenemos principalmente:

1) width: 200px; y height:13px;
Es el tamaño de ancho y alto respectivamente, en ambos <div> debe tener la misma altura. El ancho en el primer <div> será el tamaño total de la barra, mientras que en el segundo <div> tendremos el porcentaje que hemos alcanzado y es el que actualizaremos constantemente.

2) background:#FFFFFF;
Es el color de fondo, en el primer <div>, será el color del fondo del rectangulo, por ello les recomiendo dejarlo en blanco (#ffffff), sin fondo (background:none;) o transparente (background-color:transparent;).

» Si no conoces los colores en HTML, te dejo este enlace para que encuentres muchos. «
3) border:1px solid #666;
Es el atributo del borde y de preferencia debería tenerlo solo el primer <div>. Primero tiene el tamaño del borde en píxeles, después el estilo de borde [existen también: dotted (punteado), solid (normal), double (doble) y dashed (líneas discontinuas)], y por último el color del borde.

4) margin:auto;
Esto significa que el margen se asignará de manera automática y quedará centrada la barra, para usar el efecto de que se expanda hacia los lados no debe llevar este atributo, pues lo asinamos con la etiqueta <center>.

5) padding:2px;
Esto dará un relleno, aunque más bien es como un margen interno que deja el <div>, se le cambia el tamaño en píxeles.

6) border-radius:4px;
Es el radio de la curva que le dará a cada esquina, en caso de que lo tenga.

---

Pues espero que les sea de ayuda, cualquier duda puedes preguntar en los comentarios y con gusto te ayudaré, además preguntas sobre cualquier tema de diseño de su blog saben que con gusto responderé. Saludos.

Hola creativos, muchos de nosotros como bloggers escribimos nuestras entradas utilizando usualmente las que blogger nos brinda fácilmente en una barra superior de donde escribimos. Esta barra nos fácilita el uso de estilos como:

○ <strike>tachado</strike> = <s>tachado<s>
○ <i>cursiva</i> = <em>em</em>
○ <b>negrita</b> = <strong>strong</strong>
○ <u>subrayado</u>
○ listas <ol>ordenadas numericamente</ol> (ordenadas)
○ listas con<ul>viñetas</ul> (desordenadas).

Pues yo les mostraré algunas que quizás no conocían. Espero les puedan servir en algún momento pues le da un mejor aspecto a nuestras entradas.

Etiqueta big: Ésta etiqueta agranda el tamaño del texto encerrado en ella. Se puede utilizar de manera repetida (sin limites, pueden ser 1, 2, 3, 4, 5....) para hacerlo crecer todavía más. Ejemplo:

Etiqueta Small: Ésta etiqueta es contraria a la etiqueta big, ésta en su caso disminuye el tamaño del texto. Tiene el mismo efecto que la etiqueta anterior y se puede usar repetidas ocasiones en un mismo texto. Ejemplo:

Etiqueta Blink: Ésta etiqueta hace parpadear el texto. Quizás le puedan encontrar un buen uso para algún aviso o texto con el que quieran llamar la atención. Ejemplo:

Etiqueta Code o kbd o tt: Éstas etiqueta sirven para cambiar el estilo de texto y que parezca escrito con letra de maquina de escribir, las tres funcionan de la misma manera y dan el mismo resultado. Ejemplo:

Etiquetas Samp y pre: Se utiliza para mostrar un ejemplo en pantalla, por lo general un código html, un script, etc. Es similar en uso a la etiqueta code. Y tenemos también la etiqueta Pre con la misma función, pero como se darán cuenta automáticamente baja el texto que le continua a la siguiente línea. Ejemplo:

Etiqueta h1, h2, h3, h4, h5: Éstas etiquetas sirven como títulos, cada blog tiene diferentes de acuerdo a su diseño CSS, pero todas se pueden editar. Cada una tiene diferente tamaño siendo h1 la más grande y h6 la más pequeña. Primero pueden usarlas para ver si les agradan las que ya tienen prediseñadas en su blog. Ejemplo:

[Por alguna razón, quizás la configuración del CSS de mi blog, la entrada no muestra correctamente las siguientes etiquetas. Aun así pueden usarlas en su blog para comprobarlas]

Etiqueta Sup: Ésta etiqueta sirve para convertir el texto en superíndice. Ejemplo:

Etiqueta Sub: Ésta etiqueta sirve para convertir el texto en subíndice. Ejemplo:

Etiqueta Cite: Ésta etiqueta sirve para escribir una cita de un libro por ejemplo, el efecto es parecido al de la etiqueta de la etiqueta cursiva. Ejemplo:

Etiqueta Adress: Ésta etiqueta sirve para escribir la dirección URL del autor, al menos con ese motivo fué creada, pero se puede conseguir un efecto como el de la etiqueta cite o cursiva. Ejemplo:

[Algunas etiquetas extras...]

Etiqueta br: Ésta etiqueta sirve para crear un salto de línea, si la ponemos al final de un texto, este se saltará al siguiente renglon. Si ponemos 2 veces la etiqueta este dejará doble renglón y el texto que le preceda parecera otro párrafo.

Esta etiqueta como en todas se debe cerrar de la manera tradicional<br></br>, pero como no se debe incluir nada entre esas etiquetas se usa un estilo abreviado así <br />, Ejemplo:
Etiqueta hr: Ésta etiqueta sirve para crear una línea horizontal como división en nuestra entrada, blog, etc. De igual manera se utiliza su estilo abreviado Ejemplo:
Etiqueta marquee: Ésta etiqueta sirve para crear marquesina, son textos que se desplazan en una dirección, hay formas más complejas de personalizarlo, pero daré las más comunes. Ejemplo:

Hola creativos, ya saben que me gusta mucho el diseño web así como el diseño gráfico y es por eso que vengo con muchos tutoriales para ayudarles a personalizar -Personalizar = A su gusto- su blog. Ahora les quiero enseñar como personalizar el blockquote, ¿No sabes que es eso?, es lo siguiente:

Una cita o un comentario entre comillas, yo les enseñaré como personalizarlos, les daré varios ejemplos y ustedes escojeran el que más les guste para pegarlo en el HTML de su plantilla.

Primero explicaré como insertarlo en su blog, solo sígan los pasos:

• Abren la plantilla de su blog y le dan en editar HTML
• Luego usando CTRL+F buscan "blockquote{" o "blockquote {" y remplazan todos sus atributos con el que les guste.
• Lo personalizan a su gusto y listo.

Estilos de blockquote

01. Blockquote con puntas normales sin bordes

02. Blockquote con puntas normales con borde sólido

03. Blockquote con puntas normales con bordes punteado

04. Blockquote con puntas redondeadas sin bordes

05. Blockquote con puntas redondeadas con borde sólido

06. Blockquote con puntas redondeadas con borde punteado

07. Blockquote con imagen de fondo y borde sólido

08. Blockquote con imagen de fondo, borde sólido y redondeado

Códigos de cada estilo de blockquote

Cómo poner comillas antes y después del blockquote

Creo que esto puede ser todo por el momento, si tienen dudas dejenme un comentario y si necesitan ayuda con cualquier cosa respecto al diseño de su blog díganmelo y con gusto les ayudo.