Cómo poner tres columnas a un blog

Este tutorial te va a servir para añadir una columna extra para tu blog, si tu blog solo tiene dos columnas (incluyendo el contenido), con este tutorial podrás agregarle otra adicional. Y el mismo sirve para agregarle cuantas columnas quieras.

Una vez que ya tenemos nuestra copia de seguridad hecha, empezaremos con los cambios en el código para conseguir las tres columnas.

La plantilla que vamos a "tunear" será una Mínima en cualquiera de sus versiones originales. Antes que todo debemos ir a Plantilla: Editar HTML y desmarcar (si es que lo está) la casilla Expandir artilugios. Una vez establecida, iremos dando los siguientes pasos:

1.  Vamos a copiar el código de la barra lateral y lo duplicaremos. De esta forma habremos creado una segunda barra lateral. Para ello vamos a buscar esta parte del código:

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

2. Copiarla entera y pegarla inmediatamente después haciendo las modificaciones en las líneas de código 1 y 3:

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

De esta forma hemos bautizado a nuestra nueva columna y definido sus principales características -el ancho de 293 px y suposición a la izquierda de la pantalla-.

Si te fijas a #newsidebar-wrapper le pusimos un ancho de 293px le puedes poner el ancho que prefieras. Eso sí, el total de la suma de anchos del #main-wrapper, #sidebar-wrapper y #newsidebar-wrapper debe ser igual o menor al ancho de #outer-wrapper, nunca superior.

Para el caso específico de este tutorial el outer-wrapper mide 1293px; ya que el main-wrapper mide 707px, el sidebar-wrapper 293px y #newsidebar-wrapper 293px, haciendo un total de 1293px.

Así como están estos códigos #newsidebar-wrapper va a estar alineada a la izquierda y #sidebar-wrapper a la derecha. En algunos templates el sidebar puede venir a la izquierda, por lo que deberías cambiar el float: $starSide por float: $endSide; para el caso de la nueva, generalmente al contrario del lado que se encuentre la columna lateral original.

Vale la pena también mencionar que si tú plantilla no reconoce el atributo float: $startSide, debes cambiarlo por float: left.

3. Buscar la siguiente sección:

Inmediatamente antes, pegar esta parte de código:

Llegados a este punto, si haces una Vista previa del blog, comprobarás que la barra derecha se encuentra por encima de la zona en donde redactamos nuestras entradas (o por debajo, o a un costado de la otra sidebar; esto depende de las medidas del blog). Esto se debe a que, al incluir nuestra nueva columna, el espacio total habilitado se ha quedado pequeño, por lo que tendremos que ampliarlo. Para ello:

4. Buscar la siguiente parte de código:

/* Outer-Wrapper ----------------------------------------------- */
#outer-wrapper {
width: 1000px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Aquí podemos observar lo que antes comentaba: tenemos un espacio de 1000 píxeles para el contenido de nuestro blog, pero hemos añadido un tercer elemento con un ancho de 293 píxeles, por lo que tendremos que hacer una suma que nos refleje el nuevo tamaño que nos es preciso, es decir 1000 + 293 = 1293 píxeles. Luego entonces, tendremos que dejar esta parte de código de la siguiente forma:

/* Outer-Wrapper ----------------------------------------------- */
#outer-wrapper {
width: 1293px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

5. Ahora tendremos que ajustar el tamaño de la cabecera, por lo que tendremos que buscar la siguiente parte de código y modificar el valor de la línea de código 2:

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

6. Y lo mismo haremos con la parte correspondiente al pie del blog:

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

Bueno pues ya podemos salvar nuestro blog de pruebas, hacer una Vista previa y observar que... ¡horror! ¡el lado izquierdo esta vacío! Tranquilos es normal, esto sucede porque aún no hemos dado contenido a nuestra nueva y flamante columna (sidebar). Si nos vamos a Diseño: Elementos de la página, veremos algo similar a esto:

Donde ya he añadido uno o dos artilugios para que comience a tomar vida y veamos el efecto.

7. Pero aún no hemos terminado, porque si hacemos una nueva Vista previa, observaremos que la columna izquierda y derecha, se quedan completamente pegadas a la zona donde escribimos nuestras entradas, lo cual no resulta estético.

Para solucionarlo tendremos que buscar la siguiente parte de código y añadir lo que está en las líneas de código 4 y 5:

#main-wrapper {
width: 707px;
float: left;
margin-left: 20px;
margin-right: 20px;
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 */
}

8. De esta forma hemos definido un margen de 20 píxeles entre la columna izquierda y la zona donde escribimos nuestras entradas, y otros 20 píxeles entre la columna derecha y la zona donde escribimos; por lo que tendremos que reajustar nuevamente los valores indicados en los puntos 4, 5 y 6 de 1293px a 1333px (1293 + 20 + 20 = 1333).

9. Centrar el título del blog. Esto solo se aplica a los que teníamos centrado el título del blog y al hacer más ancho el encabezado el título del blog se descentra; como fue mi caso. Entonces para centrar el título de un blog en estas condiciones buscamos este pedazo de código:

/* Footer
----------------------------------------------- */
#header { 
  margin: 5px;
  /* border: 1px solid $bordercolor; */
  text-align: center;
  color:$pagetitlecolor;
  float: left;
  width:900px;
  height: 160px;
}

Y aumentamos la línea de código 6. Si aún así no se centra, modificamos la línea de código 9 hasta obtener los resultados deseamos; en mi caso yo modifiqué width:620px a width:900px

10. Centrar la descripción del título del blog. Similar caso al anterior, por lo que para centrar la descripción buscamos la siguiente pieza de código:

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

Y aumentamos la línea de código 10. Si aún así no se centra, modificamos la línea de código 4 hasta obtener los resultados deseamos; en mi caso yo modifiqué width:640px a width:900px

Ahora ya sí, puedes Guardar la plantilla y empezar a trabajar con ella.

Ahora, iremos a la pestaña de "Elementos de la página" y veremos las tres columnas, listas para añadir los gadgets que necesitamos.

Otra ventaja que tiene este truco es que puedes aplicarlo sobre cualquier otra plantilla de las que te ofrece Blogger por defecto. En algún caso concreto puede variar ligeramente el código, pero la filosofía a aplicar es siempre la misma.

NOTA IMPORTANTE.- Aplica este truco en un blog de pruebas para evitar sustos innecesarios, recuerda que más vale prevenir que lamentar, y así, en caso de que algo salga mal o no nos guste, siempre debemos dejar el blog como lo teníamos. Entonces mejor haremos una copia de seguridad de la plantilla actual, para ello apretamos donde dice "Descargar plantilla completa" y la guardamos con el nombre que queramos. No me hago responsable de lo que pueda ocurrir si lo aplicas directamente sobre la plantilla de tu blog.