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

Blogger, Tutoriales 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

Compártelo!
31 Comentarios en Blogger: Cómo dividir el widget de etiquetas en dos columnas
  1. 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…..

  2. WarezNetwork dice:

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

  3. Karla dice:

    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!

  4. mariobp dice:

    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

  5. Claudia dice:

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

  6. Fer dice:

    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.

  7. nora dice:

    me gusta tu blog, saludos

  8. Daniel_84 dice:

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

  9. Alberto dice:

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

  10. Ascesino96 dice:

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

  11. Claudia dice:

    Cómo lo estás haciendo, Ascesino?

  12. Ascesino96 dice:

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

    Por favor, ayudame! :)

  13. Ascesino96 dice:

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

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

  14. Ascesino96 dice:

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

  15. Claudia dice:

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

  16. Ascesino96 dice:

    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! ;)

  17. Alfredo dice:

    Hola, bueno me aventure a utilizar las nuevas plantillas de blogger en Blogger in Draft y bueno quisiera saber si ya haz incursionado en ello y saber que te parece.

    No se si te Molesta.
    La parte donde escribo mi nombre, mail, sitio web (el cuadro) se ve poco y no sabia si escribirlo al lado derecho :P

    PD: Te E agregado en mi Facebook :)

  18. Mers dice:

    Mil gracias. Era lo que iba buscando, me ha quedado perfecto!! GRACIASSSSS….

  19. Masterred dice:

    hola, perfecto de esta manera se ahorra espacio en el sidebar, y una pregunta. Como se puede dar esa apariencia a las categorias como las de tu sitio?

    gracias

  20. Marta dice:

    Muchas gracias!!

  21. Odin Ko dice:

    Fantastico, me quedo genial para dividir las etiquetas de directores. Muchas gracias !!

  22. Nebel dice:

    Genial!… Yo buscando esta información en muchos blogs y la forma más simple se encontraba en mis marcadores LoL!!!

    En fin, me sirvió de mucho Claudia!!

    Saludos

  23. sewa mobil di surabaya dice:

    nice post

  24. Lourdes dice:

    Me gustaria saber si solo puedo tener dos columnas en la sidebar con el gatget de blogs que tengo enlazados. Muchas gracias.

  25. Claudia dice:

    Lourdes: Seguro. Se hace de manera similar.

  26. juan modesto rodriguez dice:

    Hola Claudia, gracias por las orientaciones. Mi propósito es que tengo este sitio para noticias diarias. Cuento con varios articulistas que actualizan en la semana. Necesito entonces una etiqueta que me aloje las entradas de los artículos con fotos de los articulistas y pueda enviar al lector al interior o a otra sección con leer mas… alguna idea que puedas compartir?

  27. walter dice:

    erfsddfsds

  28. njhomepros.com dice:

    Hello, I check your blog regularly. Your humoristic style is awesome, keep doing what you’re doing!

  29. Enriqueta dice:

    He estado navegando online más de 3 horas hoy y no había encontrado ningún artículo interesante como el tuyo.
    En mi opinión , si todos los propietarios de webs y blogueros escribieran un buen contenido como éste, internet sería
    mucho más útil.
    Muy bien escrito!

  30. juan modesto rodriguez dice:

    Hola Claudia, concuerdo con la amiga lectora. Te felicito por tus aportes a la comunidad bloguer. En dos de las plantillas que uso, pero que son de blogguer, hice la aplicación, pero pareció no funcionar, pero de todos modos,se agradece el esfuerzo.

Deja tu comentario
Tu Comentario