Blogger: Cómo dividir el widget de etiquetas en dos columnas
Publicado por Claudia en Noviembre 10, 2009
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 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.
Posts relacionados
Wikio
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 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.
17 Comentarios
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…..
Tengo 2 sitios y solo funciono en 1 pero igual se agradece
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!
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
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
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.
me gusta tu blog, saludos
Muchas gracias por tu idea. Funciona muy bien y es muy sencilla de implementar! ^_^
muy bueno el blog me a servido de algo, saludos y feliz 2010!!!
[...] [...]
La división de dos secciones, pero quiero agregarle una imagen al li, y se me sale la división… que será…??
Cómo lo estás haciendo, Ascesino?
#label1 ul li { width: 45%; background: utl(miicono.png) no-repeat; padding-left: 18px; }
Por favor, ayudame!
Perdón, envés de #label1 ppuse #Label1
jeje, ayudame
por sierto, tus tutoriales están buenos… jeje, podríamos intercambiar enlaces??
perdón, al reves, jajaja, soy un desastre, jaja… sigo esperando tu respuesta
Prueba disminuyendo el “width”, o con list-style-image:url(tu-imagen);
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!