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 antes del último </div> de cierre, 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


Nota
Para lograr un diseño mucho más útil, lo ideal sería haber ensanchado antes la plantilla.
En esta entrada anterior puedes ver como ensanchar la plantilla Mínima.

0 comentarios:

Publicar un comentario