Blogger: Etiquetas en dos columnas. 3 variaciones | Oloblogger Hace tiempo que coloqué las etiquetas de este blog dispuestas en dos columnas y como ya varios me pr...

18 de diciembre de 2012

Blogger: Etiquetas en dos columnas. 3 variaciones

Hace tiempo que coloqué las etiquetas de este blog dispuestas en dos columnas y como ya varios me preguntaron al respecto y por fin pude hacer algo de tiempo*, llegó el momento de explicar cómo se puede hacer esto.

La base de todo es conocer que el selector que Blogger inserta automáticamente al añadir un gadget de etiquetas tipo lista (no nube) y que nos sirve para controlar la apariencia de este artilugio, es list-label-widget-content.

A partir de aquí todo se reduce a ir añadiendo declaraciones (propiedad+valor) a esa clase y a los elementos que de ella cuelgan, que no son más que elementos de lista, ul y li.



La primera opción es la más sencilla y requiere sólo del uso de las propiedades CSS3 column-count y column-gap.

Con la primera se puede indicar el número de columnas en que deseamos dividir una caja y el segundo simplemente indica la separación entre ellas. Como habitualmente esto irá en la barra lateral que por lo general no andará sobrada de espacio, he metido la demo en una caja de 300px para descubrir posibles pegas con etiquetas largas.



.list-label-widget-content ul {
width: 100%;
margin: 0;
padding: 0;
font-size: 14px;
line-height:14px;
-moz-column-count: 2; -moz-column-gap: 10px;
-webkit-column-count: 2; -webkit-column-gap: 10px;
column-count: 2; column-gap: 10px;
}
.list-label-widget-content li a {
display: block;
margin: 0;
padding: 2px;
color: black;
}
.list-label-widget-content li a:hover {
background-color: grey;
color: white;
text-decoration: none;
}
.list-label-widget-content li span {
background-color: #ccc;
}

Ninguno de los códigos de hoy tiene ningún misterio, pero este es especialmente sencillo. ul hace de contenedor general y por eso ahí marcamos el ancho ocupando todo el disponible, eliminamos márgenes y fijamos el tamaño de la fuente y el alto de línea.

También es dónde usaremos column indicando que vamos a necesitar dos huecos y que la separación entre ellos deberá ser de 10px.

Luego sólo añadimos estilo básico para los enlaces y un fondo para resaltar aquellos sobre los que pasemos el puntero (hover).

Lo de la última línea es una pequeña chulería aprovechando que cuando estamos en la página de una determinada etiqueta su enlace deja de ser tal y además en el código aparece entre span. En este caso la etiqueta en cuestión saldrá directamente marcada con fondo gris. En este blog de pruebas podéis ver a qué me refiero. Fijaros que estamos en la página de las entradas con etiqueta "Lewis Carroll".



Observaréis que column se incluye con algunos prefijos para aumentar la compatibilidad con los distintos navegadores, lo que ya os hará intuir que esto no va a funcionar bien en bastantes navegadores y sobre todo en uno de nuestros favoritos: el innombrable.

Y para eso está esta segunda variante con algo más de código pero que funciona hasta en IE (¡ups! lo dije).



.list-label-widget-content ul {
width:100%;
margin:0;
padding: 0;
font-size: 14px;
line-height:14px;
}
.list-label-widget-content li {
width: 48%;
height: 22px;
overflow: hidden;
line-height: 22px;
display: inline-block;
zoom: 1;
*display: inline;
margin: 0;
padding: 0;
text-align: left;
}
.list-label-widget-content li a {
display: block;
overflow: hidden;
margin: 0;
padding: 2px;
color: black;
}
.list-label-widget-content li a:hover {
background-color: grey;
color: white;
text-decoration: none;
}
.list-label-widget-content li span:before {
content:"*";
}

Aquí el truquillo está en usar un ancho del 48% para cada elemento de lista (li que unido a esos inline-block en distintas variantes para mejorar la compatibilidad, harán que se formen dos columnas. Nótese que el segundo enlace aparece ahora a la derecha y no debajo del primero, pues no son dos columnas propiamente dichas.

Además, para que todas las etiquetas sean de la longitud que sean, nos queden en una sola línea, hemos echado mano de overflow:hidden.

También hemos variado un poco la chulería de antes y lo que hacemos ahora es añadir un asterisco mediante content, delante de la etiqueta cuya página estamos visualizando. Pero ojo que esto tampoco se verá en IE (o quizás sí; ya no sé).



En esta última variante sólo incorporamos un :nth-of-type para poder distinguir pares de impares y así alinear los enlaces de la izquierda a la derecha y viceversa. De esta manera todos quedarán pegados al centro y además podremos añadir una línea divisoria con border-left en los pares.



.list-label-widget-content ul {
width:100%;
margin:0;
padding:0;
font-size: 14px;
line-height:14px;}
.list-label-widget-content li {
width: 48%;
height:22px;
overflow:hidden;
line-height: 22px;
display: inline-block;
zoom: 1;
*display: inline;
margin: 0;
padding: 0;
text-align: right;
}
.list-label-widget-content li a {
display: block;
overflow: hidden;
margin: 0;
padding: 2px;
color: black;
}
.list-label-widget-content li a:hover {
background-color: grey;
color: white;
text-decoration: none;
}
.list-label-widget-content li:nth-of-type(2n) {
border-left: 1px dotted #666;
padding-left: 3px;
text-align:left;
}
.list-label-widget-content li span {
padding: 2px;
background-color: #ccc;
}


Se podrían añadir otros efectos para el hover que combinados con transition darían lugar a lo que veis hoy día aquí, pero eso ya lo dejo para que os entretengáis vosotros.


(*) Sería fantástico si literalmente se pudiera hacer tiempo. Es una frase hecha, aclarado queda.

¿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

34 comentarios :

  1. Interesante de lo más y en cuanto a la frase hecha, gracias por aclararlo, ya te iba a mandar un privado pidiendo presupuesto de un fin de semana de libre disposición ;)
    Saludos Oloman.

    ResponderEliminar
    Respuestas
    1. Saludos y a estas alturas... también felices fiestas ;)

      Eliminar
  2. Wow este tipo de etiqueta lo vi en otro blog y no es muy comun, y no te imaginas cuanto trate de encontrar el tutorial!
    Entre aqui por un enlace que vi que compartio Karla Castañeda en Google +
    y bueno de una me encanto tu blog y me parecio muy interesante y de gran ayuda!
    Ya me sume a tus seguidores como MarG.

    ResponderEliminar
    Respuestas
    1. Una cosa mas como se hace para poner el efecto hover que tienes aqui o algo similar, esta muy lindo y me gustaria ponerlo en mi blog.
      Pero no se como se hace!
      Podrias ayudarme???
      Mil gracias y Feliz Navidad :)

      Eliminar
  3. Una pregunta, donde se instala este tipo de codigo?
    en un gadget o en el codigo directamente, me podrias ayudar! Gracias

    ResponderEliminar
    Respuestas
    1. Todo eso es CSS y por tanto hay que añadirlo entre las etiquetas SKIN de tu plantilla. Un saludo.

      Eliminar
  4. Me ha quedado genial, aunque no esperaba las lineas debajo de cada etiqueta, me encanta el resultado.
    Por otro lado quiero preguntarte algo más que no está relacionado con labels sino con la indexacion. Cambié mi blogspot al .com y me gustaria saber si tengo que indexar ambos en google webmasters o solo el .com, y si al perder el pagerank el descenso de visitas es algo normal.
    Hace un tiempito vi tu conferencia con google, felicidades, no creo que haya nada que te llene más de ilusión y ganas de seguir que eso.

    ResponderEliminar
    Respuestas
    1. Bueno, pues como vi una etiqueta muy larga que no me gustó mucho, prueba a añadir a este selector un line-height como el que puse aquí al final:
      .list-label-widget-content li a {
      display: block;
      overflow: hidden;
      margin: 0;
      padding: 2px;
      color: black;
      line-height: 30px !important;
      }

      Sobre lo del dominio, a partir de ahora sólo tienes que preocuparte de que se indexe bien el .com.

      Y sí, el descenso de visitas es normal durante un tiempo. Piensa que para Google esa dirección es nueva del todo y empiezas de cero. Aunque tranquilo/a, recuperarás tu anterior posición mucho antes de lo que tardaste en lograrla cuando inauguraste el blog ;)

      Y gracias por el último comentario. Sí que es verdad que me gusta mucho esto pero no sabía que se me notaba tanto :)

      Eliminar
  5. GENIAL!!!
    Estaba apunto de cambiar todas las etiquetas de esa seccion y con uas simples lineas mágicas que me has dado, está solucionado.
    Como bien dijiste con la indexacion y el tiempo las visitas vuelven a llegar. Gracias por todo oloman.

    ResponderEliminar
  6. Oloman una pregunta, como puedo lograr el efecto que tu tienes en tu blog, me encantaria poder tener ese estilo pero claro con otros colores. Gracias

    ResponderEliminar
    Respuestas
    1. Pues como comentaba al final del post sería añadiendo cosas al hover: un border-radius y la propiedad transition asociada al background.

      Eliminar
  7. Hola Oloman, me ha causado curiosidad el como has partido en 2 columnas cuando pinchas en cualquier etiqueta del menú superior izquierdo...

    Me refiero a la siguiente página, donde tienes 2 columnas con el título solamente. Intento solamente en un blog conseguir que las entradas que aparezcan al pulsar en cualquier etiqueta se puedan dividir en columnas para ocupar menos sitio. (Lo de solo los títulos ya lo conseguí).

    Gracias de antemano por tu ayuda.

    ResponderEliminar
    Respuestas
    1. Me costó entender a qué te referías pero ya me di cuenta.

      Para eso tienes que hacer varias cosas. Lo primero sería esto: Desagrupar por fechas. Después... bueno, me acabo de dar cuenta de que esto es complicado explicarlo en un comentario, así que perdona por dejarte a medias pero a ver si mejor redacto un post para explicarlo completo cuando tenga un rato :)

      Eliminar
    2. Sí, es que no era fácil de explicar jeje. Vale pués quedo a la espera ya que me interesa que las entradas mostrándose sólo el título estén en varias columnas y no todo en una... Es para hacer una blog tipo base de datos y habrán muchas palabras donde realizar click.

      Saludos y gracias :)

      Eliminar
  8. Gracias! Para que funcione és preciso que la medida da sidebar seja 300px ou mas? Abraço de Brazil.

    ResponderEliminar
    Respuestas
    1. Podría ser más estrecha. Lo único es que si usas etiquetas largas, probablemente se verían en dos líneas

      Eliminar
  9. Saludos,
    Como puedo reducir el ancho de la columna derecha de mi gadget en la pantilla blogger store? Gracias por la ayuda.http://dayaedfashion.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Contestado en el otro comentario que dejaste en uno de los posts que hablan sobre esa plantilla.

      Eliminar
  10. Hola, no entiendo muy bien el código; dónde se inserta dentro del HTML? ya lo intenté de varias manera y no me queda.
    GRACIAS

    ResponderEliminar
    Respuestas
    1. Todo eso es CSS no HTML y por tanto va en la hoja de estilo de tu blog, que en el caso de Blogger es entre las etiquetas SKIN de la plantilla.

      Eliminar
    2. Pues no le entiendo, buscaré otro tutorial donde sea un poco más específico. Aún así gracias, he aplicado algunos de tus consejos a mi página: http://ergofelixculpa.blogspot.mx/

      Saludos

      Eliminar
    3. Básico: HTML y CSS
      Con más detalle: Ver el apartado Dónde va el CSS

      Eliminar
  11. Hola Oloman, añadi el css en la plantilla, en avanzado/añadir css pero no se aplica nada al blog, osea que sigue en formato lista... igual tengo que hacer algo mas?

    ResponderEliminar
  12. Hola otra vez, y perdon por ser taan molesta. He conseguido las dos columnas, lo que hice fue añadir el codigo dentro de un <*style> dir{ aqui todo el codigo y termine con < */style> y lo coleque sobre <*/head> (puse los * para poder postear, pa los que lean después, esos no van eh)
    He trasteado con el codigo desde mi anterior comentario hasta ahora y casi lo tengo bien, lo que no consigo es que desaparezcan esas lineas, como con borde, y e intentado que queden las dos columnas con el texto pegado a la linea central... pero no quieren, lo que si pude hacerlo es cuando esta dentro de la etiqueta.
    Mira como me quedo http://bibliotekales.blogspot.com.es/
    igual puedes ver mis errores. Gracias de antemano

    ResponderEliminar
  13. Deberías quitar todos los BORDER que pusiste en las clases de ese gadget y además, pera que un borde genérico que tu plantilla añade a las litas en la barra lateral, no se ejecute, también tendrías que añadir esto:
    .list-label-widget-content ul li {
    border: 0;
    }

    Y para lo otro, busca esta clase .list-label-widget-content li a y quítale el text-align:center; Con eso te saldrán los enlaces alineados pegados a la línea central.

    ResponderEliminar
  14. gracias oloman, ahora mismo pruevo

    ResponderEliminar
  15. Quisiera saber como poner la caja de comentarios que usan?

    ResponderEliminar
    Respuestas
    1. Es la que viene de serie con Blogger para comentarios anidados y sólo hay que marcar una opción en el Escritorio que se llama algo así como "Comentarios incrustados debajo de las entradas".

      Eliminar
  16. hola!!!
    me gustaría hacerte una consulta.
    Recientemente he añadido las etiquetas en dos columnas, y otro elemento más a mi blog : http://www.trokymu.com/

    Al poner mas entradas en la página principal de las que ahora tengo, o si entro en alguna etiqueta y hay mas de 4 post, me modifica el cuerpo de las entradas, y si quito el trozo de código que tome de este post para las dos columnas esto se elimina.
    Esto solo ocurre en chrome. Tanto en IE, firefox, safari, y en opera no me pasa; lo he mirado desde mi portatil, que es un mac, y desde mi sobremesa que es un win7.


    Puedes ayudarme por favor?
    Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Pienso que algo más estás cambiando, porque he probado a quitar en tu página todo este código que añadiste y sigue dando el mismo problema. Quizás es que pones algún ; de más o de menos. Simplemente eso afectaría al resto del CSS.

      Eliminar
  17. Hola!!!
    Tengo agregado este gadet en mi otro blog y me funciona perfectamente,sin embargo he intentado agregarlo a este otro http://beautyasturias.blogspot.com.es/ y no consigo que funcione :S y no se porque, podrías decirme que es lo que he hecho mal? gracias un saludo

    ResponderEliminar
    Respuestas
    1. No hay nada como demorarme en contestaros (no ha sido adrede), para que encontréis los errores vosotros solos ¿cierto? :)

      Eliminar