Ya agregamos columnas a la derecha, a la izquierda, dobles, simples, las mezclamos, podemos seguir poniendo todas las que se nos ocurra pero la realidad es que solemos ser menos exquisitos y nos limitamos a una o dos así que simplifiquemos el proyecto, hagamos de cuenta que empezamos con el Modelo original de la Plantilla Mínima y queremos agregar sólo una segunda sidebar.

Ampliamos el ancho general de outer-wrapper, header-wrapper y footer-wrapper a 980 pixeles y el de main-wrapper a 560 pixeles exactamente igual que en el primer tutorial y ahora disponemos de los 390 pixeles restantes para dividirlos en dos sidebars.

Por defecto, sólo tenemos una columna en la plantilla así que le agregamos el código de la segunda, copiándolo y pegándolo:
<div id="sidebar-area">
<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes">
.......
</b:section>
</div>
<div id="sidebar-nueva">
<b:section class="sidebar" id="sidebarnueva" preferred="yes" />
</div>
</div>
Y el CSS que sólo es una variación de los anteriores:
#sidebar-area {
float: right; /* flota a la derecha */
width: 390px; /* es ancha porque contendrá las dos sidebars */
}

#sidebar-wrapper { /* es la original */
float: right; /* flota a la derecha */
margin-left: 5px; /* margen izquierdo */
overflow: hidden;
width: 190px;
word-wrap: break-word;
}

#sidebar-nueva { /* es la nueva */
float: right; /* flota a la derecha */
margin-left: 5px; /* margen izquierdo */
overflow: hidden;
width: 190px;
word-wrap: break-word;
}
Guardamos y ya está, tenemos dos sidebars, una al lado de la otra.

Tal como lo hemos agregado, la original (sidebar-wrapper) será la que está más a la derecha del blog; si quisiéramos que fuera la otra, deberíamos invertir el orden del código:
<div id="sidebar-area">
<div id="sidebar-nueva">
<b:section class="sidebar" id="sidebarnueva" preferred="yes" />
</div>
<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes">
.......
</b:section>
</div>
</div>
Para invertir la posición y colocar las sidebars a la derecha basta invertir la flotación de main-wrapper y de sidebar-area:


Y bueno, sí, ya sé, falta una tercera opción, nos gusta complicarnos la vida y queremos poner una a la derecha y otra a la izquierda. Para eso, debemos cambiar el esquema, olvidarnos del contenedor sidebar-area y hacerlas flotar en diferentes direcciones.


Pero, aquí debemos entender algo, los navegadores van "dibujando" la página web de manera secuencial, es decir, crean los famosos rectángulos en un cierto orden, leyendo de arriba hacia a abajo y la flotación sólo es una propiedad. A ver si puedo mostrarlo, veamos este código:
<div id="main-wrapper">
... el área de posts ...
</div>

<div id="sidebar-wrapper">
... la sidebar ...
</div>
main-wrapper puede flotar a la derecha o a la izquierda, lo mismo puede ocurrir con sidebar-wrapper. Es más, ambas pueden flotar hacia el mismo lado y, en todos los casos, el elemento que contiene los posts se mostrará primero, a la izquierda o a la derecha de la pantalla pero primero, cuando se complete su carga se mostrará la sidebar.

Si se invierte el orden, la sidebar se cargará primero pero el resultado final, será el mismo.

<div id="sidebar-wrapper">
... la sidebar ...
</div>

<div id="main-wrapper">
... el área de posts ...
</div>
Cuando colocamos dos elementos flotantes, uno hacia la derecha (right) y otro hacia la izquierda (left), todo es sencillo de entender pero, cuando hacemos que ambos floten en la misma dirección, se nos queman lo papeles y hay que ponerse a pensar y eso es justo lo que no hacen los navegadores y tampoco deben hacerlo.

