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

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Pasando Página Blog:

¡Hola, Gabriela!
Muchas gracias por los tips, yo hoy me volví loca porque no sé qué le moví a la plantilla y todo se desbarató pero bendita sea la persona que me dijo: “Siempre descarga la copia” y pues ya quedó jaja, ¡un beso!

Responder
    Gabriela Laya:

    Hola Pasando Página Blog: ostia que bueno que tenias la copia, lo tendré en cuenta cuando me meta con el código 🙂

    Responder
Citu:

Gracias por el tutorial es muy claro. Buen fin de semana

Responder
    Gabriela Laya:

    Hola Citu: Muchas gracias 🙂

    Responder
Maria Eugenia ARIAS LOZANO:

Madre mía, no sabía que esto se podía hacer… si es que siempre aprendo algo cada vez que paso por aquí. Gracias!!

Responder
    Gabriela Laya:

    Hola Maria Eugenia: bueno ya vez que se pueden hacer muchas cositas en Blogger

    Responder
Serena Miles:

hola guapa,
pues muchas gracias por tu pedazo de explicacion, yo no sabia hacerlo pero me ha quedado bien claro… a ver si practico
Gracias por la entrada
Besotesssssssssssssss

Responder
    Gabriela Laya:

    Hola Serena Miles: que genial, espero que no tengas problemas 🙂

    Responder
Nayade:

Woooo
Fijo que lo pongo a prueba porque me parece super útil
Muchas gracias por compartirlo
Besos ♥

— – El Mundo de Naya – –

Responder
    Gabriela Laya:

    Hola Nayade: me alegro que te gustara 😀

    Responder
Sakuya Aikawa:

(ノ◕ヮ◕)ノ*:・゚✧ Holaaa!!!
Buenísimas entrada, el otro día estaba pensando que echaba de menos las entradas de tutoriales
y recordé que tu das buenísimos consejos.
No utilizo mucho la viñetas pero de igual forma sé que tu consejo me servirá en algún momento
gracias por compartirlo 😀

Visita mi blog ♥ 穛 S4Ku SEK4i®

Responder
    Gabriela Laya:

    Hola Sakuya Aikawa: pues puedes empezar hacer tutoriales, siempre es bueno ayudar a los demás 🙂

    Responder
Lecturas de Annie:

Hola!
Es que parece mentira, pero siempre que necesito algo de Blogger lo encuentro acá♥
Un beso

Responder
    Gabriela Laya:

    Hola Lecturas de Annie: jajaja y las cosas que faltan por explicar 🙂

    Responder
Celia | Miles de Libros:

¡Hola, hola!

Otra entrada suuuper interesante. Para las negadas que no sabemos nada de HTML los tutoriales en formato vídeo nos vienen de perlas.

¡Mil gracias por compartir tu conocimiento!

Mil besos,
Celia | 1000 LIBROS blog.

Responder
    Gabriela Laya:

    Hola Celia | Miles de Libros: Así es, para que no se quejen, les explico tanto en el escrito como en vídeo, no hay excusa XD

    Responder
Yomi MR:

Holaa, me ha encantado este aporte, creo que nunca uso listas porque no me gustan las viñetas de cajón, a ver si pongo en práctica el tutorial para que se vean bonitas mis listas *-* muchas gracias.
¡Besos! :3

Responder
    Gabriela Laya:

    Hola Yomi MR: ¿viñetas de cajón? cuando quieres puedes personalizarlas 🙂

    Responder
Blanca:

Hola, holaaaaaaaaaaaaaa ^-^

¿Y que haría yo sin tus trucos? Nada. Ya te lo digo jajajajaja

¡SE MUUUUUUUUUUUUUUY FELIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIZ!

Responder
    Gabriela Laya:

    Hola Blanca: jajaja Gracias guapa 🙂

    Responder
Joanna:

Gracias por compartir, guapa.

Besos

Responder
    Gabriela Laya:

    Hola Joanna: De nada 😜

    Responder
Pasando Página Blog:

¡Hola, Gabriela!

Súper a tiempo, mañana publico favoritos del mes y usé viñetas pero me maté buscando imágenes para que fueran diferentes a las de la plantilla, a ver si logro editarlo bien ahorita, muchas gracias por compartir y buen inicio de semana, ¡abrazos! ❤

