jueves, enero 21, 2010

Sidebar con 2 columnas

FUENTE  -  TUTORIALES - EL ESCAPARATE DE ROSA

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>


Este sería el  resultado:
 

8 comentarios:

María dijo...

¡Qué bien vienen estos consejos! me quedo ojeando tus posts, que me parecen muy interesantes para mejorar los blogs.

Un beso.

María dijo...

Te voy a hacer una pregunta... ¿cómo se puede poner el número de comentarios así arriba del todo? es que ha sido una de las cosas que siempre me ha gustado pero que no he sabido hacer.

Muchas gracias.

Ana dijo...

Intentaré explicarlo en el siguiente post.

Deybi dijo...

Hola Ana.

Vengo a felicitarte y desearte suerte con este nuevo proyecto en marcha.

Muy interesante esto de columnas dobles.

Francisco dijo...

Hola! necesito tu ayuda. Resulta que utilicé este magnifico post para hacer unos cambios en mi plantilla, y todo parecía funcionar bien. Pero resulta que, al visualizar los post de forma individual (por ejemplo este http://medicinajoven.blogspot.com/2010/02/tos-que-y-por-que.html) se ha quitado una parte del fondo blanco y se ve el fondo de la página. ¿Puedes decirme donde buscar el fallo?. Si me ayudas te pondré un enlace en mi página por hacerme el favor. Gracias!!!

hellra8 dijo...

Hola Ana,
Me gustaría que me ayudases.
Pues no utilizo un formato predeterminado de esos que ya vienen con Blogger, y lo he modificado un poco a mí gusto.
El caso, es que no me sale el código de: "main-wrapper".
He intentado por mi modo, meterle una sidebar2 y hacer los ajustes posibles, pero me sale la sidebar2 por debajo del main(body) y se distorsiona.
¿Podrías ayudarme?
Gracias por tu tiempo.
1 abrazo, hellra8

marcelavanegas dijo...

oye en mi blog no hay side bar wrapper ni nada con palabra wrapper y no he podido añadir una columna nueva
hay content y cosas asi pero nada con wrapper y todas las instrucciones que dan no aparecen de la miosma forma en mi blog

Lourdes dijo...

Hola Ana, te agradecería si me puedes ayudar. Yo solo quiero dos columnas en la sidebar en los blogs que sigo, pero no toda la sidebar. Es eso posible???. Muchas gracias.

Publicar un comentario