AGREGAR UNA SEGUNDA SIDEBAR

Hoy les voy a explicar como hacer para tener una segunda Sidebar en las plantillas Minima. Como sabrán el hecho de tener una segunda Sidebar nos da la posibilidad de poder agregar mucho más contenido sin que el largo del blog se nos haga interminable.Como primer paso antes de hacer las modificaciones necesarias al código html de nuestra planilla recuerda hacer un backup (Copia de Respaldo).Lo primero que hay que saber es que las plantillas tienen tres elementos principales:

#outer-wrapper - Define el blog entero. En la plantilla Minima sin modificar tiene un ancho de 660 px.
#main-wrapper - Define el cuerpo del blog, donde van las entradas. Ancho original de 410 px.
#sidebar-wrapper - Define la sidebar. Ancho original de 220 px.

Por tanto 410+220=630; como el ancho del blog entero es 660, less aconsejo que guarden estas proporciones: cuerpo+sidebar+30 = ancho completo.Ahora vamos a ver los pasos a seguir, los cuales son bastante sencillos, solo hay que fijarse bien:1.- Vamos a Plantilla/Edición de HTML y buscamos la outer-wrapper (recuerda que haciendo ctrl+f te aparece el buscador, donde simplemente escribes outer-wrapper y el localiza el código) para modificar el ancho del blog entero. Tienes que buscar estas líneas:

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

Y donde pone width: 660px; cambiarlo por la anchura total del blog, que en este caso va a ser 880.2.- Si quieres la nueva sidebar a la izquierda del cuerpo del blog hay que añadir al cuerpo un margen a la izquierda que lo separe de la nueva sidebar. Para eso tienes que buscar las siguientes líneas:

#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 */
}

Y debajo de width: 410px; añadir la siguiente línea con el margen: margin-left: 20px;

NOTA: Si quieres la nueva sidebar a la derecha no hay que hacer este paso 2; luego añadiremos el margen en el paso 6.
3.- Añadimos la segunda sidebar justo debajo de la primera. Hay que buscar las líneas:

#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 */
}

Y justo debajo añadir el siguiente código:

#newsidebar-wrapper {
width: 200px;
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 */
}

Con esto la sidebar en principio quedará a la izquierda del cuerpo principal; si la quieres a la derecha luego la cambiamos en el paso 6.4.- Para que la nueva sidebar se muestre hay que buscar las siguientes líneas:

Y justo debajo añadir el siguiente código:

5.- Haz clic sobre Vista Previa y si te aparece la segunda sidebar a la izquierda del cuerpo principal con el perfil (que hemos incluido en la segunda sidebar para comprobar que aparece) haz clic sobre Guardar Cambios. Para eliminar este segundo perfil, ve a Plantilla/Elementos de página (allí comprobarás que sale la opción Añadir un elemento de página a la izquierda de Entradas del blog) y elimínala. Si arrastras a la sidebar izquierda cualquier elemento de la derecha o añades uno nuevo y clicas sobre Vista Previa comprobarás que aparece a la izquierda del cuerpo principal.6.- Si deseas la nueva sidebar a la izquierda de las entradas sáltate este paso y ve directamente al siguiente. Si la deseas a la derecha, justo al lado de la sidebar original has de buscar de nuevo el código de la nueva sidebar, que era éste:

#newsidebar-wrapper {
width: 200px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
verflow: hidden; /* fix for long non-text content breaking IE sidebar float */

Y hacer dos modificaciones:
- donde dice float: left; cambiarlo por right
- debajo de width: 200px; añadir una nueva línea con el margen para separarla de la sidebar original; la línea que tienes que añadir es ésta:

margin-left: 20px;

Clica sobre Vista Previa y si te aparece la segunda sidebar a la derecha de la primera clica sobre Guardar Cambios.7.- Ahora ya tenemos las 2 sidebars en nuestro blog, pero nos falta hacer que la cabecera y el footer del blog sean de la misma anchura que todo el blog. Para cambiar la anchura de la cabecera volvemos a Plantilla/Edición de HTML, expandimos artilugios y tenemos que buscar las siguientes líneas:

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

Donde cambiaremos width:660px; por la anchura total del blog, 880.
Y para cambiar el ancho del pie buscaremos:

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

Donde igualmente cambiaremos width:660px; por la anchura total del blog, 880.
Usamos la Vista Previa y si todo está bien guardamos cambios y ya tenemos dos sidebars!