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.
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.
Únete a la Zona VIP🔥
Descubre todo el contenido que te ofrece y ser parte de mi comunidad.
☑ Puede que también te interese:
Gabriela Laya
Me gusta el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs.
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!
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 🙂
Citu:
Gracias por el tutorial es muy claro. Buen fin de semana
Gabriela Laya:
Hola Citu: Muchas gracias 🙂
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!!
Gabriela Laya:
Hola Maria Eugenia: bueno ya vez que se pueden hacer muchas cositas en Blogger
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
Gabriela Laya:
Hola Serena Miles: que genial, espero que no tengas problemas 🙂
Nayade:
Woooo
Fijo que lo pongo a prueba porque me parece super útil
Muchas gracias por compartirlo
Besos ♥
— – El Mundo de Naya – –
Gabriela Laya:
Hola Nayade: me alegro que te gustara 😀
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®
Gabriela Laya:
Hola Sakuya Aikawa: pues puedes empezar hacer tutoriales, siempre es bueno ayudar a los demás 🙂
Lecturas de Annie:
Hola!
Es que parece mentira, pero siempre que necesito algo de Blogger lo encuentro acá♥
Un beso
Gabriela Laya:
Hola Lecturas de Annie: jajaja y las cosas que faltan por explicar 🙂
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.
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
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
Gabriela Laya:
Hola Yomi MR: ¿viñetas de cajón? cuando quieres puedes personalizarlas 🙂
Blanca:
Hola, holaaaaaaaaaaaaaa ^-^
¿Y que haría yo sin tus trucos? Nada. Ya te lo digo jajajajaja
¡SE MUUUUUUUUUUUUUUY FELIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIZ!
Gabriela Laya:
Hola Blanca: jajaja Gracias guapa 🙂
Joanna:
Gracias por compartir, guapa.
Besos
Gabriela Laya:
Hola Joanna: De nada 😜
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! ❤
Gabriela Laya:
Hola Pasando Página Blog: Espero que no tengas ningún problema, cualquier cosa me avisas 🙂
marigem:
Hola.
Qué interesante y bien explicado. No sabía que se podía hacer esto.
Muchas gracias y feliz martes.
Gabriela Laya:
Hola Marigem, lo que se aprende por aquí 😀
Asunción Artal:
Una entrada tan útil como todas la tuyas, gracias
Gabriela Laya:
Hola Asunción Artal, Muchas gracias 🙂
El desvan de vicensi:
Muy buenas tus lecciones Gabriela, otra más que pondre en practica. Un beso y feliz tarde 🌈🌈🌈
Gabriela Laya:
Hola El desvan de vicensi, De nada Guapa
Rocío:
Está genial, así personalizamos y lo ponemos a nuestro gusto.
Un abrazo.
Gabriela Laya:
Hola Rocío, personalizarlo y tenerlo lindo XD
Miss Bridgerton:
Hola,
Gracias por una información tan completa.
Besos desde Promesas de Amor, nos leemos.
Gabriela Laya:
Hola Miss Bridgerton, Gracias por tu visita 🙂
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 ^^
Gabriela Laya:
Hola Kat, entiendo a mi me suele gustar personalizar todo, aunque se suelen quedar así por mucho tiempo.
FlordeCereza:
Hola, quien no conozca esto le servirá de ayuda, yo lo aprendí hace mucho tiempo.
Besos desde Promesas de Amor, nos leemos.
Gabriela Laya:
Hola FlordeCereza, ¡así es! siempre es bueno ayudar a los demás 🙂
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.
Gabriela Laya:
Hola Ailina entre libros, Tiempo sin verte por estos lares 😀
Espe:
Me encanta hacer listas, pero no sabía que se podía poner diferentes colores y dibujos.
Gracias por el tutorial. Besos
Gabriela Laya:
Hola Espe, para que veas que si se puede 😀
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
Gabriela Laya:
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):
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:
Hola Mava (Marianna 2.0), que genial que lo entendieras, cualquier duda estaré por aquí
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
Gabriela Laya:
Hola JLO: Ahora tienes mucha opción para usarlas como viñetas en tu lista, cualquier duda estaré por aquí.
Deja un comentario