Añadir otra sidebar


Si tenemos una plantilla con una sola sidebar quizás en algún momento deseemos tener otra sidebar más si vamos añadiendo muchos elementos de página nuevos. Parece más complicado de lo que realmente es pero hazlo primero en un blog de pruebas o haz una copia de la actual (esto es deseable siempre que metemos mano a la plantilla...)
Vamos a hacerlo en una plantilla "Mínima" así que, en principio, servirá para todas las "Mínimas", aunque con pequeños cambios en los márgenes y los paddings creo que no habrá problemas.

1. Buscamos #outer-wrapper {

Establecemos el ancho (width) que será la suma total de entradas + sidebar1 + sidebar2.


#outer-wrapper {
width: 900px;


2. Buscamos #sidebar-wrapper {


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


Lo copiamos y, justo debajo pegamos el código que acabamos de copiar. Acabamos de duplicar la sidebar, ahora hemos de cambiarle el nombre y le ponemos, por ejemplo, sidebar2, además necesitamos que "flote" al otro lado, para que las entradas queden en el medio de las dos sidebar, para lograrlo le cambiamos el float, quedaría así:

#sidebar2-wrapper {
width: 220px;
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 */
}

3. Buscamos <div id='content-wrapper'>

Justo debajo de esa línea añadimos el código necesario para que nuestra sidebar se muestre en el blog:

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


Guardamos cambios.
De momento nuestra nueva sidebar está vacía, así que para verla en el blog, hemos de ir a el panel de diseño, y allí veremos que ya es posible añadir nuevos elementos a la sidebar, añadimos uno, guardamos cambios y vemos la nueva sidebar pero se apreciará también, que la distancia de las sidebar a las entradas no es la correcta...
Solucionaremos esto volviendo a la plantilla - html, y añadiendo en #main-wrapper {
un nuevo valor para el margen:
margin-left: 20px;

8 comentarios:

Anónimo

Después de cuatro días de busqueda en valde, por fin puedo estrenar mi doble sidebar.
Gracias jesgo por la ayuda brindada.

PATRI

jesgo

Patri, me alegro que te sirviera. Saludos

Planeta Bosé

Hola Jesgo, gracias por el post, pero a mi no me dio resultado, tal vez haya hecho algo mal, pero no me aparece la sidebar... :(
Si quieres verlo!!!
Mi plantilla es una mínima ochre, aunque de ocre no le queda nada ya que la super modifiqué!!!
Un saludo, Mariela

jesgo

Planeta Bosé, no veo en el blog que me dices nada del código que indico que hay que añadir, así no te va a funcionar nunca ;).
Agrégalo y me vuelves a comentar.
Saludos.

Anónimo

Jesgo muchas gracias,intenté en otro sitio y nada,pero a pesar de no entender ni papa de html :O,lo explicas muy bien y salió a la primera ;),muy agradecida,saludos!

Maria

jesgo

María, Me alegro que pudieras instalarlo. Gracias a tí.

jhonfre

que cuca... gracias....

» Escribe tu comentario aquí:


Si quieres hacer alguna consulta sobre tu blog habilita tu perfil o deja un enlace a tu blog:
<a href="url-de-la-página">Texto enlace</a>

» O utiliza el antiguo formulario


Los comentarios están siendo moderados y publicados lo antes posible.



jesgo23 ©2008/2009 | Plantilla Blogger | Diseño jesgo Creative Commons License