Blogger, Tutoriales

Blogger: Cómo dividir el widget de etiquetas en dos columnas

Publicado por Claudia en Noviembre 10, 2009

Etiquetas-BloggerCuando tienes muchas etiquetas y una barra lateral lo suficientemente ancha, siempre tienes la opción de dividir el widget de etiquetas en dos o más, por una cosa de orden y estética.

Hace un tiempo, Cebong mostraba una forma de crear un widget de etiquetas multicolumnas añadiendo una nueva sección en el footer o la sidebar.

En realidad, es mucho más simple de lo que parece: no es otra cosa que determinar anchos (%) para las listas de esa sección. En otras palabras, puedes hacer lo mismo si ya añadiste un widget de etiquetas a tu sidebar, pero con un código CSS simplificado a ser añadido antes de ]]></b:skin>:

#Label1 ul li{
float: left;
width: 45%;
}

A considerar:

  • El ancho (width) va a depender de cuántas columnas quiera incluir, y no siempre es exacto, porque el widget de etiquetas va a heredar el padding de las listas de la sidebar (.sidebar ul li o similar). En este caso, 45% está bien para dos columnas; para 3 columnas, quizá ande bien con 30 ó 33%.
  • El selector #Label1, puede variar. Por defecto, el widget de etiquetas (si tienes sólo uno), debiera ser Label1; pero, si tienes dos, tendrías un widget de ID Label1, y otro Label2.
  • Puedes dividir cualquier widget de lista (ejemplo, lista de enlaces) de la misma forma, averiguando su ID.

sidebar-blogger

Posts relacionados

Tags: , , Wikio

17 Comentarios

Noviembre 10, 2009

Información Bitacoras.com…

Valora en Bitacoras.com: Cuando tienes muchas etiquetas y una barra lateral lo suficientemente ancha, siempre tienes la opción de dividir el widget de etiquetas en dos o más, por una cosa de orden y estética. Hace un tiempo, Cebong mostraba una forma…..

Noviembre 11, 2009

Tengo 2 sitios y solo funciono en 1 pero igual se agradece

Noviembre 12, 2009

Hola Claudia!

Mucho gusto, esta muy bonito tu blog,

Felicidades!

No estoy segura por eso te pregunto:

¿Eres Claudia de Btemplates?

Si es así, muchas gracias por publicar mi plantilla Cuentos de noche

Bueno primero espero la confirmación…,

Gracias y que tengas un estupendo día!

Noviembre 20, 2009

que hay, un saludo, me han servido de mucho tus contenidos, y me intereso este tema, tengo una lista, no es de labels si no una manual, el problema esque solo me salen 6 lineas cuando son 11, pero las tengo en tabs, entonces no se si aun asi funcione, llevo mas de 2 horas intentando hacer que funcione, y aun no e logrado nada, el lugar si se reduce el 45% pero se queda en una sola linea. cuando enrealidad quisiera que se mostra como en dos secciones.. espero tu respuesta, o minimo un no para saber que no se puede hacer nada XD, saludos

Noviembre 21, 2009

Warez: No es que no funcione, es que tienes que ajustar el ancho (width).

Mario: No entiendo bien. Sería genial que dejaras la URL de tu blog en el campo correspondiente ;)

Noviembre 24, 2009

Hola. Gracias por tus instructivas entradas. Estoy tratando de hacer un blog con un diseño muy específico, y buscando he llegado hasta aquí.
El diseño que busco divide las entradas en columnas, de la siguiente manera:

PARTE IZQUIERDA:
Título
Autor
Fecha
Comentarios

PARTE DERECHA (a la misma altura o justo debajo del título, pero alineado con la parte de metadatos)

Texto de entrada

Mi problema es que en la plantilla html no logro separar la parte del título y metadatos y la del cuerpo de la entrada, y así no hay forma de entenderse con la flotación.

¿Me ayudarías? Si quieres te mando por correo el enlace a mi blog en pruebas.

Gracias por anticipado. Un saludo.

Noviembre 26, 2009

me gusta tu blog, saludos

Diciembre 21, 2009

Muchas gracias por tu idea. Funciona muy bien y es muy sencilla de implementar! ^_^

Enero 1, 2010

muy bueno el blog me a servido de algo, saludos y feliz 2010!!!

Enero 11, 2010

[...] [...]

Febrero 23, 2010

La división de dos secciones, pero quiero agregarle una imagen al li, y se me sale la división… que será…??

Febrero 23, 2010

Cómo lo estás haciendo, Ascesino?

Febrero 23, 2010

#label1 ul li { width: 45%; background: utl(miicono.png) no-repeat; padding-left: 18px; }

Por favor, ayudame! :)

Febrero 23, 2010

Perdón, envés de #label1 ppuse #Label1

jeje, ayudame :)
por sierto, tus tutoriales están buenos… jeje, podríamos intercambiar enlaces??

Febrero 23, 2010

perdón, al reves, jajaja, soy un desastre, jaja… sigo esperando tu respuesta :)

Febrero 23, 2010

Prueba disminuyendo el “width”, o con list-style-image:url(tu-imagen); ;)

Febrero 23, 2010

Muchas gracias! ya pude hacerlo, con el list-style-image:url(mi-imagen);
Eres una genia! ;)
En serio, muchas gracias ;)
Nos vemos, y te ganaste un lector! ;)

Deja tu comentario

Nombre (requerido)
Email (requerido)
Sitio web (opcional)