El navegador lee la instrucción que le dice, cree un rectángulo de tal dimensión a la izquierda de la pantalla. Obedientemente, lo hace y luego, se olvida del tema así que sigue con la siguiente instrucción que le dice: cree OTRO rectángulo de cierta dimensión y colóquelo a la izquierda ¿de la pantalla? No, a la izquierda del espacio que le dejó el rectángulo anterior y si no entra, pafffff lo coloca debajo.

En resumen, si dos elementos flotan a la izquierda, el primero aparecerá a la izquierda pero el segundo se mostrará a la derecha. Si dos elementos flotan a la derecha, el primero aparecerá a la derecha y el segundo a la izquierda ¡Cosa de magia!

Así que, para poner una sidebar a cada lado de los posts, deberíamos reordenar el código:
<div id="sidebar-wrapper1">
<b:section class="sidebar" id="sidebar1" preferred="yes">
.......
</b:section>
</div>

<div id="main-wrapper">
<b:section class="main" id="main" showaddelement="no">
<b:widget id="Blog1" locked="true" title="Entradas del blog" type="Blog"/>
</b:section>
</div>

<div id="sidebar-wrapper2">
<b:section class="sidebar" id="sidebar2" preferred="yes">
.......
</b:section>
</div>
Y el CSS:
#sidebar-wrapper1 {
float: left; /* flota a la izquierda */
overflow: hidden;
width: 190px;
word-wrap: break-word;
}

#main-wrapper {
float: left; /* flota a la izquierda */
margin: 0 10px; /* la separación entre los bloques */
overflow: hidden;
width: 560px;
}

#sidebar-wrapper2 {
float: left; /* flota a la derecha */
overflow: hidden;
width: 190px;
word-wrap: break-word;
}
La separación entre los tres rectángulos lo controlamos con el margen de todos ellos o, como en el ejemplo, con la propiedad margin del rectángulo central, el que contiene los posts.