Responder
    Gabriela Laya:

    Hola Pasando Página Blog: Espero que no tengas ningún problema, cualquier cosa me avisas 🙂

    Responder
marigem:

Hola.
Qué interesante y bien explicado. No sabía que se podía hacer esto.
Muchas gracias y feliz martes.

Responder
    Gabriela Laya:

    Hola Marigem, lo que se aprende por aquí 😀

    Responder
Asunción Artal:

Una entrada tan útil como todas la tuyas, gracias

Responder
    Gabriela Laya:

    Hola Asunción Artal, Muchas gracias 🙂

    Responder
El desvan de vicensi:

Muy buenas tus lecciones Gabriela, otra más que pondre en practica. Un beso y feliz tarde 🌈🌈🌈

Responder
    Gabriela Laya:

    Hola El desvan de vicensi, De nada Guapa

    Responder
Rocío:

Está genial, así personalizamos y lo ponemos a nuestro gusto.
Un abrazo.

Responder
    Gabriela Laya:

    Hola Rocío, personalizarlo y tenerlo lindo XD

    Responder
Miss Bridgerton:

Hola,
Gracias por una información tan completa.
Besos desde Promesas de Amor, nos leemos.

Responder
    Gabriela Laya:

    Hola Miss Bridgerton, Gracias por tu visita 🙂

    Responder
Kat:

Hola linda! Las listas son otro elemento más para que todo se vea mejor organizado dentro del post, pero no se me habría ocurrido personalizarlas. Antes también personalizaba todo pero ahora me he relajado un poco, ya no tengo tanto tiempo para dedicarle al blog jaja. Me encanta como se ven los ejemplos, no sabría por cual decantarme! Besos ^^

Responder
    Gabriela Laya:

    Hola Kat, entiendo a mi me suele gustar personalizar todo, aunque se suelen quedar así por mucho tiempo.

    Responder
FlordeCereza:

Hola, quien no conozca esto le servirá de ayuda, yo lo aprendí hace mucho tiempo.

Besos desde Promesas de Amor, nos leemos.

Responder
    Gabriela Laya:

    Hola FlordeCereza, ¡así es! siempre es bueno ayudar a los demás 🙂

    Responder
Ailina entre libros:

¡Hola, bonita!
Espero que estés bien.
Hacía tiempo que no te leía, pero me encanta esta entrada. Me llevo todo anotado, porque siempre es de utillidad.
¡Muchas gracias!
Un abrazo.

Responder
    Gabriela Laya:

    Hola Ailina entre libros, Tiempo sin verte por estos lares 😀

    Responder
Espe:

Me encanta hacer listas, pero no sabía que se podía poner diferentes colores y dibujos.
Gracias por el tutorial. Besos

Responder
    Gabriela Laya:

    Hola Espe, para que veas que si se puede 😀

    Responder
Elrincondemonica05:

Hola guapa, me ha gustado y me ha resultado muy interesante tu post sobre las viñetas, yo tengo que animarme e ir cambiando cosas del blog e ir haciendolo más atractivo. Muchas gracias por tus sabios consejos. Besitosss

Responder
    Gabriela Laya:

    Hola Elrincondemonica05, Tranquila tampoco es que sea obligatorio, pero si es bueno tener un lugar agradable para ti y para los visitantes.

    Responder
Mava (Marianna 2.0):

Hola Gaby,
como siempre, excelente tutorial, perfecta la explicación y fácil de seguir.
Un millón de gracias por la clase, la tendré en cuenta a la hora de utilizar una lista en mi blog;)
Un besote, nos leemos.

Responder
    Gabriela Laya:

    Hola Mava (Marianna 2.0), que genial que lo entendieras, cualquier duda estaré por aquí

    Responder
JLO:

las uso poco las listas porque la verdad me quedaban mal y a veces no sabía agregarles cosas… ahora entendí un poco mejor todo…

cuando tenga dudas y haga una ya se que tengo que pasar por acá primero ja… gracias!!! saludos

Responder
    Gabriela Laya:

    Hola JLO: Ahora tienes mucha opción para usarlas como viñetas en tu lista, cualquier duda estaré por aquí.

    Responder