Crear y Personalizar las Lista con Viñetas del Blog

Te enseño a personalizar la lista desordena o lista con viñetas en tu blog de Blogger o WordPress, además de añadir algún efecto al pasar el cursor y algunos consejos sobre las viñetas.

¡Hola! Bienvenido a Peengler, soy Gabriela. Y es momento de mejorar un poco el diseño en tu blog más que todo en la parte del contenido, ya sabes que me gusta personalizar cualquier elemento y como hace poco modifique mi Lista Desordena o Lista con Viñetas pues porque no enseñarte.

Sin más que decir, ¡Empecemos!

Clic en la imagen para ver el vídeo en Youtube

¿Qué son las listas con viñetas?

Una lista te permite organizar ideas o cualquier información. En HTML existen varios tipos de lista en total son 3, pero en esta entrada te explico una y se llama Lista Desordenada. ¿Qué es una lista desordena en HTML? La lista desordenada no muestra ningún orden por lo que normalmente se muestra con viñeta.

Lista con viñetas en HTML

Usan las etiquetas <ul> y su cierre </ul> Y dentro de ellas se usa las etiqueta <li> y su cierre </li> Para cada uno de los elementos. Quedando así:


<ul>
<li>Lista 1</li>
<li>Lista 2</li>
<li>Lista 3</li>
</ul>

Listas con viñetas en Blogger

Para añadir una lista en Blogger, clic en el icono que se muestra en la imagen y haciendo enter podrás seguir añadiendo más a tu lista. Y si das 2 enter seguidos finalizas tu lista.

crear lista con viñetas en blogger

Listas con viñetas en WordPress

Para añadir una lista en WordPress, si usas el nuevo editor, puedes seleccionar de que va a tratar tu bloque, en esta ocasión que sea de lista. Clic en el icono que se muestra en la imagen.

crear lista con viñetas en wordpress

Haciendo enter podrás seguir añadiendo más texto a tu lista.

escribir una lista con viñetas en wordpress

Personalizar la Lista Desordena o Lista con Viñetas

No vas a usar ninguna imagen como reemplazo de la viñeta o (el punto), lo que si vas a usar es FONT AWESOME. Está es una fuente, pero con iconos.

Paso 1: Ir al CSS de tu blog

Y vas añadir lo siguiente:

Font Awesome CDN

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);

CSS

/* LISTA DESORDENDA - peengler.com */

ul {
    list-style-type:none;
    margin:0!important;
    padding:0!important;
}
ul li::before {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f101"; /* ICONO DE LA LISTA */
    margin-right: 8px;
    color: #eb6b15; /* COLOR DEL ICONO */
    font-size: 25px; /* TAMAÑO DEL ICONO DE LA LISTA */
    margin-left: -16px; /* MARGEN IZQUIERDO */
}

ul li {
    padding: 0px 0px 0px 20px!important; /* CAMBIAR EL MARGEN */
}

/* FIN DE LA LISTA DESORDENDA - peengler.com */

PASO 2: Personalizar la Viñeta

En Font Awesome CLIC AQUÍ puedes elegir tu viñeta entre más de 100 iconos que tiene esta página. Aunque me he tomado la molestia de elegir las más usadas, si te gusta alguna solo debes escribir el código en donde señalo arriba en el CSS.

26 Ejemplos de Lista con Viñetas

bullets plus viñeta signo más
\f067
bullets star viñeta estrella
\f005
bullets thumbtack viñeta chinche
\f08d
bullets hand right viñeta mano derecha
\f0a4
bullets circle viñeta de circulo
\f111
bullets circle light viñeta de circulo
\f10c
bullets double right viñeta doble flecha
\f101
bullets arrow viñeta flecha
\f105
bullets arrow circle viñeta flecha con circulo
\f18e
bullets arrow right viñeta de flecha
\f061
bullets caret right viñeta de flecha
\f0da
bullets chevron circle right viñeta de flecha
\f138
bullets chevron right viñeta de flecha
\f054
bullets asterisk viñeta aterisco
\f069
bullets bolt viñeta rayo
\f0e7
bullets bookmark viñeta marca libros
\f02e
bullets check viñeta palomita
\f00c
bullets check circle viñeta check con circulo
\f058
bullets check square viñeta verificacion
\f046
bullets check square dark viñeta check
\f14a
bullets heart viñeta de corazon
\f004
bullets heart light viñeta de corazon
\f08a
bullets long arrow right viñeta de flecha
\f178
bullets caret square light viñeta de flecha
\f152
bullets play viñeta de flecha
\f04b
bullets play circle viñeta flecha
\f144

Cambiar el Color a las viñetas

En esta página CLIC AQUÍ puedes cambiar el color de tus viñetas dependiendo el código del tono que elijas, muy útil para esta ocasión 😊

En conclusión

Al Personalizar la lista desordena o lista con viñetas ayuda a mejorar un poco el diseño de tu sitio y claro que va a resaltar la lista para que ningún lector pase desapercibido de su existencia en tu post. La idea es que lea más ¿no?

Lo mejor de usar Font Awesome como reemplazo de la viñeta o (el punto) es su gran variedad de iconos, ya es cuestión de elegir el icono correcto, modificar su tamaño (si es necesario) y que el color concuerde con tu blog.

¿Te gusto el post?
¡Compártelo!
Gabriela Laya

Gabriela Laya

Me gusta el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs.