AÑADIR UNA SEGUNDA SIDEBAR A TU BLOG

A petición de Hugo, os voy a explicar cómo se añade una tercera columna a nuestra plantilla, es este caso, es una segunda sidebar (donde colocamos los artilugios, menús...)

Es un poco pesado de hacer porque tendreis que ir cambiando números hasta encontrar el formato que más os guste. Yo, en principio os voy a poner los números que yo tengo puestos en mi plantilla, por si os apetece tenerla así.

Deciros antes de nada, que yo uso ordenador portátil y siempre hago la plantilla ancha porque prefiero verla así. No he probado desde que hice mis blogs a verlos en una pantalla de un pc de sobremesa, así que no sé cómo se verá.

Empezamos la aventura....abróchense los cinturones.......que vamos a despegar....

Estos códigos que os voy a poner, sirven sólo para las plantillas de Mínima, Denim y Dostdark de blogger. Yo la que uso es la Mínima Dark.

1º Vamos a nuestra Plantilla y buscamos la parte del código que os muestro:

/* 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. Y ahora nos toca cambiar números.... el width (ancho) de #outer-wrapper, de #main-wrapper y de #sidebar-wrapper, para que podamos poner la nueva sidebar. También tenemos que añadir un margen hacia la izquierda (margen-left) para que haya un espacio entre la nueva sidebar y la columna principal.

Como he dicho antes, os voy a poner de ejemplo mi plantilla, así que aquí va:

#outer-wrapper { width: 958px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; } #main-wrapper { width: 460px; float: left; margin-left: 30px; 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 */ }

3º Después de este código, donde nos pone sidebar-wrapper y sus datos, debemos añadir la nueva sidebar con éste código:

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

4º Ahora al final, casi casi, de nuestra plantilla buscamos éste código:

<div id="content-wrapper"> <div id="crosscol-wrapper" style="text-align:center"> <b:section class="crosscol" id="crosscol" showaddelement="no" /> </div>

Y añadimos este otro:

<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>

NOTA: para ver los cambios según los vais haciendo y comprobar que la plantilla ha quedado a vuestro gusto con los números que vayais modificando....en vez de guardar cambios, le dais sólo a VISTA PREVIA.