Crear bloques de información. Contenedores. | Oloblogger ...o cómo poner en nuestro blog todas las columnas que nos de la gana y con el diseño que queramos....

11 de junio de 2008

Crear bloques de información. Contenedores.

...o cómo poner en nuestro blog todas las columnas que nos de la gana y con el diseño que queramos. Leandro nos preguntaba como pasar su plantilla de dos columnas a una tres, añadiendo una segunda sidebar y nos ha dado la idea para redactar esta entrada explicando lo suficiente para que se puedan realizar distintos tipos de cambios.

El único obstáculo serán los posibles dibujos decorativos que tengamos con ancho fijo y que nos complicarán un poco el diseño final si cambiamos el ancho cada elemento y/o el ancho total de la plantilla.



Cajas CSSUna plantilla de dos columnas suele tener un cuerpo principal para las entradas (posts) y otro más estrecho para los artilugios (widgets), llamada barra lateral o sidebar. Más o menos como los dos esquemas que se muestran a la derecha y en los que podeis encontrar también una cabecera.

Estos cuerpos (o cajas) que forman una página web, se consiguen definiendo en la hoja de estilo los bloques de información que deseamos mostrar. Estos bloques también se llaman "contenedores", aunque se suele utilizar la palabra inglesa "wrapper".

Por ejemplo, las instrucciones para conseguir el caso 1 del esquema, con una cabecera ocupando 800 pixels, un cuerpo de 650 px a la izquierda y una barra lateral de 250 px a la derecha, necesitarán un código CSS similar a este:

#header-wrapper {
width:800px;
...
}
#main-wrapper {
width: 650px;
float: left;
...
}
#sidebar-wrapper {
width: 250px;
float: right;
...
}

No está todo el código que se utiliza para definir totalmente cada contenedor, pero sí lo fundamental para la explicación: el nombre del contenedor (#header-wrapper), su anchura (width:800px;) y su posición derecha-izquierda (float: right;).

En Blogger, tanto el CSS como el HTML se encuentran juntos en la plantilla. Por tanto, después de definir nuestros bloques en la parte de CSS, tendremos que indicar en la parte de HTML qué bloques queremos mostrar, en que orden y su contenido.

Para ello se utilizan las etiquetas DIV en unión del atributo ID, que servirá para hacer referencia a cada uno de los contenedores definidos previamente. Cada DIV tiene que tener su etiqueta de cierre /DIV.

Como en ocasiones es interesante meter varios contenedores pequeños dentro de otro más grande, es usual ver unos bloques "anidados" dentro de otros. En este ejemplo se muestra una típica plantilla Blogger con cabecera, un contenedor que a su vez tiene un cuerpo principal y una barra lateral y, por último, un pie:

HTML plantillas Blogger
Todos los nombres de contenedor que se citan en los ID, deben estar definidos previamente en la parte del CSS. Los del ejemplo son los que suelen utilizar todas las plantillas que facilita Blogger.


Y ahora que sabemos que significan todas estas cosas, un ejemplo de cómo añadir una segunda barra lateral a nuestra plantilla de dos columnas (entradas+sidebar).

En primer lugar, tendremos que buscar en nuestra plantilla la definición de nuestros contenedores, para poder añadir a continuación uno nuevo que será el que forme la nueva barra. Así, como se supone que ya tenemos una sidebar, podremos encontrar algo parecido a

#sidebar-wrapper {
width: 200px;
float: right;
...
}

Para añadir nuestra segunda barra, escribimos a continuación...

#sidebar2-wrapper {
width: 150px;
float: left;
...
}

...con los atributos de margen, color de texto, fondo, etc., que necesitemos.

IMPORTANTE: Hay que tener en cuenta que si añadimos un nuevo contenedor de 150 px, tendremos que ampliar nuestro "#content-wrapper" en otros 150 pixels para que quepa, lo que hará que nuestra página sea más ancha. Otra posibilidad es reducir esos 150 pixels al resto de cajas que hay a la misma altura: #main-wrapper (cuerpo principal) y la barra lateral preexistente (#sidebar-wrapper), quitando parte de sus pixels a cada una hasta completar 150.

Otro asunto es la lateralidad del nuevo elemento. Si queremos que ambas barras laterales queden a la derecha, las dos tendrán que tener la instrucción "float:right;". Si cada una quedará en un lado distinto, se hará como en el ejemplo.

Ya sólo nos queda, tal y como se explicó al principio en el ejemplo genérico, generar en el HTML el código mínimo para que se muestre la barra y para que esté disponible desde la pestaña de Elementos de Página. Una vez que sea "visible", podremos añadirle los elementos que queramos. De momento, sólo le pondremos nuestro perfil.

Tenemos que buscar el DIV de cierre del elemento tras el que queremos poner la nueva barra. Normalmente será el de <div id='main-wrapper'> si la queremos poner a la derecha del cuerpo principal o <div id='sidebar-wrapper'> si va a ir a la derecha de la barra que ya teníamos. También podrá ir delante de ellos. Allí donde queramos, insertamos esto:

<div id='sidebar2-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

Para que todo cuadre, no olvideis ajustar bien el ancho (width) de los bloques y su posición relativa (float). Y por supuesto, "Copia de la plantilla" antes de trastear nada y "Vista Previa" antes de salvar los cambios.

Al final el post ha quedado un poco largo, pero pretendíamos que cualquiera pudiera modificar este aspecto de su plantilla, independientemente del caso concreto de cada uno. Esto os permitirá, una vez más, desarrollar vuestra imaginación en vuestro espacio. Vosotros diréis si lo hemos logrado.

¿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

