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!
Sigueme en: Youtube Instagram Blogger Pinterest
Video Tutorial de las listas con viñetas en tu Blog
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.
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.
Haciendo enter podrás seguir añadiendo más texto a tu lista.
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);
/* 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
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.
Puede que también te interese:
Gabriela Laya
Me gusta mucho el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs. En mi tiempo libre me encanta Leer, aprender a usar nuevos programas, escuchar música y más :D48 comentarios
Pasando Página Blog:
26 junio 2020 a las 20:17
¡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!
Gabriela Laya:
29 junio 2020 a las 17:34
Hola Pasando Página Blog: ostia que bueno que tenias la copia, lo tendré en cuenta cuando me meta con el código 🙂
Citu:
26 junio 2020 a las 20:34
Gracias por el tutorial es muy claro. Buen fin de semana
Gabriela Laya:
29 junio 2020 a las 17:34
Hola Citu: Muchas gracias 🙂
Maria Eugenia ARIAS LOZANO:
26 junio 2020 a las 23:52
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!!
Gabriela Laya:
29 junio 2020 a las 17:35
Hola Maria Eugenia: bueno ya vez que se pueden hacer muchas cositas en Blogger
Serena Miles:
27 junio 2020 a las 05:46
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
Gabriela Laya:
29 junio 2020 a las 17:36
Hola Serena Miles: que genial, espero que no tengas problemas 🙂
Nayade:
27 junio 2020 a las 17:24
Woooo
Fijo que lo pongo a prueba porque me parece super útil
Muchas gracias por compartirlo
Besos ♥
— – El Mundo de Naya – –
Gabriela Laya:
29 junio 2020 a las 17:36
Hola Nayade: me alegro que te gustara 😀
Sakuya Aikawa:
28 junio 2020 a las 03:15
(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧ 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®
Gabriela Laya:
29 junio 2020 a las 17:37
Hola Sakuya Aikawa: pues puedes empezar hacer tutoriales, siempre es bueno ayudar a los demás 🙂
Lecturas de Annie:
28 junio 2020 a las 11:34
Hola!
Es que parece mentira, pero siempre que necesito algo de Blogger lo encuentro acá♥
Un beso
Gabriela Laya:
29 junio 2020 a las 17:38
Hola Lecturas de Annie: jajaja y las cosas que faltan por explicar 🙂
Celia | Miles de Libros:
28 junio 2020 a las 11:39
¡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.
Gabriela Laya:
29 junio 2020 a las 17:39
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
Yomi MR:
29 junio 2020 a las 00:04
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
Gabriela Laya:
29 junio 2020 a las 17:41
Hola Yomi MR: ¿viñetas de cajón? cuando quieres puedes personalizarlas 🙂
Blanca:
29 junio 2020 a las 10:04
Hola, holaaaaaaaaaaaaaa ^-^
¿Y que haría yo sin tus trucos? Nada. Ya te lo digo jajajajaja
¡SE MUUUUUUUUUUUUUUY FELIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIZ!
Gabriela Laya:
29 junio 2020 a las 17:41
Hola Blanca: jajaja Gracias guapa 🙂
Joanna:
29 junio 2020 a las 10:47
Gracias por compartir, guapa.
Besos
Gabriela Laya:
29 junio 2020 a las 17:42
Hola Joanna: De nada 😜
Pasando Página Blog:
29 junio 2020 a las 12:23
¡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! ❤
Gabriela Laya:
29 junio 2020 a las 17:43
Hola Pasando Página Blog: Espero que no tengas ningún problema, cualquier cosa me avisas 🙂
marigem:
30 junio 2020 a las 03:22
Hola.
Qué interesante y bien explicado. No sabía que se podía hacer esto.
Muchas gracias y feliz martes.
Gabriela Laya:
14 julio 2020 a las 18:02
Hola Marigem, lo que se aprende por aquí 😀
Asunción Artal:
30 junio 2020 a las 07:24
Una entrada tan útil como todas la tuyas, gracias
Gabriela Laya:
14 julio 2020 a las 17:53
Hola Asunción Artal, Muchas gracias 🙂
El desvan de vicensi:
30 junio 2020 a las 11:16
Muy buenas tus lecciones Gabriela, otra más que pondre en practica. Un beso y feliz tarde 🌈🌈🌈
Gabriela Laya:
14 julio 2020 a las 17:53
Hola El desvan de vicensi, De nada Guapa
Rocío:
30 junio 2020 a las 12:26
Está genial, así personalizamos y lo ponemos a nuestro gusto.
Un abrazo.
Gabriela Laya:
14 julio 2020 a las 17:49
Hola Rocío, personalizarlo y tenerlo lindo XD
Miss Bridgerton:
30 junio 2020 a las 14:19
Hola,
Gracias por una información tan completa.
Besos desde Promesas de Amor, nos leemos.
Gabriela Laya:
14 julio 2020 a las 17:44
Hola Miss Bridgerton, Gracias por tu visita 🙂
Kat:
1 julio 2020 a las 12:19
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 ^^
Gabriela Laya:
13 julio 2020 a las 21:43
Hola Kat, entiendo a mi me suele gustar personalizar todo, aunque se suelen quedar así por mucho tiempo.
FlordeCereza:
1 julio 2020 a las 15:01
Hola, quien no conozca esto le servirá de ayuda, yo lo aprendí hace mucho tiempo.
Besos desde Promesas de Amor, nos leemos.
Gabriela Laya:
13 julio 2020 a las 21:37
Hola FlordeCereza, ¡así es! siempre es bueno ayudar a los demás 🙂
Ailina entre libros:
2 julio 2020 a las 06:55
¡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.
Gabriela Laya:
13 julio 2020 a las 21:30
Hola Ailina entre libros, Tiempo sin verte por estos lares 😀
Espe:
2 julio 2020 a las 07:08
Me encanta hacer listas, pero no sabía que se podía poner diferentes colores y dibujos.
Gracias por el tutorial. Besos
Gabriela Laya:
13 julio 2020 a las 21:24
Hola Espe, para que veas que si se puede 😀
Elrincondemonica05:
2 julio 2020 a las 11:46
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
Gabriela Laya:
13 julio 2020 a las 17:56
Hola Elrincondemonica05, Tranquila tampoco es que sea obligatorio, pero si es bueno tener un lugar agradable para ti y para los visitantes.
Mava (Marianna 2.0):
3 julio 2020 a las 21:09
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.
Gabriela Laya:
13 julio 2020 a las 17:43
Hola Mava (Marianna 2.0), que genial que lo entendieras, cualquier duda estaré por aquí
JLO:
9 julio 2020 a las 01:25
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
Gabriela Laya:
13 julio 2020 a las 17:19
Hola JLO: Ahora tienes mucha opción para usarlas como viñetas en tu lista, cualquier duda estaré por aquí.
Deja un comentario