Algo de formato para listas | Oloblogger Una lista se forma con HTML de la siguiente manera: <ul> <li>Elemento1</li> <li>Elemento2</li> <li>Eleme...

14 de enero de 2010

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;
}


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.



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...



¿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
Copy URL

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

follow us in feedly

20 comentarios :

  1. Muy claro !!...especial para novatas como yo!!
    Gracias!!!

    ResponderEliminar
  2. Muy buen tutorial Oloman y muy fácil de comprender como siempre Gracias por compartirlo

    saludos y suerte con tu blog :)

    ResponderEliminar
  3. Hola.. yo ya uso este sistema para mi lista de blog's amigos es muy util =)...
    Oloman nesecito de tu ayuda podrias entrar en mi borrador (http://borradorfeuer.blogspot.com/) - he ir a Diseño/Elementos de pagina.. donde esta la sidebar te daras cuenta que no dice añadir gadget y que muy arriva como la podria arreglar saludos y muchas gracias....

    ResponderEliminar
  4. Eligor, yo no tengo acceso a esa parte.

    ResponderEliminar
  5. Aps... ahora tienes permiso... =)
    intentalo de nuevo.. ^^

    ResponderEliminar
  6. Hola Oloman =) Muy interesante el tuto :D...Pero mira, me he estado preguntando...¿podría haber alguna manera de crear una versión de un blog pero en otro idioma? Quisiera también poner una versión en inglés...si no se puede no pasa nada, es algo que se le prendió a mi lamparita de repente XD

    ResponderEliminar
  7. Pudo ser algún problema pasajero de Blogger, Eligor, porque ahora mismo sí aparece.

    Serphinprincess, a mí también me gustaría editar este blog en inglés además de en castellano. Ya sabes, cuestiones de ampliar mercado :D El caso es que, además de la posibilidad de escribir los posts en ambos idiomas (un texto a continuación de otro, por ejemplo) no se me ocurre ninguna otra manera salvo duplicar las páginas. Esto sería publicar en español y luego otro post con alguna palabra adicional (EV, english version, por ejemplo) en el que se replicaría la entrada pero en inglés. En ese caso, yo añadiría a cada uno de los posts, un enlace al equivalente en el otro idioma (por ejemplo con un simple gráfico con la banderita).
    Otra solución similiar sería replicar el blog entero con otra dirección y allí traducir los artículos originales.

    ResponderEliminar
  8. Aps... es que yo mismo lo solucione, habia un margin-top:10 solo tuve que aumentarlo a 47 y listo! jeje saludos!!

    ResponderEliminar
  9. Una pregunta, te os fijaras en mi menu del blog (http://sagrada-oscuridad.blogspot.com/) - donde dice DVD/Videos al darle click dice que no hay ninguna entrada pero si te fijas en la primera entrada del blog tiene el mismo enlace de la etiqueta mm.. por que sera? :S

    Saludos y muchas gracias disculpa la molestia

    ResponderEliminar
  10. Me gusta lo de otra pagina pero que saliera en el otro idioma, a lo mejor lo pruebo =P. Gracias...

    ResponderEliminar
  11. Eligor, creo que ya lo has vuelto a arreglar antes de que yo lo viera, porque funciona perfectamente. Al pinchar en esa etiqueta se abre la página http://sagrada-oscuridad.blogspot.com/search/label/Tipo%3A%20DVD%2FVideos

    Seraphinprincess, lo hagas como lo hagas, lo de escribir en dos idiomas siempre es un trabajo extra, pero seguro que tendrá su recompensa.

    ResponderEliminar
  12. aps jeje Gracias igual :)

    ResponderEliminar
  13. Simplemnt mis respetos contigo colega que eres la ostia para estos temas html, tu blog tu mismo t lo hiciste? es decir eso del boton rojoo etc etc..

    ResponderEliminar
  14. Hola Arturuto. La plantilla es de otro, pero está muy adaptada, de manera que incluso respetando el formato original, he cambiado varias texturas y colores. Por otra parte, he incorporado muchos gráficos nuevos que me gustaban, así como estilo para las secciones y diversas utilidaes como la de los posts comprimidos (leer más). Y el botón... pues no es una idea muy original, pero ahí estamos :)

    ResponderEliminar
  15. Hola...

    Gracias por adelantado y muy bueno el diseño asi como el contenido.

    yo tengo el siguiente problema: ya tengo una plantilla que trae un menu css. Lo que necesito es poder darle la ruta para abitar tanto el boton Quienes somos como el de contacto. Soy nuevo en esto y me gustaria que me ayudaras.

    ResponderEliminar
  16. No puedo ver tu blog (en tu perfil no sale ninguno), pero en tu código tiene que venir algo así:

    <ul id='FORMATO_LISTA'>
    <li><a href='URL_INICIO'>Inicio</a></li>
    <li><a href='URL_CONTACTO'>Contacto</a></li>
    <li><a href='URL_ABOUT'>About</a></li>
    </ul>

    Dónde he puesto URL_xxxxxx es dónde tienes que poner la dirección que corresponda en cada caso.

    ResponderEliminar
  17. Gracias Oloman !!
    Muy buen tema.. aunque esta desde enero U.U
    mi pregunta es que si se puede poner diferentes icnonitos en una misma lista o.O ?
    gracias ! =)

    ResponderEliminar
  18. Sí, pero eso ya no es CSS. Tendrías que poner la parte HTML de la lista y luego en cada LI, con una etiqueta STYLE, añadir un BACKGROUND distinto manualmente.

    No entiendo mucho para que lo necesitas, porque en un principio, lo bonito de una lista es que sea homogénea en cuanto a aspecto. Supongo que tienes esa necesidad particular ;)

    ResponderEliminar
  19. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. ¿Aportas cosas y luegos las borras? Eso es una lástima :(

      Eliminar