Hace dias vi un truco muy bueno en el blog de
Rosa.
Me guardé
la dirección de la entrada en el blog de notas, a la espera del momento adecuado para probarlo.
Acabo de hacerlo y funciona perfectamente.
Es un truco ideal para poner en la columna lateral esas cosas que no nos caben en una sidebar normal.
Se trata de la widebar, lo que traducido a nuestro idioma sería la sidebar ancha.
Para ponerlo has de tener un blog con dos columnas laterales y tenerlas las dos en el mismo lado, pues se trata de añadir encima de las sidebars, una nueva sidebar, la widebar, con el ancho de las otras dos más la distancia que haya entre ellas.
Para colocarla, ante todo has de poner las dos columnas laterales juntas.
Eso se consigue cambiándole a una de ellas la posición en el CSS, así, si quieres que estén a la derecha, les has de poner a las dos float: $endSide; y ponerle a main el float en $start side, si no lo estuviera.
Si las quieres a la izquierda, las sidebars han de estar en $startSide y el main en $endSide.
Luego, has de bajar al sector del HTML y cambiar el código de una de las dos sidebars de sitio.
Si las quieres a la derecha, has de pegar el código de la que tengas encima del main, debajo.
Si las quieres a la izquierda, el de la que está debajo lo has de poner encima.
Hecho esto, haz vista previa, y si todo está en su sitio guardas.
Quizás tengas que modificar algo los margin de las columnas, para centrarlas, depende de como los tuvieras, pero una vez que todo esté en su lugar guarda de nuevo.
Y ya con todo en su sitio vamos a colocar la widebar.
Copia y pega este código en el CSS. (Yo lo he pegado, justo encima del código de las sidebars, ya que esta será su ubicación).
#widebar-wrapper {
width:468px;
float:$endSide;
border: 1px solid #000000;
padding-bottom:10px;
margin-top:10px;
margin-bottom:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#widebar {
width:468px;
padding:10px 0 5px 10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
El width lo has de poner basándote en las medidas de tu blog. (En este caso, las dos sidebars que tengo miden cada una 230px y hay 8px de margin entre ambas, de ahí el 468)
El margin top lo he colocado pues es el mismo margen que tengo en main, así quedan alineados.
Mira en cuanto está el tuyo y ponle lo mismo.
El borde, #000000, lo he puesto para que se vea algo antes de que le añadas algún elemento. Lo verás negro. Si quieres cambiarlo, mira como está escrita la variable en tu plantilla, y en lugar de eso pones $borderColor o $bordercolor.
Si prefieres que no tenga borde, en cuanto hayas añadido algo, borras la línea, pero espera que aún no hemos terminado.
Ahora has de añadir el código HTML de la widebar, de lo contrario no funcionaría.
Allí añades esto,
<div id='widebar-wrapper'>
<b:section class='sidebar' id='widebar' preferred='yes'>
</b:section></div>
encima de <div id='main-wrapper'>
Vista previa.
Si todo ha ido bien, verás un recuadro bordeado de negro encima de las columnas laterales.
Guarda plantilla y ya puedes colocarle lo que quieras.
Aquí puedes ver como queda.
