-->

viernes, 16 de marzo de 2007

Añadir una segunda columna en Blogger

A petición de El buhonero venezolano, os ofrezco un tutorial con el que podreís agregar una segunda sidebar o columna a vuestro blog.

Antes que nada, tened claros unos conceptos:

#outer-wrapper - Define el blog entero.
#main-wrapper - Define la columna principal.
#sidebar-wrapper - Define la sidebar.

Para insertar una nueva columna necesitaremos agregar algunos códigos además de hacer algunas modificaciones en el blog. Este tutorial resulta para las siguientes plantillas de Blogger:
Todas las Minima (Dark, Blue, Ochre, Lefty, Stretch, Lefty Stretch), Denim, y Dotsdark.


1. Accedemos a Plantilla->Edición de HTML. Una vez allí buscamos lo siguiente (podeis buscarlo pulsando CTRL+F y escribiendo lo que querais buscar):

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

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

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


2. Tendremos que modificar el width (ancho) del #outer-wrapper, el width (ancho) del #main-wrapper y el width (ancho) de la #sidebar-wrapper, para poder agregar la nueva columna. Además hay que agregarle un margen hacia la izquierda (margen-left) para que haya un espacio entre la nueva sidebar y la columna principal.

Por ejemplo:

#outer-wrapper {
width: 750px;
...
}
#main-wrapper {
width: 400px;
margin-left: 20px;
...
}
#sidebar-wrapper {
width: 150px;
float: right;
...
}

3. Después de haber modificado el ancho del blog entero, de la columna principal y de la sidebar, agregamos el código de la nueva sidebar (lo que esta en rojo) después de:

#sidebar-wrapper {
width: 150px;
float: right;
...
}

#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}


4. Ahora necesitamos hacer algunos cambios en el cuerpo de la plantilla. Después de <div id='content-wrapper'> agregais lo siguiente:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>


5. Para ver los cambios haceis clic en Vista Previa y si creeis que habeis hecho bien las modificaciones, simplemente clic en Guardar Plantilla.


Fuente: http://ayudaparaelblog.blogspot.com/

33 comentarios:

Iseekyou dijo...

Hola, gracias de verdad por tu tiempo y ayuda.... no me sirvio, pinso que debido a que mi plantilla es otra (Blogger Template Style
Name: Rounders 4
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 27 Feb 2004
Updated by: Blogger Team)
Pero no se perdio tu esfuerzo.. con revisar, copiar y pegar lo q pones aqui, y otras cosas creeme he aprendido cosas nuevas... llevo un cuaderno donde anoto estos ensayos y me sirve como borrador de consulta... no me importa esperar, tampoco es para salir corriendo... gracias de nuevo... salu2

Chispes dijo...

Te ha quedado bien....pero quizas deberias ensanchar las columnas y el titulo principal. No crees?

Nicolás Dobson dijo...

el codigo funciono a la perfeccion, le hice unas modificaciones en los tamaños, por un motivo de estética, pero me quedó todo la raja

Nicolás Dobson dijo...

gracias de nuevo... te agradecí en mi última publicación...
saludos desde Chile

In dijo...

Hola efecinco,
Ya te he escrito antes. En esta ocasión te escribo debido a que puse en práctica este tutorial, y me fué imposible que me quedara bien. Obviamente se colocan las dos columnas sólo que la que va del lado derecho se va hacia al final del blog. No sé porque. Guarde todo lo extra que tenía en el blog y solo dejé los archivos a ver que pasaba, y nada.

He intentado instalando la minima de 3 columnas y es imposible.

Mi blog es este http://simplemente-in.blogspot.com/, lo dejé tal como me ha quedado para que lo puedas ver.
De todos modos te he enviado por mail mi plantilla a ver que opinas.
Agradezco tu ayuda.
Saludos,

Anónimo dijo...

quiero hacerlo pero aun no me he atrevido. de todas maneras, lo que quería consultar, ya que hablamos de margenes etc, es como puedo dejar más espacio entre lo que es la cabecera y el principio de las entradas.

Gracias efecinco

Un abrazo

melanista dijo...

Busca esto en tu plantilla:

/* Posts
---------------------
*/
h2.date-header {
margin:1.5em 0 .5em;

Y modifica el número 1.5. Si por ejemplo pones 2.5 se separarán más tus entradas de la cabecera.

Si quieres que tmbn se separen de la cabecera la columna, para igualarla con las entradas busca esto otro y modificalo con el mismo valor que pusiste para las entradas:

/* Headings
-------------------
*/

h2 {
margin:1.5em 0 .75em;

Espero que te sirva de ayuda. De todas formas si me das la dirección de tu blog me será más fácil ayudarte.
Saludos! ^^

Anónimo dijo...

eres un makina!!! me ha quedado perfecto
Muchiiiiiiiiiiiisimas gracias!!!
Te he puesto el blog para que veas a lo que me refería.
Por cierto... y para bajas el sidebar y alinearlo desde la derecha?
Disculpa por la lata pero es que acabamos de abrir el blog y ya te puedes imaginar como es

Gracias miles efecinco

Administrador dijo...

Muy buena ayuda! me resultó todo casii perfecto... por más que he intentado.. no he podido cambiar el color de fondo de las columnas!... cómo lo puedo hacer? para que la central quede blanca y las laterales.. mm.. nosé.. cafe claro...

estos son mis blogs

www.embalados.cl
MASBEATLES.blospot.com

saludos!

NightHawk dijo...

Saludos, gracias por el dato de la tercera columna, estuve como loco buscando y probando, hasta que encontre esta solución

probando y probando pude estirar más así que quedó como 200-500-200 con 15px de separación en izq y derecha del principal.

http://tanoge.blogspot.com

loquero dijo...

gracias...pero aun no he podido agregar la sidebar....bueno, que se le va a hacer ...

http://rutaalinfierno.blogspot.com/

Anónimo dijo...

se agradece tu ayuda...me ha sido muy util todo.....




nota: si quieren ganar algo de dinero visiten mi blog...http://facilcash.blogspot.com/

Lady Ruth =) dijo...

huy gracias quedo de maravilla, aunque me gustaria saber como hacerle con otras plantillas, o cambiarle los colores a las columnas bye

FJCS666 (EV-II) dijo...

Pues no pude

Anónimo dijo...

te agradezco enormemente tu ayuda.
revise por lo menos 13 pagina que enseñaban a hacerlo y nunca pude siempre falto alfo.
te lo agradezco mucho mucho.

hice un blog solo para probarlo asi es intentaré aplicarlo al mio.

que Dios te bendiga

Alice dijo...

muchisimas gracias consegui mi tercera columna sin ningun problema lo explicas muy bien, un saludo,
alice

OrO dijo...

no me acaba de quedar bien
como se pude hacer mas estrecho el color gris de los dos lados del blog??

Jaume Solé dijo...

Si modifico la plantilla para incluir una nueva columna, dejo de poder utilizar el dissenyo de plantillas de bloger?

Es decir, a mi me va muy bien el formato de plantilla, donde añado los las cajas segun crea, imagenes, html, etc.. yu las muevo segun me interese. Si mofdifo la plantilla para meter una tercera columna pierdo esta posibilidad.

Anónimo dijo...

He hecho todo a la perfeccion!!!
La unica pega es que al crear las 3 columnas, la imagen que tengo en el HEADER se me ha quedado pequeña y sobre el lado izquiedo!!
O sea no ocupa todo el ancho del titulo!!
Eso como se modifica???

Gracias

jbastida21@yahoo.com.ar

Angela franco dijo...

muchas gracias!!!

Unknown dijo...

estuve buscando un buen rato hasta que di con ete tutorial muy bueno me sirvio bastante gracias amigo
muchas gracias

jujosacaplus dijo...

esta muy explicita tu ayuda, me ayudo a la primera, solamente que en vez de que aparezca el profile en la nueva colunmna quiero que apareza Etiquetas, como le puedo hacer???? ayuda!!!!! y gracias de antemano...

BLOGMASTER dijo...

gracias,,gracias,,,clone mi sidebar y la renombre a newsidebar,,,el kit era donde colocar el segundo codigo para la denim strecht.
y tu explicacion es la buena,,x fin lo consegi,,,gracias.
el resultada aki
http://desarrolloweb-josemanuel.blogspot.com

Grieguis dijo...

Bueno despues de mirar miles de blogs con ayuda para la tercera columna y sin tener exito con ninguno, al fin lo he logrado con tu ayuda.
solo cambie a pesar de no entender nada de codigo, el ancho de las columnas hasta que quedo como a mi me gustaba. fue facil gracias a tu clarisima explicacion, por eso me anime a dar un paso mas sola.
miles de gracias

Roger Jovani dijo...

Muchas gracias,
con un poco de retoques me ha funcionado.
Resultado:
http://birdsandscience.blogspot.com/
Roger.

Admón. Web dijo...

Eso es falso, adema es copia de otro blog; sean originales y no engañen

Juanjo Martínez dijo...

Perfecto, muchas gracias por compartir la información

Anónimo dijo...

waaa no e podido es ya intente todo y no e podido noce si es la plantilla o otracosa pero porfavor ayudame este es mi blog
cinder-kun.blogspot.com

Juan Perez Betancourt dijo...

oye viejo un saludo y felicitaciones por tu blog. acudo aca por un problemita que se me presento al momento de aplicar el codigo puesto por ti para agregar una segunda sidebar. la aplique y me resulta esto:
El código ID del nuevo widget "NewProfile" no es válido para este tipo: Profile. me esplicas el porque.?
si la plantilla que uso esta dentro de las especificaciones que planteastes, es minima dark. espero me puedan brindar la ayuda. gracias.saludos desde venezuela.

Anónimo dijo...

hola! Intente pero no me funciono, quizas porq mi plantilla noes de blogger? La descargue de pyzam
Me pueden ayudar? Gracias

Raf dijo...

Q tal! Si me funciona pero me aparecen las dos columnas en el mismo costado, el derecho. Cómo hago para que las columnas queden: una columna en la izquierda, la entrada en el centro y la otra columna en el costado derecho? (como en tu blog)

Anónimo dijo...

No me sirvio :(

Prom21-TheBest dijo...

Yo tengo una plantilla del blogger gmail pero no he podido crear la tercera columna vertical. Alguien me puede ayudar?

 
Copyright © 2007 | Diseñado por BlogyWeb