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
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.
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>
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.
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.
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.
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 */
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.
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 😊
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.
Gabriela Laya
Me gusta el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs.