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.