REFERENCIAS:
  • Modificando las plantillas (Tutorial 1: Anchos)

  • Modificando las plantillas (Tutorial 2: Widebars)

  • Modificando las plantillas (Tutorial 3: Sidebars)

  • 71 comentarios:

    PedroX  

    Hola JMiur. Esta vez te voy a pedir que me ayudes por favor, con algo que quiero hacer desde hace mucho tiempo pero no puede creer que siempre haya un problema!!

    Se trata de que quiero colocar en mi blog el "LightWindow". Pero primero quise probar con el "SlimBox" que me parecio mas sencillo.. Lo probe en mi blog de pruebas (valga la redundancia), y me funciono PERFECTAMENTE, entonces lo aplique a mi blog y Perfecto, luego hice algunos cambios en el archivo slimbox.css, es decir cambie las imagenes (next, prev y close)... Todos estos archivos alojados en SkyDrive Live.!

    Todo iba perfecto hasta que se me prendio el bombillo de probarlo en IE7.. Cuando entro en el blog me dice:
    "Internet Explorer no puede abrir el sito http://worldreggaeton.blogspot.com/.
    Operacion Anulada
    "

    Y enseguida supe que era eso, entonces tuve que quitarlo porque LAMENTABLEMENTE La mayoria de los visitantes de mi blog todavia usan Internet Explorer :s
    ------------------------------------------------------

    Visto esto, quise probar con el Gran "LighWindow", lo aplique en mi blog de pruebas, Guarde los cambios en la Plantilla y cuando le doi a VER BLOG.. ¡Se Clava la PC!.. No respondia ningun programa, le daba a CTRL+ALT+SUPR y nada.. Tuve que reiniciar la PC y luego entrar otra vez a firefox, y cuando abria el blog de pruebas: LO MISMO y a reiniciar otra vez!!

    POR FAVOR. ME PODRIAS DECIR A QUE SE DEBE TODO ESTO??
    ME PODRIAS AYUDAR??
    QUE ES LO QUE PASA??

    Saludos! Y Espero que me Ayudes con esto!! ;D (y perdona que haya escrito tanto)

    Responder
    PedroX  

    Bueno.. Otra vez Yo.. Todo lo que escribi arriba no valio la pena porque ya lo solucione!! Me puse a leer TODOS los comentarios en el Post de "LightWindow" y encontre la solucion.. Subi los archivos a Geocies de Yahoo, Gracias a Dios que tenia una cuenta Yahoo! Lo probe en Firefox y en IE y funciona :D.
    Lo que aprendi de esto es que en el blog tienes todo, lo que hay es que buscar antes de preguntar!!

    Un Saludo!!

    Responder
    Anónimo  

    J está bárbaro que nos dés estas informaciones, algunos ya lo saben, otros cambian la plantilla por otra, pero para los que nos hemos animado a destrozarla, nos vienen de rechupete!!! tus explicaciones...saludos!!!

    Responder
    no  

    Te va quedando muy bueno el diseño!
    yo renové todo el header y algunas cositas mas...

    después fijate si queres y decime si está bueno :D

    (y si tenes algún consejo decime nomas ;) )

    Nos vemos!

    Responder
    JMiur  

    PedroX: buscar es fácil, el problema es econtrar algo :D Me alegra que se haya arreglado.

    Graciela: esa es la idea, destrozar un poco la plantilla :D

    Marcos: todo está quedando perfectamente bien.

    Responder
    PedroX  

    Si.. Es verdad.. Y ahora vengo otra vez con lo mismo. (DIOS PORQUE SIEMPRE HAY UN PEQUEÑO PROBLEMA)

    Funciona bien, pero algunas veces NO FUNCIONA :'(........
    Cuando abro el video, se abre en TODA LA PANTALLA, como si dejara de funcionar el script. :S..

    Podrias Decirme cual es el problema??
    Este es el Blog donde lo tengo aplicado: http://worldreggaeton.blogspot.com/
    Como ya dije, los archivos estan alojados en Yahoo Geocites!! Ayudame Poor Favorrrrrrrrrrr

    Responder
    JMiur  

    Pedro:

    Hasta donde logro ver, el script se carga pero, eso de que a veces no funciona puede deberse a que es necesario que la página se cargue por completo para que este tipo de script sea accesible.

    Por ejemplo, en este momento, el mapa de whos.amung.us tarda muchísimo en cargarse y si eso ocurre con varias cosas a la vez, es posible que Prototype no funcione y por lo tanto, al hacer click se muestre la pantalla completa y no la ventana modal ya que aún no se ha ejecutado.

    Responder
    PedroX  

    Bueno si el mapa es un problema entonces tendre que quitarlo!! Otra cosa que hice fue quitar el Script de Entradas Ampliables que ya no me gustaba xD!!
    Y tambien cambie los codigos de LightWindow: prototype y scriptaculous por los que ofrece AJAX Libraries API de Google..

    Ojala que con esto se cargue mas rapido y funcione bien!!
    Saludos y Perdona que moleste tanto!! Lo que pasa es que esto lo he querido hacer siempre y no habia podido!!

    Responder
    JMiur  

    No sé si ese es el problema o si sólo se trataba de una demora circunstancial. Lo cierto es que si la página no está cargada, el script no funcionará.

    Lo del cambio me parece bien, es lo que uso actualmente y parece ser mejor en cuanto al tiempo de carga ya que Google cachea esos scripts así que el acceso, a la larga, es más rápido.

    Responder
    Anónimo  

    Estos posts están muy buenos.

    Saludos amigo

    Responder
    Anahí  

    No, gente, yo para seguirle el tren ¡tengo que hacer otro blog! ¡¡basta, basta, basta!!
    Salú.
    (es una exteriorización de mis diálogos internos)

    Responder
    Admin  

    Anahí, te sentís bien querida ja jaaa :D

    JMiur te puedo hacer una pregunta que no tenga que ver con blogs? Es sobre informática (creo :o) Dijiste que si??
    Ahh que bueno... Bueno ante esta predisposición tuya te cuento; resulta que por esas cosas de la estupidés humana, perdí el Office, si, si entendiste bien el Office, de limpita que soy nomás ja jaaa :)
    Bueno no podía abrir ningún doc de Word, Excell, Pps, etc.
    Alguien de buena voluntad, me pasó un enlace del OpenOffice.org, me lo bajé... pesadísimo, y ensima no lo se usar, no entiendo nada, conclusión: lo eliminé. :o
    Otra persona de buena voluntad me pasó el WORDVIEW, XLVIEW, y el otro que abre los Pps.
    Esos son livianos y mi pc se los banca, el que abre los word funciona bien, el del excell también, pero el de los Pps no anda, no los puedo abrir, otra conclusión: lo eliminé, mi pc no tiene mucho espacio en el disco y no puedo acumular cosas que no funquen. :O
    Ahh también traté de bajarme en Office de Bill pero es re pesado y no me va.
    Bueno esa es la triste historia.. no puedo abrir esos bonitos (puajjjj) Pps que me inundan las casillas de correo. :D
    Pero hay cosas que si quiero ver y no puedo, se te ocurre que cosa puedo hacer??

    Responder
    atajar  

    hola JMiur , tengo un problema ,vamos a ver estuve poniendo un script del blog de gem@ para poner imagen de perfil a los comentarios ,lo hice todo tal cual indicaba ,el resultado era que no funcionaba y entonces decidí quitarlo y mi sorpresa! que no deja quitarlo cuando lo intento la plantilla da error ,se lo comente a Gem@ y ella me dijo que le mandara la plantilla y alaaa otra sorpresa ,Gem@ tampoco puede quitarlos ,vamos que tengo un rollo liado ,así que te pido por favor si me puedes echar una ayuda pues no se a quien acudir graciasss y perdona mi gran torpeza , no se si me he explicado bien

    Responder
    Gem@  

    En realidad uno de los script si se ha podido extraer, el otro le comenté que lo mueva de sitio por ejemplo antes de </body> y una vez ahí que intente sacarlo.
    El script es este

    Responder
    JMiur  

    Claudio: intentaremos seguir aunque no seé para que lado :D

    Pués sí, Anahí, yo recomeindo abrir un blog nuevo y probar ahí sin temor a destruirlo; es lo mejor y además, te doy un secreto ... hay que destruir blogs para aprender, es parte inevitable del proceso :D

    K_nelita:
    En general todo ese tipo de soft es pesado. Si se trata de VER archivos de Power Point, hay un soft de Microsoft que es un visor y sólo pesa 2 megas. Se instala y nada más, queda asociado así que si haces click en cualquier archivo de PP, se muestra perfecto. Lo podés descargar desde acá. Se llama Microsoft Power Point Viewer 2003 y es lo que uso desde que tengo memoria :D

    Te respondería lo mismo que Gem@, envíame la plantilla y veremos el problema. Si pudo ponerse, puede sacarse, aunque sea, con dinamita :D

    Responder
    JMiur  

    Recuerdo el script, Gem@. Es raro que no pueda eliminarse. No sé si sale un mensaje de error o que ocurre. Debería verlo.

    Responder
    Admin  

    Gracias JMiur, tardé tanto en volver porque me quedé mirando presentaciones viejas ja ja :D

    Si, es liviano, lástima que no pueda usarlo como el original que yo tenía que podía extraer de las presentaciones los textos que me gustaban, con esto es solo verlas, no se puede hacer nada, y tampoco se pueden ver desde el correo directamente hay que bajarlas a la pc...

    Pero bueno, es lo que hay, mi pc no soporta mas nada, viene caminando en falsa escuadra, en cualquier momento me deja de a pie.

    Yo tenía el Office 2003, no entiendo porque cuando quise volver a ponerlo no pude, y eso que en realidad había perdido solo una carpeta del Office...

    Muchas gracias ;)

    Responder
    JMiur  

    También puedes usar Google Docs para verlos online.

    Responder
    Admin  

    Ahh si? No se como es eso, nunca lo usé... :o

    Responder
    JMiur  

    Si n orecuerdo mal, en el mismo GMail aprece al opcion de descargarlos o de abrirlos con Google Docs.

    Responder
    Admin  

    Ahh, si en Gmail lo vi lo de los docs, igual no se como se usa, igual podría probar pero yo recibo todo eso en hotmail, porque gmail empecé hace poco a usarlo y lo hago mas que nada para comunicarme con los blogs.
    Mi correo siempre fue hotmail, y allí me escriben todos mis amigos y conocidos.
    Ya veré que invento...

    Responder
    atajar  

    perdona pero este el tercer:$ comentario pues los otros no veo que salgan
    gracias JMiur y gem@ he tratado de copiarlo antes del body como ha dicho gem@ pero sigue dandome el mismo error,tengo la cabeza echando humo ,y no se si este script es el que no deja que me funcione el lightwindow

    Responder
    atajar  

    JMiur con tu permiso te mandare la plantilla a ver si das con el problema:$

    Responder
    JMiur  

    OK, acabo de recibirlo, vamos a ver si se resuelve el misterio.

    Responder
    JMiur  

    atajar:

    El problema es un tema de orden de la plantilla. Hay scripts colocados entre </head> y <body> que es una área que JAMÁS debe contener código. Lo mismo ocurre con algún script colocado inmediatamente después del <body>

    La solución es eliminar </head> y <body> y colocar esas dos etiquetas justo antes de:
    <!-- CONTENEDORES EXTERNOS DE TODA LA PAGINA -->

    Luego, borras normalmente y sin errores.

    De todas maneras, te enviaré por mail una copia del contenido de esa parte de la plantilla, con los scripts eliminados.

    Responder
    Unknown  

    Hola Jmiur, se me pasó la semana volando por eso no vine antes.
    Me gustó mucho esto de poner lo que va a la izquierda primero en mi caso las sidebar, se carga má ordenado, con tu explicación he podido entender más las partes del blog.
    Además me animé y con una plantilla que no es mía eso si cree un nuevo blog donde tengo mis creaciones :D

    Gracias, por esta explicación para futuros cambios :D

    Que tengas un lindo fin de semana ;) besos ronroneados

    Responder
    atajar  

    :D :D :D ALELUYAAAAAA! lo he podido quitar justo haciendo los pasos tal y como me has dicho ,eres un genio, pero mi pregunta ahora , cuando tenga que poner algún código que diga ponerlo antes de::: o después de..... ¿que pasaría?
    MILLONES DE GRACIASSSSS;) ;)

    Responder
    JMiur  

    Si te fijas en tu plantilla, sigue teniendo esas dos etiquetas: </head> y <body>, simplemente, las hemos cambiado de lugar.

    Cuando se dice poner algo ANTES de </head> lo pondríamos así:

    ....... aquí lo que haya que poner
    </head>
    <body>

    Si va despues de <body> sería:

    </head>
    <body>
    ....... aquí lo que haya que poner

    O sea, entre </head> y <body> no se pone nada ya que no existe, es el limbo, lo que esté allí no estará en el head ni estará en el body y eso es conflictivo.

    Por defecto, todos los scripts (salvo que se diga lo contrario, van en alguna parte entre <head> y </head>:

    ....... NUNCA AQUI
    <head>
    ....... AQUI
    </head>
    ....... NUNCA AQUI
    <body>
    .......
    ....... A VECES AQUI
    </body>

    ¿Se comprende?

    Responder
    JMiur  

    Pau:
    Me alegra que te hayas animado, una vez que lo entendemos, no es demasiado complicado :D

    Responder
    atajar  

    :D :D gracias si estuvieras en españa te invitaba un café :D ,he pillado tu explicación muy buena para los que no tenemos ni idea :$ , he estado buscando en tu blog como hacer esto de los comentarios al viejo estilo pero no encuentro la entrada ,me podrías orientar

    Responder
    atajar  

    ya la encontreee jejejejeje como tengo el día :$

    Responder
    atajar  

    JMiur comprobado si quito el scrip de gem@ ,se me borra la fecha de las entradas.

    Responder
    Iradai  

    Hola Jmiur, como se puede quitar el margen superior de la plantilla Rounder 3?

    Responder
    JMiur  

    El margen parece estar en el header:

    #header-wrapper {
    background:#335577 url() no-repeat scroll left top;
    color:#FFFFFF;
    margin:22px 0 0;
    padding:8px 0 0;
    }

    ahí, margin:22px 0 0; separa el header 22 pixeles de la parte superior, usa un valor menor y subirá todo el blog.

    Responder
    locura17gamez  

    genio, me qede en el tutorial 1, ninguna modificicación que hice en todo el puto blog me funciona, qeria pedirte ayuda. intente en firefox haciendo click derecho "ver codigo defuente" y copiarlo todo y ponerlo en mi plantilla de blog, pero sigue sin funcionar.., es mas me salta error.. necesito ayuda, qiero hacer un blog qe este copado con buenas imagenes y estilo tipo manchas de sangre o algo por el estilo, qiero saber bien como se hacer y luego hacerlo pero cada vez me sale peor. te dejo mi msn, espero no ser de gran molestia: laion_cj91@hotmail.com gracias

    Responder
    JMiur  

    Copiar y pegar el código fuente no funcionaría. Deberías decirme que es lo que no quieres hacer y no logras conseguir. Lo que veo hasta acá es la plantilla mínima con una sidebar derecha y otra izquierda.

    Dado el ancho total que has colocado en outer-wrapper (980px) y los valores de la sidebar izquierda y el main, la sidebar derecha no debería superar los 270 pixles de ancho y ahora dice 390.

    Es el único error que veo.

    Responder
    DexVastica  

    ya tengo mis dos barras
    ahora como puedo agragar un "gadget"??
    gracias

    Responder
    JMiur  

    Igual que si hubiera una. Desde la solapa Diseño, Elementos de la página.

    Responder
    DexVastica  

    jojojo
    gracias soy d lento aprendizaje
    estare leyendo con mas calma pra resolver
    mi problema
    gracias

    Responder
    DexVastica  

    gracias ya vi como
    :)

    Responder
    jesgo  

    Hay alguna forma de forzar a una sidebar colocada en la derecha para que no flote a la izquierda nunca?
    Saludos

    Responder
    JMiur  

    Si flota, flota. No hay términos medios. Lo contario de flotar sería posicionarla de manera absoluta pero, no entiendo cuál es la aplicación concreta de la pregunta.

    Responder
    EDUARDO  

    hola que bonito blog ya que nos sirve de mucha ayuda a los que nos empesamos en el mundo de los blog.
    Mira e estado intentando poner un segundo sidebar en my plantilla con este turorial pero no e podido. Te pido por favor que me ayudes ya que beo que sabes mucho de esto.

    My plantilla es blogy iplentilla

    http://blogandweb.com/plantillas-blogger/plantilla-blogy-iplantilla/

    e hecho todo pero no e conseguido poner un 2do sidebar te agradecere que me ayudes. Mi correo es tony_sanguino@hotmail.com.

    Felicitarte por tu blog

    Responder
    JMiur  

    Eduardo: Debería saber qué has hecho o ver una prueba para contestarte.

    Responder
    Mac Evans  

    Buenos Dias


    Quisiera ver la manera de ponerle una imagen de fondo a mi Blogger es todo lo que pido e leido muchos de tus tutoriales pero no e visto nada que me ayude si es que se puede en vdd me gustaria darle un toque propio

    Agradeseria mucho tu apoyo este es mi correo

    ivanglyeva@gmail.com

    este es mi BLog www.hibanz.blogspot.com


    De antemano gracias por la atencion prestada



    y te felisito por tu blog en vdd ayuda a mucha gente que no sabe como yo




    Saludos..







    Hibanz

    Responder
    JMiur  

    Hay nuchas formas y todo depende de lo que quieras hacer. Fíjate en esta entrada.

    Responder
    Eivan  

    Hola JM, soy k-nelita estoy tratando de modificar la plantilla Minima de mi hijo, ya lo hice antes con una mía, pero en este dichoso|: blog no me sale :S
    O mejor dicho me sale maaal, una sidebar es mas ancha que la otra a pesar de tener las medidas iguales, ufff hace mas de una hora que estoy con esto y no logro darme cuenta de donde está el error, porque obviamente lo hay :((
    Me darías una manito?? El blog es: PISANLOV
    Desde ya gracias ;)

    Responder
    JMiur  

    k-nelita:
    Es un error de sintaxis de esos que casi ni se ven. Dice esto:
    #sidebar-wrapper1 {
    .....
    width: 200x;
    }

    debería decir
    width: 200px;

    falta la letra p y por eso no anda.

    Responder
    Eivan  

    A ver... ya te digo si es eso, gracias ;)

    Responder
    Eivan  

    Era eso lo del tamaño de las sidebares Mil gracis pero... Hay un espacio a la derecha de la pantalla, como que no está centrado, lo viste?
    Eso como lo arreglo? Yo lo estoy viendo ahora con 800 x 600 tal vez con resoluciones mayores no lo notes...pero es como que está corrido hacia la izquierda, algún problema de margenes será?

    Responder
    Eivan  

    JM, le di un poquito mas de ancho a las sidebares y al main, pero igual hay un poco de espacio a la derecha, como le podría poner un margen o espacio entre el main y las sidebares? Mi hijo no quiere que sea muy ancho el espacio de los post, mas que eso no quiere, por eso yo creo que tendría que haber un poco de separación entre las sidebares y el main, que te parece?

    Responder
    JMiur  

    El blog está centrado, ese no es problema. Tiene un ancho de 980 pixeles y eso que ves "corrido" es justamente que la suma de las partes no cubre esos 980 pixeles sino 950 si no hice mal la cuenta. Son los anchos más los paddings o márgenes.

    Lo mejor es que coloques en sidebar-wrapper2 float:right; en lugar de float:left; y de esa manera, cada sidebar se apoyará en un lateral. entonces, verás como el main del centro puede ser ampliado, ya sea agregándole ancho o margen y ahí lo verás centrado.

    Responder
    Eivan  

    Gracias Genio JM!! Ya lo hice, queda bien contra los costados como me decís, ahora voy a sacar cuentas ;) no soy buena en matemáticas :o A ver lo de los margenes para que de todo bien, le puse 230 a cada una de las sidebares y 450 al main, el pibe (mi hijo) no lo quiere mas ancho el main ni las sidebares, (estoy haciendo un diseño a pedido :D ) como le aumento los margenes para que de bien la medida?
    La suma me da 910 y no se cuanto tengo de margenes y/o pading :S

    Responder
    JMiur  

    El margen que debes cambiar es el de main-wrapper. Dice:
    #main-wrapper {
    ...............
    margin:0 10px;
    }

    Algo así andaria bien y lo centra:
    margin:0 35px;

    Verificalo en Internet Explorer y Firefox. Si la sidebar derecha se baja, reducí el margen.

    Responder
    Eivan  

    PER FEC TO JMiur!! Ya te dije que sos un genio no?? Lo probé con FF,con IE8 y con Chrome y va bien con todos!!
    Vamos a ver que opina el dueño del blog cuando se levante mañana o hoy?
    Mil gracia por todas tus molestias!! ;)

    Responder
    JMiur  

    No es nada, k-nelita :)

    Responder
    MyAToP  

    :D quiciera saber un programa para hacer plantillas para blogger

    Responder
    JMiur  

    No creo que haya nada semejante, sólo podrías simularlas pero nada más.

    Responder
    Verys  

    hola, excelente tutorial :D, tenes algun tutorial para cambiar las imagenes del banner y todo lo demas :S ;)

    Saludos =)

    Responder
    JMiur  

    Verys: No sé exactamente qué quieres hacer.

    Responder
    Colitaz  

    eres un experto... este manual me ayudo a mover el sidebar a la posicion q queria... muchas gracias.. suerte en todo ;)

    Responder
    LUX VITAE - LUZ DE VIDA  

    FELICIDADES, FELICIDADES, FELICIDADES!!!!!

    Tienes un exquisito blog y tus consejos son EXCELENTES.

    Hace días que deambulo por diferentes páginas intentando crear la segunda sidebar, y todas las páginas incluían instrucciones complejas y con errores, una tras otra, una otras otra.

    En cambio, siguiendo tus consejos A LA PRIMERA he obtenido la solución. MADRE MÍA la de horas de sueño que he tirado a la basura con las otras pseudo-páginas de consejos...

    TE ESTOY MUY AGRADECIDO!!!!!!

    Te incluiré como blog recomendado en mi web: www.LuxVitae.com que está vinculado a un blog.

    GRACIAS.

    Miguel Ángel

    Responder
    Unknown  

    Blogger te da la facilidad de manejar los widgets dentro de las sidebars arrastrandolos hasta la posición que deseas, pero no siempre es así, hay alguna manera práctica de hacerlo?

    Responder
    JMiur  

    Cualquier widget puede ser movido o editado a menos que se indique lo contrario con locked='true' :

    <b:widget id='HTML1' locked='true' title='' type='HTML'/>

    Eso, en la pantalla de diseño; en el código HTML no hay restricciones así que sin expandir, buscas algo así (cualquier widget):

    <b:widget id='HTML1' locked='true' title='' type='HTML'/>
    <b:widget id='BlogArchive1' locked='true' title='Archivos' type='BlogArchive'/>

    Copias la línea, y la mueves a otra parte:

    <b:widget id='BlogArchive1' locked='true' title='Archivos' type='BlogArchive'/>
    <b:widget id='HTML1' locked='true' title='' type='HTML'/>

    Con eso, invertiras la posicion de esas dos del ejemplo.

    Responder
    Unknown  

    muchas gracias JMiur, ni las fiestas te paran xD Feliz nuevo año :)

    Responder
    Agustina M.  

    Recién descubro este blog que me pareció buenisimo y me re sirvió, pero tengo una duda, yo quería ponerle como imagenes al fondo del blog (he visto varios "tuneados" por el autor, con dibujos en el fondo y demás) no se si se entiende que es lo que quiero... Si se entendió y sabés como se hacen esas cosas, me explicas como es? Gracias :)

    Responder
    JMiur  

    Agustina:
    La pregunta es un poco amplia. Fíjate en esta entrada a ver si ayuda.

    Responder
    Emilie ~  

    Hola!
    Pues tengo una consulta (espero que me respondas a la brevedad :D)
    Pongo el codigo para hacer dos sidebar..
    Todo Ok, pongo los códigos, numeros, lo que sea donde corresponde..
    Pero voy a ''Vista previa'' o ''Guardar cambios'' y me sale un error!:

    No hemos podido guardar tu plantilla
    Por favor, corrige el siguiente error y envía la plantilla de nuevo.
    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "b:section" must be terminated by the matching end-tag "".
    --

    Porque sera?...
    me ayudas? :S

    PD: Muy buenas tus guias...sobre todo la primera que me funciono de maravilla xD

    Responder
    JMiur  

    espefica_13:
    El error que te indica puede ser el resultado de muchas cosas, una etiqueta mal cerrada, una comilla errónea. Si no logras detectarlo, envíame la plantilla por correo, esa que te da error, claro, y me fijo; suele ser algo simple de arreglar pero a veces, difícil de detectar.

    Responder
    wwe  

    oe amigo tu me podrias hacer una plantilla para mi blog pero de este modo http://img816.imageshack.us/img816/9297/miplantilla.png mi blog es este http://wwe-wwejefermar.blogspot.com/ mi msn es marcos_30_93@hotmail.com o si no alguien q conosca sobre estas cosas siquieres me suscribo a tu blog y publico todo lo que agas en tu blog en el mio ya amigo. Gracias amigo m arias un gran favor.

    Responder
    JMiur  

    No. No hago plantillas. Conozco gente que las hace pero, cobra por hacerlas. Es un trabajo como cualquier otro.

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR