Añadir una barra lateral (sidebar) en Blogger

Todas las plantillas disponibles a través del panel de control de Blogger disponen de solo una columna. Por eso, vamos a ver como podemos añadir una segunda columna, de manera que quede como puedes ver en este blog de pruebas.

El proceso es bastante sencillo pero requiere tocar varios elementos del código, así que para prevenir cualquier problema, lo mejor es que primero hagas una copia de seguridad de la plantilla. Lo puedes hacer en “Plantilla” -> “Edición HTML”.
Una vez guardado empezaremos a editar la plantilla.

Vamos a suponer que estamos trabajando con una plantilla cuya barra lateral esté a la derecha. Entonces en “Edición HTML”, de nuevo, nos vamos a la sección “Editar plantilla”.

Lo primero que tenemos que hacer es cambiar el nombre a la antigua barra lateral, para poder identificarla correctamente:
Buscamos esto:

y lo cambiamos por esto:

Esa etiqueta tiene un elemento CSS asociado, así que también tenemos que cambiarlo:

En la parte superior del recuadro “Editar Plantilla” buscamos lo siguiente:

#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 lo cambiamos por esto:

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

Puedes realizar una vista previa de la plantilla y comprobar que se ve bien.

El siguiente paso es añadir la otra barra lateral, la izquierda en este caso.

Primero vamos a añadirla en la plantilla y después crearemos el CSS con sus propiedades.

Debes localizar el siguiente trozo de código.

Una vez que lo tengas localizado debes añadir entre

y

" lo="" siguiente="">

Pero claro, no hay ninguna propiedad definida para esa etiqueta así que tendremos que crearla:

En el mismo sitio donde antes modificamos el nombre de la barra lateral derecha puedes añadir lo siguiente debajo de #right-sidebar-wrapper:

#left-sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

Bien si ahora realizas una vista previa verás que una de las columnas se desplaza hacia abajo. Eso es debido a que el div que las contiene no es lo suficientemente ancho. Por eso tenemos que ampliarlo.

Busca lo siguiente:

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

Debes modificar el 660 por 860, de manera que quede asi:

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

Por otro lado también puedes modificar la cabecera para que su ancho coincida con el nuevo ancho del contenido. No obstante tendrás que tener en cuenta, si tienes una imagen, que el nuevo ancho modificará su posición o, simplemente, no cubrirá todo.

Deberías cambiar esto:

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

Por esto:

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

Una vez modificado todo, guarda la plantilla y ve a “Elementos de página”, verás que ahora tienes una nueva columna a la izquierda. Sólo te queda añadir contenido como lo haces habitualmente

blogmundi