AyudaBloggers{...}
Personalizar viñetas en Blogger
Las viñetas corresponden a texto separado entre líneas, las cuales se identifican con la etiqueta <ul> y cada línea en las viñetas se determinan mediante <li>.

Estas son viñetas normales:
  • Lorem 1
  • Ipsum 2
  • Lipsum 3


Podemos personalizar el ícono que se encuentra en la parte izquierda del texto, o bien personalizar las posiciones, espaciados, etc.

¿Cómo personalizar las viñetas?

Es necesario que sepas, que es posible definir el tipo de viñeta con el atributo list-style, el cual posee varios tipos y detallaremos y ejemplificaremos cada uno de ellos.

Estos son los tipos de viñetas que existen de manera genérica en CSS:
  • disc
  • circle
  • square
  • decimal
  • lower-roman
  • upper-roman
  • lower-alpha
  • upper-alpha
  • none

Tipos de viñetas:


Disc: Esta es la viñeta genérica, corresponde a la que es utilizada por defecto en el navegador, es un círculo con un área oscura:
  • Lorem 1
  • Ipsum 2
  • Lipsum 3
Circle: Esta viñeta al igual que disc es un círculo, pero ésta no posee un área, sólo es un contorno.
  • Lorem 1
  • Ipsum 2
  • Lipsum 3
Square: Esta corresponde a un cuadrado con un área oscura:
  • Lorem 1
  • Ipsum 2
  • Lipsum 3
Decimal: Esta viñeta corresponde a líneas enumeradas con números decimales:
  • Lorem 1
  • Ipsum 2
  • Lipsum 3
Lower-Roman: Enumeración en números romanos en minúsculas:
  • Lorem 1
  • Ipsum 2
  • Lipsum 3

Upper-Roman: Enumeración en números romanos en mayúsculas:
  • Lorem 1
  • Ipsum 2
  • Lipsum 3

Lower-Alpha: Orden alfabético en minúsculas:

  • Lorem 1
  • Ipsum 2
  • Lipsum 3

Upper-Alpha: Orden alfabético en mayúsculas:
  • Lorem 1
  • Ipsum 2
  • Lipsum 3
None: Sin viñetas:
    • Lorem 1
    • Ipsum 2
    • Lipsum 3
    Además de los tipos de viñetas genéricas, es posible usar imágenes gracias al atributo URL.

      Definiendo las viñetas de las entradas:

      Para aplicar el tipo de viñeta en las entradas es necesario que crees la síntaxis básica CSS:
      .post ul li {
      list-style:
      }
      En el valor list-style, deberás escoger algún tipo de viñeta, veamos un ejemplo:
      .post ul li {
      list-style: square;
      }
      Como se puede apreciar, he utilizado el tipo square (Cuadrado).

      Usando imágenes:

      Para definir una imagen como viñeta, se puede hacer gracias al siguiente patrón:
      list-style-image:url(URL-DE-LA-IMAGEN);


      Ejemplo de la síntaxis:
      .post ul li {
      list-style-image:url(URL-DE-LA-IMAGEN);
      }
      Resultados:
      • Lorem 1
      • Ipsum 2
      • Lipsum 3

      • Lorem 1
      • Ipsum 2
      • Lipsum 3


      Importante:
      • Recuerda que los atributos CSS que crees, siempre van antes de ]]></b:skin>.
      • Para personalizar todas las viñetas (No sólo las de las entradas) elimina la línea .post en el selector.
      Escrito por
      víctor calderon

      Víctor Calderón es un jóven chileno de 21 años, estudiante analista programador y orgulloso padre de una hermosa niña.

      Moderador en +TBEE y escritor/fundador de este blog.

      tweet

      Blogroll de Ayuda Bloggers