Añadir una sidebar doble debajo de la sidebar existente


Hoy quería explicar como añadí en este blog dos sidebar (columnas) partidas debajo de una sidebar ya existente.


Para lograr esto haremos lo siguiente:

1) Vamos a Diseño
2) Edición de HTML
3) Buscamos #sidebar-wrapper (tecleamos Ctrl + F para buscar más rápido)
4) Nos encontraremos con algo así:


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



5) Lo copiamos (ratón, clic derecho, copiar) y lo pegamos debajo, modificando sólo el título:


#sidebar-wrapper-nueva {
width: 300px;
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 */
}



6) Justo debajo de este código que acabamos de pegar y modificado el título, pegaremos el siguiente código:


#columna-izda {
width: 48%;
float: left;
}
#columna-dcha {
width: 48%;
float: right;
}



7) En resumen, deberá quedarnos en total todo esto:


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

#sidebar-wrapper-nueva {
width: 300px;
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 */
}

#columna-izda {
width: 48%;
float: left;
}
#columna-dcha {
width: 48%;
float: right;
}



8) Ahora buscaremos <div id='sidebar-wrapper'>

9) Nos encontraremos con esto:


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



10) Justo debajo pegaremos los siguientes códigos:


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


11) Clicamos en vista previa y si no hay ningún error guardamos la plantilla. Todo listo.



Una vez más gracias a Rosa.

17 comentarios:

  1. Hola. Claro que te echo una mano. Pero no entiendo eso de que te ha desaparecido la doble. Vuelve a hacer estos pasos y conseguiras de nuevo una doble sidebar.

    Si no te funciona con estos pasos avisame.

    ResponderEliminar
  2. hola, una consulta, en mi blog tengo varias listas de enlaces en ambas sidebars, y hace poco los links de ambas listas se han centrado y yo las keria hacia la izquierda. Podrias ver que puede ser? este es mi blog:

    http://itaka-music.blogspot.com/

    ResponderEliminar
  3. Hola EmmaX. Para alinear textos a la izquierda debes ponerlos asi:

    <p align="left">aqui el texto a la izquierda</p>

    ResponderEliminar
  4. hola amigo muy buena explicacion. COMO PODRIA CREAR ESTE TRUCO PARA LA SIDEBAR DE ARRIBA EN VEZ DE LA DE ABAJO.

    xq quisiera colocar anuncios AdSense al principio de mi blog. y no me sirven colocarlos debajo.

    no se si me explique bien, de ante mano gracias..!!

    ResponderEliminar
  5. Hola Martin. Gracias por tu visita. Pues es bien sencillo. Debes poner los codigos del paso 5) y 6) antes del codigo del paso 4). Tendria que quedarte asi:

    #sidebar-wrapper-nueva {
    width: 300px;
    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 */
    }

    #columna-izda {
    width: 48%;
    float: left;
    }
    #columna-dcha {
    width: 48%;
    float: right;
    }

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

    Al igual que tendrias que hacer con los codigos del paso 9) y 10). Debes poner el 10) antes del 9). Deberia quedar asi:

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

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

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

    ResponderEliminar
  6. no me salió tu esplicación... lo hice varias veces... y al pegar el último paso siempre me dio error... creo que el último paso son dos códigos no? uno encima de section y otro encima de div

    No? voy a probar

    ResponderEliminar
  7. Hola Luna. El paso 10) son dos codigos que hay pegar despues del codigo del paso 9)

    Prueba de nuevo porque tiene que funcionarte.

    Un saludo y gracias por tu visita.

    ResponderEliminar
  8. Hola intente varias veses hacer los pasos pero me sale los siguientes errores .

    1-Declaración de variable no válida en máscara de página: La variable se utiliza, pero no está definida. Información: endSide


    2- no me deja hacer el paso 9 y 10
    ya que el codigo de mi plantilla se ve distinto

    < div id ='sidebar-wrapper'>
    < b :section class='sidebar' id='sidebar' preferred='yes'>
    < b widget id='Followers2' locked='false' title='Seguidores del blog' type='Followers'


    le saque algunas cosas ya que no me dejaba postear
    bueno eso espero me ayudes

    ResponderEliminar
  9. Hola Lunatika. Chequea los pasos que los copies todos en su sitio correctamente. Ahí puede estar tu fallo. Respecto a lo segundo que comentas en < div id ='sidebar-wrapper'> busca en donde esté < /div > y pones el código del 10) allí.

    Cuéntame si lo arreglaste. Saludos.

    ResponderEliminar
  10. Hola bueno intente lo que me has dicho pero no me resulto yo creo que es por la plantilla mira aca te dejo mi plantilla para que la veas para ver cual es el problema la verda que siempre ando moviendo cosas en la plantilla agregandole cosas pero esta vez es la primera vez que no me resulta :/ no se por que si he seguido los pasos correctamente

    bueno espero me ayudes

    Link directo :http://dl.dropbox.com/u/2825623/forevergantz%20plantilla%20buena.xml

    ResponderEliminar
  11. Hola Lunatika, he modificado el último código. Prueba ahora y me comentas. Tiene que funcionarte ahora sí o sí. Saludos ;D

    ResponderEliminar
  12. bendiciones.. me sirvioo de mucha ayuda...

    ResponderEliminar
  13. Me alegro que te haya funcionado Dicipulo. Un saludo y gracias por comentar.

    ResponderEliminar
  14. Gracias -Lunatika-. Me alegro que te haya servido. Un saludo y bienvenida al blog.

    ResponderEliminar
  15. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  16. Hola, decirte que es muy buena el articulo, parece sencillo con la explicacion que das, pero me ha surgido un problema, en el paso 3 dices de buscar Hola, una explicacion bastante buena pero tengo una pequeña dificultad,en el paso 3 comentas de buscar #sidebar-wrapper (tecleamos Ctrl + F para buscar más rápido), pues no lo encuentro, alguna sugerencia, he probado con todo, solo con sidebar, solo con wrapper y nada.
    Gracias de antemano

    ResponderEliminar