Algo de formato para listas

Una lista se forma con HTML de la siguiente manera:

<ul>
<li>Elemento1</li>
<li>Elemento2</li>
<li>Elemento3</li>
</ul>

UL y su cierre marcan el principio y el final de la lista, mientras que las etiquetas LI delimitan cada uno de sus elementos. Sabiendo esto, para darle estilo a una lista, es suficiente con crear las clases oportunas y luego aplicarlas a la parte HTML.

En Blogger, el estilo (CSS) va antes de ]]></b:skin> y ahí es dónde tendremos que insertar la nueva clase y tenerla preparada para cuando nos haga falta:

.listas ul {
list-style-type:circ;
list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihjgAnDT6wFf6XyUkKBabzEIT4kjnyEY7YMHAR4DLI5n4SnRtjBv1IzI44RQerp73rWWffYkg9wlrM9lr9BZVwFBnZKU5VoYe9xru3_9DQXREv2V_iIzKJbNuldJuDeXxSXfINPMchzbI/s400/icon_arrow.gif);
}

Luego, allá dónde tenemos la lista, simplemente la "encerramos" en un DIV con la clase definida:

<div class='listas'>
<ul>
<li>Elemento1</li>
<li>Elemento2</li>
<li>Elemento3</li>
</ul>
</div>

El resultado:

• Elemento1
• Elemento2
• Elemento3

LIST-STYLE-IMAGE tiene prioridad sobre LIST-STYLE-TYPE, por lo que en este caso, se verá la imagen en lugar del circulito. Poner ambos es por tanto redundante, pero ¿qué pasa si no se carga nuestra flecha o lo que sea? Pues que entonces se vería el círculo y no se estropearía tanto el diseño, como sí pasaría en el caso de que no hubiéramos puesto ambos. Sólo por este motivo y también porque no cuesta mucho trabajo, yo siempre pondría ambos.

Otra forma de colocar cualquier dibujo en una lista, es anulando el símbolo por defecto y utilizando un imagen como fondo de cada elemento. No hay que olvidar, que luego habrá que ponerle la clase a la parte HTML de la lista mediante un DIV, tal y como hemos hecho en el ejemplo anterior. En este caso el estilo sería:

.listas2 ul {
list-style-type:none;
}
.listas2 ul li {
padding-left:16px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_SHlKWwIukZpuujwGEq0knqSVmxDPqZ5Y8mwX8I7xYMYqv3o1_13fpOhcoOV87oLCkmnSMqVAE1Sd787TbXBuBrw9gg8pzrdVQ7uZXuLHL7JEPu4KtGIZBmm2tnqrYs-zcNhT68ID_2g/s400/play.gif) no-repeat left bottom;
}

• Elemento1
• Elemento2
• Elemento3

Parece lo mismo, pero no lo es. Aunque el resultado final hace que lo parezca, antes el símbolo de la lista no formaba parte del elemento LI, pero con esta última forma de crearlo, sí. Esto nos permitirá para el caso de enlaces, darle un poco de interactividad con el uso de HOVER. Colocamos un dibujo y un color para los enlaces y otros distintos para el HOVER. Veámoslo:

.listas3 ul {
list-style-type:none;
}
.listas3 ul li {}
.listas3 ul li a {
text-decoration:none; color:#990000;
padding-left:18px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxP4BSNRSmrltX34QG-iaknZmVzynv6hliZ9_Dx0vdJhZLsUu4XqSYX1KzBTMooVA0zUeQ9ZgAZZGMyn_NR-LRtGAxfQKM3mfipdq_avsDr9bm2hzoaHsV4Nyn-uSoEGoXphiG-NCwqkc/s400/cruz1.jpg) no-repeat 0px 0px;
}
.listas3 ul li a:hover {
text-decoration:none; color: #666666;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-rjA9u7txRpLXVBhlMaFeWlfayIs62TsGKplzhE8iTR_aGupF2ae2EKfluUp6gA95EGq39T8F-dIf8CQRkF0f9BgxkgKzXg53Gey2zYTieNkyXJ9o_NEk90hzPF97x1He-zFCDmeJEak/s400/cruz2.jpg) no-repeat 0px 0px;
}

• Elemento1
• Elemento2
• Elemento3

Conseguir un color de fondo para el HOVER del enlace no es complicado, pero sólo se destacaría la parte que ocupa el texto. Lo habitual es que no tengan la misma longitud, por lo que el resultado sería este.

• Elemento corto
• Elemento algo más largo
• Elemento

Esto resulta como mínimo "extraño" y para solucionarlo, haremos que todos los LI (símbolo + enlace) tengan el mismo tamaño incluyendo un WIDTH y haciéndolo comportarse como un bloque (BLOCK). Si además completamos el PADDING y reposicionamos un poco las imágenes del BACKGROUND...

.listas4 ul {
list-style-type:none;
}
.listas4 ul li {}
.listas4 ul li a {
width:230px; display:block;
text-decoration:none;
color:#990000;
padding:2px 5px 2px 30px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxP4BSNRSmrltX34QG-iaknZmVzynv6hliZ9_Dx0vdJhZLsUu4XqSYX1KzBTMooVA0zUeQ9ZgAZZGMyn_NR-LRtGAxfQKM3mfipdq_avsDr9bm2hzoaHsV4Nyn-uSoEGoXphiG-NCwqkc/s400/cruz1.jpg) no-repeat 4px 4px transparent;
}
.listas4 ul li a:hover {
text-decoration:none;
color: #ffffff; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-rjA9u7txRpLXVBhlMaFeWlfayIs62TsGKplzhE8iTR_aGupF2ae2EKfluUp6gA95EGq39T8F-dIf8CQRkF0f9BgxkgKzXg53Gey2zYTieNkyXJ9o_NEk90hzPF97x1He-zFCDmeJEak/s400/cruz2.jpg) no-repeat 4px 4px #990000;
}

...para obtener algo como esto...

• Elemento corto
• Elemento algo más largo
• Elemento

¿Que tal si ahora probais a crear una clase para personalizar vuestra listas de categorías? En este caso tras crear la clase, como la parte HTML de la lista de las etiquetas ya se genera al instalar el gadget correspondiente, sólo habrá que localizar el sitio oportuno para colocar nuestro DIV con la clase creada. Este es en Blogger el principio del código del gadget de etiquetas y en verde está lo único que sería necesario insertar en esta parte:

<b:widget id='Label2' locked='false' title='Hover en listas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>

<div class='listas4'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
</div>

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter