lunes, enero 15, 2007

EL ORDEN DE LAS SIDEBAR

Para establecer el orden de las 'sidebar' en las plantillas de blogger no es suficiente con indicarle a la derecha o la izquierda en 'float', aunque también es necesario. Para que una 'sidebar' aparezca en la izquierda y otra en la derecha hace falta colocarlas en ese orden dentro de <div id='content-wrapper'>;, esto es: ¡sidebar 1', 'main' y 'sidebar 2'. Si queremos que aparezcan juntas las pondremos así: 'main', 'sidebar 1' y 'sidebar 2' o al revés si lo que pretendemos es poner primero las 'sidebar' y el cuerpo del blog a la derecha. Os dejo unos ejemplos:


template by xOsse

template by xOsse

template by xOsse

template by xOsse

Hacer esto es tan sencillo como ir a Edición HTLM (no es necesario expandir las plantillas) y buscar <div id='content-wrapper'>; una vez lócalizado el código lo único que hay que hacer es cortar y pegar la sidebar en el lugar que queremos que aparezca.

4 comentarios:

YannyRamz .- dijo...

Cool. Gracias. Asi se hace. Por que te sorprende que haya visto MAR ADENTRO?

Thanya dijo...

Hola, gracias por tus aportes son de mucha utilidad, pero lamento pedirte una explicacion a fondo sobre las sidebar... He intentado de varias maneras poner en mi blog dos sidebar una a la izquierda y la otra a la derecha, la verdad es que no se HTML, pero no creia que fuera tan dificil... a mi modo intente hacerlo con tu explicacion pero de igual forma me marca error en la plantilla... te dejo mi direccion de blog http://vida-serendipity.blogspot.com/ si no es mucha molestia para que me puedas explicar, gracias y te lo agradeceria mucho...

Azul dijo...

Buenas, sé que es un coñazo pero podrías explicar más detalladamente cómo se hace para tener una sidebar a cada lado.

No tengo ni idea de HTML l oque dificulta bastante las cosas.

Muchas gracias de antemano.

un saludo

xOsse dijo...

No hace falta saber mucho de HTLM:

Lo primero que debes hacer es crear la segunda sidebar (tengo un post que explica como), como verás es todo copiar, pegar y hacer pequeñas modificaciones.

Para ordenarlas debes fijarte donde pone float, en una sidebar ha de poner left y en la otra right.

#sidebar {
text-transform:none;
padding-text: 10px;
background-color: $sidebarBgColor;
color: $sidebarTextColor;
padding-left: ;
width: 18%;
float: center;
font: $bodyFont;
border-right:px dashed $mainTextColor;
border-left:px dashed $mainTextColor;
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 crear las dos sidebar también tienes que hacer cambios entre <body> y </body>, es decir, debes crear la segunda sidebar. Ahí tienes que ordenarlas en el orden que quieres que aparezcan: sidebar - main - sidebar

Si quieres ver un ejemplo puedes ir aquí: template b&r Thisaway blue