Personalizar viñetas en Blogger

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.
      Artículo aleatorio
      BuySellAds
      BuySellAds
      BuySellAds
      BuySellAds
      BuySellAds
      Artículos destacados
      Botones para subir y bajar en Blogger # - Botones para subir y bajar en Blogger
      Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
      Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
      Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger # - Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger
      Insertar una página externa en una entrada en Blogger # - Insertar una página externa en una entrada en Blogger