Rounders3 añadir sidebar

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Hace tiempo que Jorge me pidió si podría conseguir modificar su plantilla, la Rounders3, a tres columnas y para ser sincera después de intentarlo varias veces decidí dejarlo por imposible.
Hoy descubrí en Tips for New Bloggers el dato que me faltaba, aunque allí la explicación dada es para la Rounders4, supuse que al ser tan parecidas en su estructura las dos plantillas, podría aplicarlo a la rounders3, y este es el resultado:

1- En primer lugar modificaremos su ancho, que vamos a dejar en 985px, para ello buscamos esta parte del código CSS en nuestra plantilla, y cambiamos el valor de width de 740px a 985px:

#outer-wrapper {
width:985px;
margin:0 auto;
text-align:left;
font: $bodyFont;
}

2- Más abajo del CSS encontramos este código:

#sidebar-wrap {

Justo después de la última llave } de cierre de ese código, añadimos el código CSS necesario para la nueva sidebar, quedará así:

#newsidebar-wrap {
width:240px;
float:left;
margin:15px 10px 0 0;
font-size:97%;
line-height:1.5em;
background:$newsidebarBgColor url(http://www.blogblog.com/rounders3/corners_side_bot.gif) no-repeat left bottom;
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 */
}

#newsidebar-wrap1 {
background: url("http://www.blogblog.com/rounders3/corners_side_top.gif") no-repeat left top;
margin:0 0 15px;
padding:10px 0 0;
color: $mainTextColor;
}

El color de la nueva sidebar podremos cambiarlo de forma automática en "fuentes y colores", pero antes hemos de añadir la variable necesaria en la plantilla para poder hacerlo. Arriba de la plantilla, donde vemos esas líneas que empiezan por <Variable name, añadimos la nueva, hasta que la cambiemos la nueva sidebar se verá de color blanco:

<Variable name="newsidebarBgColor" description="New Sidebar Background Color" type="color" default="#eec" value="#ffffff">

4- Hemos modificado el ancho del blog, así que necesitaremos cambiar las imágenes de la cabecera (header) y del pie (footer) para conseguir el efecto redondeado de sus bordes, para ello hemos de cambiar en #header-wrapper { y en #header { la url de la imagen que viene en Blogger para la cabecera por las que he modificado:

#header-wrapper {
background:$titleBgColor url("http://img146.imageshack.us/img146/6940/cornerscap985topmj2.gif") no-repeat left top;

#header {
background:url("http://img146.imageshack.us/img146/2779/cornerscap985botdl9.gif") no-repeat left bottom;

Haremos lo mismo en el footer:

#footer-wrap2 {
background:$titleBgColor url("http://img146.imageshack.us/img146/6940/cornerscap985topmj2.gif") no-repeat left top;

#footer {
background:url("http://img146.imageshack.us/img146/2779/cornerscap985botdl9.gif") no-repeat left bottom;

5- Por ultimo añadiremos el código html necesario para que se vea nuestra nueva sidebar. Nos situamos en esta parte de la plantilla:

<div id='main-wrap1'><div id='main-wrap2'>

Justo encima, colocamos este código:

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

Usamos la "vista previa" y si está correcto, guardamos cambios.

Notas
Estas modificaciones están hechas en una plantilla sin cambios de tamaño anteriores, es decir, en su forma original tal como nos la proporciona Blogger.
Si todo ha ido bien, la nueva sidebar estará situada a la izquierda de las entradas y mostrará una copia de vuestro perfil que podréis eliminar una vez guardados los cambios.