Añadir una segunda columna en Blogger

A petición de El buhonero venezolano, os ofrezco un tutorial con el que podreís agregar una segunda sidebar o columna a vuestro blog.

Antes que nada, tened claros unos conceptos:

#outer-wrapper - Define el blog entero.

#main-wrapper - Define la columna principal.
#sidebar-wrapper - Define la sidebar.

Para insertar una nueva columna necesitaremos agregar algunos códigos además de hacer algunas modificaciones en el blog. Este tutorial resulta para las siguientes plantillas de Blogger:
Todas las Minima (Dark, Blue, Ochre, Lefty, Stretch, Lefty Stretch), Denim, y Dotsdark.

1. Accedemos a Plantilla->Edición de HTML. Una vez allí buscamos lo siguiente (podeis buscarlo pulsando CTRL+F y escribiendo lo que querais buscar):

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

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

2. Tendremos que modificar el width (ancho) del #outer-wrapper, el width (ancho) del #main-wrapper y el width (ancho) de la #sidebar-wrapper, para poder agregar la nueva columna. Además hay que agregarle un margen hacia la izquierda (margen-left) para que haya un espacio entre la nueva sidebar y la columna principal.

Por ejemplo:

#outer-wrapper {
width: 750px;
...
}
#main-wrapper {
width: 400px;
margin-left: 20px;
...
}
#sidebar-wrapper {
width: 150px;
float: right;
...
}

3. Después de haber modificado el ancho del blog entero, de la columna principal y de la sidebar, agregamos el código de la nueva sidebar (lo que esta en rojo) después de:

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

#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

4. Ahora necesitamos hacer algunos cambios en el cuerpo de la plantilla. Después de <div id='content-wrapper'> agregais lo siguiente:

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

5. Para ver los cambios haceis clic en Vista Previa y si creeis que habeis hecho bien las modificaciones, simplemente clic en Guardar Plantilla.


Fuente: http://ayudaparaelblog.blogspot.com/