Cómo añadir una columna (sidebar) en blogger

Las plantillas que, por defecto, podemos usar en blogger contienen sólo dos columnas que, en algunos casos, pueden ser insuficientes. Si queremos añadir una tercera columna podemos seguir el siguiente procedimiento:

Antes de hacer nada, por favor, recuerda hacer una copiad de seguridad de tu plantilla. Vete a Diseño -> Edición de Html, pulsa sobre el link "Descargar plantilla completa" para guardar una copia de la misma en tu disco duro.



Avanza hasta la parte dónde puedes ver el siguiente texto:

#outer-wrapper { background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat 250px 50px; width:925px; margin:0 auto; text-align:$startSide; font:$bodyfont; } #header-wrapper { display: none; } #main-wrapper { width:665px; float:$endSide; padding:100px 0 20px; font-size:85%; 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 */ } #main { background:url("http://www.blogblog.com/dots/bg_dots2.gif") -100px -100px; padding:20px 10px 15px; } #sidebar-wrapper { width:200px; float:$startSide; font-size:85%; padding-bottom: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 */ }

Esta plantilla define 3 wrappers, denominados:

#outer-wrapper – se refiere al blog completo
#main-wrapper – Se refiere a la zona principal de Post del Blog
#sidebar-wrapper – Se refiere a la columna lateral izquierda.

Para añadir otra columna (sidebar), copia la parte resaltada en rojo y pégala inmediatamente después de la misma, pero renómbra “#sidebar-wrapper” a “#sidebar-derecha-wrapper”, por ejemplo.

A continuación, deberías ajustar el ancho de todos los wrappers (envoltorios). Por ejemplo mucha gente emplea 750px para outer-wrapper, 400px para main-wrapper, y 150px para los sidebar-wrapper. Puedes cambiar los valores como prefieras pero ten en cuenta qaue el ancho total de los sidebar-wrappers y el main-wrapper no deben exceder el ancho del outer-wrapper.

También fija el margen izquierdo del main-wrapper, pero permite al sidebar nuevo flotar en la derecha manteniendo la original en la derecha. Para ello debes localizar el siguiente trozo de código.

<div id=’content-wrapper’> <div id=’main-wrapper’> <b:section class=’main’ id=’main’ showaddelement=’no’> <b:widget id=’Blog1′ locked=’true’ title=’Entradas del blog’ type=’Blog’/> </b:section> </div>

Una vez que lo tengas localizado debes añadir entre <div id=’content-wrapper’> y <div id=’main-wrapper’> lo siguiente:

<div id=’content-wrapper’> <div id=’sidebar-derecha-wrapper’> <b:section class=’sidebar’ id=’left-sidebar’ preferred=’yes’/> </div> <div id=’main-wrapper’> <b:section class=’main’ id=’main’ showaddelement=’no’> <b:widget id=’Blog1′ locked=’true’ title=’Entradas del blog’ type=’Blog’/> </b:section> </div>

Actualizar:


También deberás cambiar los anchos para permitir que en el editor de elementos de la página "Diseño" -> "Elementos de la página" aparezcan los wrappers (envoltorios) ajustados a sus anchos correctos.


Avanza hasta encontrar el siguiente texto:

/* Page structure tweaks for layout editor wireframe */ body#layout #sidebar, body#layout #main, body#layout #main-wrapper, body#layout #outer-wrapper, body#layout #sidebar-wrapper { padding: 0; } body#layout #sidebar, body#layout #sidebar-wrapper { padding: 0; width: 240px; }

y pon los tamaños correctos, añadiendo el nuevo envoltorio, por ejemplo:



/* Page structure tweaks for layout editor wireframe */ body#layout #sidebar, body#layout #main, body#layout #main-wrapper, body#layout #outer-wrapper, body#layout #sidebar-derecha-wrapper { padding: 0; } body#layout #sidebar, body#layout #sidebar-derecha-wrapper { padding: 0; width: 200px; } body#layout #sidebar-wrapper { padding: 0; } body#layout #sidebar, body#layout #sidebar-wrapper { padding: 0; width: 200px; } ]]></b:skin>


Consideraciones adicionales:

• Yo empleo la plantilla dots, en la misma el wrapper principal (dónde van los post) aparece desplazado respecto a la parte superior de la página, para que la nueva columna aparezca a la misma altura (y no "nazca" en la parte superior) debemos modificar el envoltorio, añadiendo "padding: 100px 0 20px", con lo que nos quedaría :
  

#sidebar-derecha-wrapper { width:200px; float:$endSide; padding:100px 0 20px; font-size:80%; padding-bottom: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 */ }

• si queremos añadir algún color de fondo a la nueva columna, por ejemplo blanco debemos añadir a lo anterior la línea: background: #fff.
  

#sidebar-derecha-wrapper { width:200px; float:$endSide; background: #fff padding:100px 0 20px; font-size:80%; padding-bottom: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 */ }

• Si quieres mantener un espacio entre la columna central main-wrapper y las laterales puedes hacerlo añadiendo las siguientes líneas -por poner un ejemplo- a #main-wrapper {...}:

margin-right: 25px;
margin-left: 25px;

Fuentes:
http://tips-for-new-bloggers.blogspot.com/2007/02/three-columns-blogger-template.html
http://phranet.blogspot.com/2006/10/aadir-y-dividir-columnas-en-blogger.html
http://www.blogmundi.com/2007/02/16/anadir-una-barra-lateral-sidebar-en-blogger/