Diseño en 3 columnas para blogger

Empujado por la nueva orientación de este blog, y por una tarde de aburrimiento, decidí cambiar el aspecto del susodicho. Llevando a cabo la citada tarea encontré que, raramente, todas las plantillas que ofrece blogspot son de 2 columnas. Existen por ahí una infinidad de sitios web que permiten descargar plantillas para blogger que disponen de un diseño en 3 columnas, pero si uno quiere tunearse su propio blog, añadir una tercera columna no es difícil, incluso si no se tienen demasiados conocimientos de HTML y CSS.

Manos a la obra pues. Para este ejemplo partiremos de la plantilla llamada Minima. Para el resto de plantillas, las modificaciones son parecidas, aunque no iguales. Si algún lector perdido necesita añadir una tercera columna a cualquier otra plantilla y no lo consigue, que no dude en comentarlo.

Las secciones o contenedores principales de esta plantilla, llamadas "div" en HTML, son la cabecera, cuyo nombre en el código es #header-wrapper, la sección principal (#main-wrapper), la columna lateral (#sidebar-wrapper) y el pie (#footer-wrapper). Clica en la siguiente imagen para verlo (no se muestra el #footer-wrapper):

Después de las modificaciones que aplicaremos a dicha plantilla, añadiendo una nueva columna (#extra-wrapper), la distribución va a ser la siguiente:

La plantilla resultante va a tener un ancho de 960 píxeles. Existen numerosas razones por las que optar por este ancho (accesibilidad, usabilidad, teorías...) en las que no entraré, pero para resumir, con 960 píxeles de ancho, el diseño resultante se adaptará perfectamente a cualquier resolución igual o mayor de 1024x768 y se dispone de espacio de sobras. Es verdad que con este diseño se dificulta la navegación de la gente que usa una resolución menor (debido a la molesta barra de scroll horizontal), pero hoy en día cada vez son menos los que las utilizan, y sobretodo, un diseño en 3 columnas de menos de 900 píxeles de ancho resulta un poco caótico.

En la imagen de la futura estructura se ve el ancho de cada una de las tres columnas, así como el de otros elementos característicos e indispensables en la programación web, el margin y el padding. Como se puede apreciar en la siguiente imagen, el margin es, como el nombre indica, el margen entre una sección o contenedor y el resto de elementos a su alrededor, dicho de otra manera, el espacio que se deja a partir del borde de la sección hacia fuera. El padding es lo contrario, es el espacio que se deja entre el borde y el texto o los elementos en el interior del contenedor.
Al final, todos estos elementos (margins, paddings, bordes en caso que los haya y contenedores) tienen que sumar 960 píxeles, el ancho total de nuestra página. Por lo que si a alguien no le gusta la distribución propuesta, en cuanto a tamaños, puede modificarlos a su gusto, sólo teniendo en cuenta esta condición.

Lo primero que tenemos que hacer, por lo tanto, es establecer Minima como nuestra plantilla. En nuestro panel de control vamos a "Diseño", y ahí vamos a la pestaña "Seleccionar plantilla nueva". Una vez establecido, nos dirigimos a la pestaña "Edición de HTML".

Ahora vamos añadir el contenedor de la columna al código HTML de nuestro blog (en un principio, aparecerá con el widget del perfil personal, después ya se podrá quitar o añadir más widgets en la pestaña "Elementos de la página"). Buscamos en el código:

<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
 <b:section class='crosscol' id='crosscol' showaddelement='no'>
 </b:section>
</div>

<div id='main-wrapper'>
....

Teniendo en cuenta que el código de nuestra nueva columna es el siguiente:

<div id='extra-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>
  <b:widget id='Profile1' locked='false' title='Mi perfil' type='Profile'/>
</b:section>
</div>

Vamos a copiar este código tal cual está entre el div del "crosscol-wrapper" y el del "main-wrapper", quedando al final el código de la siguiente manera:

<div id='content-wrapper'>

 <div id='crosscol-wrapper' style='text-align:center'>
   <b:section class='crosscol' id='crosscol' showaddelement='no'>
   </b:section>
 </div>

 <div id='extra-wrapper'>
   <b:section class='sidebar' id='left-sidebar' preferred='yes'>
     <b:widget id='Profile1' locked='false' title='Mi perfil' type='Profile'/>
   </b:section>
 </div>

 <div id='main-wrapper'>
 ....

Llegados a este punto, la columna ya está añadida, ahora sólo falta tunearla a través del CSS, las hojas de estilos.

Primero adaptamos la cabecera al ancho de la página. Localizamos en el mismo código la plantilla el lugar donde se especifica el estilo de la cabecera.

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Aquí debemos modificar el width poniéndolo a 940px. Lo mismo haremos con la descripción de la cabecera.

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Cambiamos pues el max-width de 700px a 940px.

Ahora viene el punto donde realmente damos el estilo a las 3 columnas. Localizamos el siguiente código:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Y lo cambiamos por el siguiente:

#outer-wrapper {
width: 940px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#extra-wrapper {
width: 190px;
padding: 10px 5px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#main-wrapper {
width: 500px;
margin-left: 10px;
margin-right: 10px;
padding: 10px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 190px;
padding: 10px 5px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Finalmente sólo nos falta adaptar el tamaño del pie. Buscamos el código siguiente:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Y modificamos el width, cambiándolo de 660 a 940px. Ahora nuestro blog dispone de tres columnas. Clicamos en el botón “Guardar Plantilla” y ya podemos ver como ha quedado.

Si nos dirigimos a “Elementos de la página”, dentro de la pestaña “Diseño”, veremos como la tercera columna ya aparece y los elementos se pueden añadir o modificar como en cualquier otra sección.

Cuando pueda crearé una plantilla genérica basada en este diseño para que cualquiera pueda subirla y ponerla a su gusto, cambiando formatos, bordes, colores o imágenes.