44 comentarios :

  1. Gracias por el tutorial. Me quedó una duda: si dos de las columnas tienen float left, ¿cómo decide blogger cuál queda más a la izquierda? Lo pregunto porque en mi blog da igual el float que escriba al main, que las dos sidebars se me mueven juntas... (y ya le quite el #sidebar-wrapper dentro del cual estaban)
    Any idea, superoloman?

    ResponderEliminar
  2. Pues la verdad es que no estoy muy seguro Androide, porque no he hecho la prueba, pero supongo que aquella que en la parte de HTML se declara primero.

    ResponderEliminar
  3. Muchas felicidades por el Blog. Mi pregunta es la siguiente, como puedo subir la sidebar? y es que de la cabecera hasta el primer artilugio hay un buen trozo, en cambio eso no pasa desde la cabecera al post...
    http://curioso-es.blogspot.com
    Espero me puedas ayudar.

    ResponderEliminar
  4. En tu caso Domingo, no es que la tengas que subir, es que no la deberías haber bajado :-)

    En el contenedor (ya que hemos explicado precisamente en esta entrada lo que era) de la barra lateral, tienes configurado que deje 170px de hueco por arriba. Lo tienes en esta parte:

    #sidebar {
    margin:0;
    padding-top: 170px;
    }

    Si lo cambias y colocas
    padding-top:0px
    solucionarás tu problema.

    Saludos,

    ResponderEliminar
  5. Muchas gracias por contestar tan rápido, seguro que trasteando toque este valor y no sabía como solucionarlo. Lo he corregido y ya está todo en su lugar, muy agradecido por la ayuda. Una labor fantastica, felicidades.

    ResponderEliminar
  6. Olomán, al final la única forma que tuve de mover las sidebars fue con position:absolute. Me tuve que calentar un poquitín más la cabeza que si sólo hubiera trabajado con floats, pero de cualquier manera, me gustó el resultado...

    http://androidesroqueros.blogspot.com/2008/06/metamorfosis.html

    Una descarga de besos

    ResponderEliminar
  7. Querido Oloman, tengo una preguntita. Me he dado cuenta de que el nuevo formato de mi blog no se ajusta a todas las resoluciones, la página queda demasiada ancha en algunos ordenadores. ¿Sabes de algún método para solucionarlo, es decir, para que el ancho de mi página se ajuste automáticamente al ancho de pantalla de cualquier ordenador?
    Gracias!

    ResponderEliminar
  8. ¿Qué pasó? Estoy ya muy pesada, ¿no? :)
    Bueno, ya se me ha ocurrido cómo con max-width y min-width, voy a intentarlo...

    Te añadí a mi blogroll

    Saludos!

    ResponderEliminar
  9. No Androide, no estás pesada. Es que yo no he tenido tiempo. ¿viste la barra lateral arriba a la derecha? :-)

    Llevo unos días con muchos encargos en Olografías y me he dedicado a ponerme al día.

    Lo de max y min-width no lo controlo del todo e iba a hacer una entrada explicando el ancho porcentual (%) en los contenedores de entradas y sidebar. Así es como lo tengo en mis páginas, con el resultado que tú quieres.

    Lo dicho... en cuanto pueda lo monto.

    ResponderEliminar
  10. Gracias :) y perdona la impaciencia...

    ResponderEliminar
  11. Hola Oloman.
    No me resulta. Copio los códigos y la Sidebar no me aparece a ninguno de los lados... sino que arriba o abajo. ¿qué pasa?

    ResponderEliminar
  12. Si me das la dirección de tu blog, le echo un vistazo Paulina...

    ResponderEliminar
  13. ahi va.

    mi perfil aparece arriba pero no a la derecha.

    http://lapaginadelfarero.blogspot.com/

    ResponderEliminar
  14. Yo veo un cuerpo principal y una barra que salen bien. No entiendo lo que quieres hacer.

    Si es añadir otra sidebar, ten en cuenta lo del ancho total. Con la nueva barra, la suma de los tres elementos, no puede superar el ancho del OUTER-WRAPPER. Si lo pasa, te la colocará abajo o arriba del todo.

    Saludos,

    ResponderEliminar
  15. Hola. He ampliado mi blog de una a dos sidebar siguiendo tus instrucciones. El caso es que ahora tengo un espacio en blanco donde presumiblemente debería de estar la segunda sidebar, pero no hay nada y en elementos de página no es posible añadir nada. Además, el perfil del autor que incluías como ejemplo en el código aparece en la sidebar original, no en la nueva. No sé que pasa. ¿puedes echarme un cable? Un saludo.

    ResponderEliminar
  16. Alfil, dime tu enlace que pueda echarle un vistazo.

    ResponderEliminar
  17. Se me resiste...haber si me ayudais
    #sidebar-wrapper {
    width: 220px;
    float: $endSide; (esto no es igual que el ejemplo) no se si tendra importancia.

    y luego al dar a vista previa me sale id new profile no es correcta errores: profile
    Gracias de antemano

    ResponderEliminar
  18. $endSide es izquierda (o derecha, no recuerdo) en el Blogger clásico. Es lo mismo en un principio.

    El problema que te da es que no identifica el widget TYPE=PROFILE, que es el que se ha incluido a modo de ejemplo.

    No pongas ninguno. Borra la línea del WIDGET entera, dejando la SECTION sin contenido. Sólo la apertura y el cierre.

    Si funciona, luego vas a Elementos de página y verás un nuevo bloque al que le podrás añadir cualquier elemento.

    ResponderEliminar
  19. hola! muy buenas explicaciones. acabo de llegar a esta página buscando una solución para mi blog.

    Mi problema es que modifiqué una plantilla que tenía 3 "contenedores" por lo que modifiqué la plantilla para eliminar una y mi intención es dejar una a cada lado del cuerpo principal. Lo tengo todo listo excepto porque los contenedores me aparecen debajo del cuerpo principal, no soy capaz de subirlos a la misma altura.
    Te agradeceria cualquier ayuda, ya que estoy un poco desesperada.
    Te dejo la dirección para que le eches un vistazo.
    http://pruebamoblelar1.blogspot.com/

    Gracias por adelantado!

    ResponderEliminar
  20. Hola Esther.

    En tu plantilla, las barras laterales las tienes estructuradas de la siguiente manera:

    <div id='midsidebar-wrapper'>
    <div class='leftsidebar section' id='leftsidebar'>
    <div class='widget BloggerButton' id='BloggerButton1'>
    <div class='widget-content'>
    <a href='http://www.blogger.com'><img alt='Powered By Blogger' src='http://www.blogger.com/buttons/blogger-ipower-blue.gif'/></a>
    <div class='clear'></div>
    ...
    <div class='clear'></div>
    </div><!--CIERRA WIDGET-CONTENT-->
    </div><!--CIERRA WIDGET BLOGGERBUTTON-->
    </div><!--CIERRA LEFTSIDEBAR-->
    <div class='rightsidebar section' id='rightsidebar'>
    <div class='widget Slideshow' id='Slideshow1'>
    <h2 class='title'>Presentación</h2>
    <div class='widget-content'>
    <div class='slideshow-container' id='Slideshow1_slideshow'>
    <span class='slideshow-status'>Loading...</span>
    </div><!--CIERRA WIDGET SLIDESHOW-->
    </div><!--CIERRA WIDGET-CONTENT-->
    <div class='clear'></div>
    <span class='widget-item-control'>
    ...
    </span>
    <div class='clear'></div>
    </div><!--CIERRA WIDGET-SLIDESHOW-->
    </div><!--CIERRA RIGHTSIDEBAR SECTION-->
    </div><!--MIDSIDEBAR-WRAPPER-->

    Esto quiere decir que ambas (LEFTSIDEBAR y RIGHTSIDEBAR), están a su vez dentro de otro DIV (MIDSIDEBAR-WRAPPER). En el CSS tienes...

    #midsidebar-wrapper {
    width: 900px;
    float: left;
    overflow: hidden;
    }

    ...por lo que tienes realmente un bloque de 900px junto al del cuerpo de los posts. Como, evidentemente, no cabe, las barras laterales se muestran cuando acaba el otro (debajo).

    A falta de estudiar más la plantilla, creo que sería suficiente con que quitaras las líneas que te he marcado en negrita en el primer trozo de código. Eso hará que desaparezca el contenedor que "contiene" las barras y estas estarán libres. El código CSS de MIDSIDEBAR-WRAPPER ya no te hará falta tampoco.

    ResponderEliminar
  21. vale, ahora entiendo cual es el problema. Quitando esas líneas que me has marcado no funciona, pero sabiendo donde está el fallo voy a trabajar para intentar separar los bloques. aunque aún no tengo ni idea de como hacerlo :S

    De todas formas muchas gracias, tu ayuda me ha venido genial!

    ;)

    ResponderEliminar
  22. creo que ya está solucionado ;)

    ResponderEliminar
  23. Plas, plas, plas... (aplausos)

    Ya lo he visto y además te he pillado justo actualizándolo.

    Echa un vistazo al menú superior en IE. Con la versión 6 (con 7 no he probado), las pestañas ocupan más del ancho disponible y desplazan hacia abajo el buscador. Cuando haces HOVER, todavía abre más hueco.

    ResponderEliminar
  24. gracias oloman ;)

    Con el menú tengo un problema con el que no contaba, y es que le puse un tipo de letra que tengo en mi pc, y ayer al conectarme desde otro me di cuenta de que lo cambiaba. Lógicamente solo lo verán los que tengan ese tipo de letra (VNI-Thufap3). Seguro que esa es la razón de que se modifique el tamaño y todo.
    Estoy intentando hacerme una barra de menú nueva a partir de una imagen (en vez de texto) para evitarme este problema, pero no sé como hacer para meter la imagen en el código.

    Otra duda que tengo, es que, me gustaría que en los contenedores laterales, los widgets se vieran separados. no se si me explico, que cada uno vaya metido en un recuadro independiente y un poquito separado del de arriba y del de abajo. Igual es mucho pedir, jajaja

    Un saludo! y muchas gracias por la ayuda

    ResponderEliminar
  25. Por cierto, soy Esther eh? es que tengo dos cuentas y ya no se ni con cual entro :S

    ResponderEliminar
  26. Hola Esther.

    Lo de las imágenes se hace sustituyendo cada una de las palabras que ahora tienes como enlace (INICIO, NOVEDADES, ETC) a partir de <ul id='nav'>
    por <img src='URL_IMAGEN'/>
    Por cada palabra un trozo de estos. El resto de código que hay para formar la lista no se tiene que tocar.

    URL_IMAGEN sería en cadad caso la dirección de cada imagen

    He calculado que las deberías hacer aproximadamente de 100x40 pixels para que te cupieran.

    Puedes echar un vistazo aquí si necesitas más información sobre cómo hacer un enlace con una imagen.

    Saludos.

    ResponderEliminar
  27. Hola... Por mas que intente modificar para crear otra columna no pude, creo que el problema es que no es el sidebar si no en el content wrapper no se como hacerle!!! Si se puede hacer?

    ResponderEliminar
  28. Hola Eri.
    content-wrapper es el contenedor general y lo tienes con 900px
    Luego tienes main-wrapper que es el cuerpo de las entradas, con 632px
    Por último, veo sidebar1-wrapper y sidebar2-wrapper con 268px... ¡cada uno! Evidentemente las dos barras no caben.

    Prueba en un principio a poner las barras de 130px para que te quepan. Luego, si funciona, amplialas hasta por ejemplo 200px. Eso hacen en total 400px, por lo que tendras que reducir el main a unos 500px.

    Todo esto es sólo para el CSS. Posteriormente tendrías que incorporar la nueva sección con el código que se explica en último lugar en este mismo post.

    ResponderEliminar
  29. Hola, hice un blog de prueba para probar esto

    Mi problema es que quiero poner una sidebar a la izquierda y otra a la derecha del cuerpo principal del blog, sin embargo me quedan ambas sidebar a la derecha. He probado todo float right, float endside y todas las combinaciones posibles y aun no puedo lograrlo.

    Mi blog es este

    http://labibliotecaprueba.blogspot.com/

    Se agradece la ayuda.

    ResponderEliminar
  30. Hola, ya arregle el problema, era que la sidebar2 la habia metido dentro del content wrapper.

    ResponderEliminar
  31. Gracias Olomán! Llegué a tu blog porque estoy tratando de saber si puedo convertir mi plantilla de 3 columnas (puede ser 2 sidebar) en una de 2 solamente, peeeeeeeeero... sin eliminar el contenido...ó sea: pasar el contenido de mi sidebar 1, por ejemplo, a formar parte de mi sidebar 2. Mirá, la verdad es que soy súper nueva en ésto de los blogs, no tengo mucha idea de HTML pero toco y así es como hago líos que ya aprendí lo que recomendás: antes de cualquier cambio DEScargar plantilla completa y usar vista previa... te leí tarde, jijiji... Mejor va a ser que cuando puedas, si podés y si tenés ganas, te des una vuelta por mi blog. Por favor, tené en cuenta que soy nuevísima y que antes de comenzar a editar, lo que se dice "editar" mis posts, quiero tenerlo a mi gusto, hablando de decoración y "chucherías" que me gustaría agregarle. Me da vergüenza que veas mi blog, con todo lo que vos sabés y con toooooodo lo que tiene tu blog, pero como hay muchos términos que no conozco (por ahí le digo sidebar a lo que es realmente una columna) prefiero que lo veas vos mismo. Perdón por tanto palabrerío y te agradezco si me podés ayudar (acordáte que estás hablando con alguien que no tiene muuuucha noción de los términos ni de HTML... todavía) niiii de qué cosas son indispensables en un blog y para qué sirven. Gracias totales y contentas...

    ResponderEliminar
  32. Una argentina más, si estás tan flojita en conceptos como dices, quizás lo mejor es que directamente busques una plantilla con dos columnas (cuerpo principal + sidebar). La tuya tiene mucha parte gráfica, con lo que no sería fácil quitarle una columna (una sidebar o barra lateral en tu caso) sin estropear el diseño general.

    ResponderEliminar
  33. hola

    fijate ke intente hacerlo y no tube exito!

    me canse de moverle y no o consegui,simplemente no aparecio nunca en la estructura de mi plantilla;
    estoy triste!pero bueno ya habra otra oportunidad de intentarlo de nuevo!

    estoy muy verde en este rollo de la programacion y desconozco mucho aspectos que podrian ayudarme a conseguir mejores resultados,

    @ El caso y lo que me concierne en este momento es que al esta anadiendo comandos MI PLANTILLA SE ALTERO Y LA LETRA DE LA COLUMNA LATERAL YA EXCISTENTE ESTA MUY GRANDE, EL COLOR DE LA DESCRIPCION DE LA COLUMNA TAMBIEN CAMBIO asi como el TAMANO DE LA DESCRIPCION DEL PIE !!!

    que fue lo que paso?????

    intente modificarla llendo directamente a Fuentes y el numero del color esta correcto!!
    y al tratar cambiarlo no me acepta un nuevo color!!!

    Despues me fui a la edicion HTML y al principio donde se definen las variables el numero del color de la descripcion de mi sidebar es correcto!!!!!***entonces por ke no lo reconoce!!???

    por favor necesito ayuda!!!!
    karla.

    ResponderEliminar
  34. Hola Oloman,

    Resulta que soy el pesado que tiene una nube de etiquetas enorme otra vez, jejeje

    Llevo tiempo intentando poner otra columna lateral, pero tengo muy mala experiencia tocando el html (he perdido varias veces mis widgets, y no creas que es agradable volver a buscarlos...). Mi duda surge cuando al observar la edición html del blog, veo que no tengo el content-wrapper ese, sino uno que se llama outter-wrapper (que intuyo que tendrála misma función). Dentro de ese outerwrapper localizo el main-wrapper y el sidebar-wrapper, pero ambos tienen float de $startSide y $endSide respectivamente (y no como left o right). Mi pregunta es: ¿puede copiar y pegar las propiedades de la sidebar que ya tengo y cambiarle el float por el $startSide sin que me provoque un destrozo? (claro, le llamo al nuevo bloque sidebar1...

    Muchas gracias de antemano, y ya te pregunto más dudas en sus respectivos posts.

    Un saludo!

    PD: Mi blog es http://pirrimarzon.blogspot.com

    ResponderEliminar
  35. Si copias las propiedades de la sidebar y la añades, tendrás dos sidebars sin problemas siempre que te quepan en anchura. Con Vista Previa puedes ver ese tipo de cambios, así que no creo que te lleves ningún susto.

    Lo de $startside y $endside, lo puedes cambiar sin problemas por las palabras RIGHT y LEFT (o al revés). Son variables que precisamente contienen esos valores por lo que da igual sustituirlas por dichos valores.

    Ver: http://oloblogger.blogspot.com/2009/05/plantilla-blogger-crear-secciones-iii.html

    ResponderEliminar
  36. jesus martin14/12/09 18:42

    lo siento,soy un negao en esto y primerizo,estoy haciendo un blog de mi pasteleria y quiero poner en la plantilla una columna mas,he visto todo lo que hablais pero no me entero de casi nada,si puedes echarme una mano te lo agradeceria el blog es
    http://www.latahonapastelerianatural.blogspot.com
    y mi correo es jmartinparedes@gmail.com
    muchas gracias
    jesus martin

    ResponderEliminar
  37. Hola Jesús Martín.
    ¿Desdoblando la columna lateral que tienes en dos de la mitad de tamaño? ¿Una adicional ampliando el ancho del blog? ¿A la izquierda o a la derecha?
    Hay varias posibilidades...

    ResponderEliminar
  38. Simplemente gracias por toda la información, soy una novata que intenta aprender. GRACIAS DE NUEVO

    ResponderEliminar
  39. De nada Julia. Todos intentamos aprender. Servidor incluido.

    ResponderEliminar
  40. Hola Oloman.

    Disculpa pero somos incapaces de realizar los cambios en mi blog. Tengo la plantilla simple de blogger. Lo único que queremos es aprovechar el ancho de pantallas y que no se quede tanto margen blanco a ambos lados. ¿podrías ayudarnos?
    el blog es el siguiente:
    http://corazondemaniqui.blogspot.com/
    Muchisimas gracias
    saludos

    ResponderEliminar
  41. Corazón, aquí tienes cómo hacerlo para las plantillas clásicas (http://goo.gl/xYZRR), pero si has usado el nuevo diseñador, entonces lo podrás hacer directamente desde allí.

    ResponderEliminar
  42. Hola, Disculpa, tengo la plantilla dividida en 2 columnas.
    ¿Hay alguna forma de hacer un tercer contenedor justo debajo de los dos anteriores al final de la plantilla? ¿Hay alguna forma de incluirle gadget a esta sección?

    ResponderEliminar
    Respuestas
    1. En el siguiente enlace y en los dos siguientes de la "colección" tienes explicado de manera genérica cómo añadir los bloques que quieras:
      Crear secciones en Blogger

      Eliminar