02 septiembre 2009

Nueva sidebar dividida en dos

 
Una manera de ganar espacio extra en el blog sin hacer grandes cambios es añadir una nueva sidebar debajo de la que ya tenemos y dividirla en dos.



Para explicar estas modificaciones, damos por hecho que la plantilla a la que vamos a hacer los cambios tiene solamente una sidebar y, por descontado, que lo más adecuado sería tratar de hacer los cambios en un blog de pruebas antes de pasarlos al "original".



Para mi ejemplo usaré la
plantilla Mínima de Blogger con sus medidas originales.
Haremos todos los cambios
sin "expandir las plantillas de artilugios".



[1] Localizamos el código CSS que corresponde a la sidebar que ya tenemos en la plantilla y que será algo como esto:

#sidebar-wrapper {


width: 220px;

float: $endSide;

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

}

Lo copiamos y justamente debajo pegamos la copia y le cambiamos la id, por ejemplo a sidebar-wrapper-doble:

#sidebar-wrapper-doble {

width: 220px;

float: $endSide;

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] Debajo de ese mismo código que acabamos de añadir, pegamos este otro que servirá para controlar las dos columnas de la nueva sidebar:


#columna-izda {


width: 48%;

float: left;

}

#columna-dcha {

width: 48%;

float: right;

}


[3] Bajamos ahora hacia el HTML de la plantilla para localizar el código de la sidebar que ya tenemos:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>

Añadimos, justo debajo, el código para la nueva sidebar con sus columnas incluidas:

<div id='sidebar-wrapper-doble'>
<b:section class='sidebar' id='columna-izda' showaddelement='yes'>
</b:section>

<b:section class='sidebar' id='columna-dcha' showaddelement='yes'>
</b:section>

<div style='clear: both;'/>
</div>

Ejemplo de resultado:


Sidebar dobleDoble sidebar

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo