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.

---

Una 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:


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

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter