Cargando...
Meta microcosmos: Agregar una segunda sidebar
BIENVENIDO AL META!!!

Espero que algo de lo que encuentres en tu visita te sirva para mejorar y personalizar tu blog.
Para encontrar más trucos prueba con las pestañas situadas justo encima de estas líneas, usa el buscador de trucos que hay a la derecha o navega por las categorías que encontrarás en la sidebar bajo el título "Aquí encontrarás".
Si tienes cualquier duda, puedes preguntarme sobre lo que desees en un comentario e intentaré ayudarte lo antes posible.
Y si algo te ha sido útil, déjame igualmente un comentario y me encantará ver el truco implementado en tu blog!

Agregar una segunda sidebar

A partir de las explicaciones de Ayudaparaelblog es muy sencillo agregar una segunda sidebar en sólo 5 pasos; las explicaciones son para las plantillas Minima que son las que yo uso, porque al ser tan sencillas no se recargan tanto al ir añadiendo cositas como las decoradas.

Lo primero que hay que saber es que las plantillas tienen tres elementos principales:
#outer-wrapper - Define el blog entero. En la plantilla Minima sin modificar tiene un ancho de 660 px.
#main-wrapper - Define el cuerpo del blog, donde van las entradas. Ancho original de 410 px.
#sidebar-wrapper - Define la sidebar. Ancho original de 220 px.

Por tanto 410+220=630; como el ancho del blog entero es 660, os aconsejo que guardeis estas proporciones: cuerpo+sidebar+30=ancho completo.

Yo he añadido una segunda sidebar sin variar el ancho del cuerpo ni la primera sidebar. Como he añadido una sidebar de 200 px. (mas un margen de 20 px.) el ancho total del cuerpo será 410+220+200+20+30=880. Pero aquí hay que tener en cuenta las resoluciones de pantalla, ya que por ejemplo si la mayoría de vuestras visitas tienen aún un monitor de 600x800 no verán parte del blog.

Después de tanta disquisición, vamos al lío; es sencillo pero hay que ser cuidadoso y fijarse bien:

1.- Vamos a Plantilla/Edición de HTML y buscamos la outer-wrapper para modificar el ancho del blog entero. Teneis que buscar estas líneas:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
Y donde pone width: 660px; cambiarlo por la anchura total del blog, que en este caso va a ser 880.

2.- Si quereis la nueva sidebar a la izquierda del cuerpo del blog hay que añadir al cuerpo un margen a la izquierda que lo separe de la nueva sidebar. Para eso teneis que buscar las siguientes líneas:
#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 */
}
Y debajo de width: 410px; añadir la siguiente línea con el margen:
margin-left: 20px;

Si quereis la nueva sidebar a la derecha no hay que hacer este paso 2; luego añadiremos el margen en el paso 6.

3.- Añadimos la segunda sidebar justo debajo de la primera. Hay que buscar las líneas:
#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 */
}
Y justo debajo añadir el siguiente código:
#newsidebar-wrapper {
width: 200px;
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 */
}
Con esto la sidebar en principio quedará a la izquierda del cuerpo principal; si la quereis a la derecha luego la cambiamos en el paso 6.

4.- Para que la nueva sidebar se muestre hay que buscar las siguientes líneas:
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
Y justo debajo añadir el siguiente código:
<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.- Clica sobre Vista Previa y si te aparece la segunda sidebar a la izquierda del cuerpo principal con el perfil (que hemos incluido en la segunda sidebar para comprobar que aparece) clica sobre Guardar Cambios. Para eliminar este segundo perfil, ve a Plantilla/Elementos de página (allí comprobarás que sale la opción Añadir un elemento de página a la izquierda de Entradas del blog) y elimínala. Si arrastras a la sidebar izquierda cualquier elemento de la derecha o añades uno nuevo y clicas sobre Vista Previa comprobarás que aparece a la izquierda del cuerpo principal.

6.- Si deseas la nueva sidebar a la izquierda de las entradas sáltate este paso y ve directamente al siguiente. Si la deseas a la derecha, justo al lado de la sidebar original has de buscar de nuevo el código de la nueva sidebar, que era éste:
#newsidebar-wrapper {
width: 200px;
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 */
Y hacer dos modificaciones:
- donde dice float: left; cambiarlo por right
- debajo de width: 200px; añadir una nueva línea con el margen para separarla de la sidebar original; la línea que tienes que añadir es ésta:
margin-left: 20px;
Clica sobre Vista Previa y si te aparece la segunda sidebar a la derecha de la primera clica sobre Guardar Cambios.

7.- Y yo he añadido otro paso a las explicaciones de Andrés porque me gusta que la cabecera y el footer del blog sean de la misma anchura que todo el blog. Para cambiar la anchura de la cabecera volvemos a Plantilla/Edición de HTML, expandimos artilugios y tenemos que buscar las siguientes líneas:
/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Donde cambiaremos width:660px; por la anchura total del blog, 880.

Y para cambiar el ancho del pie buscaremos:
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Donde igualmente cambiaremos width:660px; por la anchura total del blog, 880.

Usamos la Vista Previa y si todo está bien guardamos cambios y ya tenemos dos sidebars!

21 comentarios:

Carol Crisosto dijo...

grax aprendi ahora me falta poner últimos comentarios saludos

Yo misma dijo...

De nada, carolonline! Espero haberte servido de ayuda.
Para los últimos comentarios yo uso el widget de Blogger Templates. Si quieres probarlo AQUÍ tienes las explicaciones. Suerte!!!

Gastón dijo...

muchas gracias... lo quise hacer con las indicaciones de andrés y no se xq no me salio pero lo hice con las tuyas y ya esta todo perfecto!!! muchas gracias!!!!
Si quieres ver como me quedo pasate por:
http://yorasta.blogspot.com/

Yo misma dijo...

Gastón, me alegro mucho de que todo saliera bien! Ahora mismo paso por tu blog para ver el resultado!

Cocalero dijo...

No sabes como te agradezco.
Me rompí la cabeza tratando de agregar la sidebar a la derecha, probé con todo lo que encontraba en internet y nada ma funcionaba.

Muchisimas gracias.

Este es el fruto de tu ayuda:
http://cocalero.blogspot.com/
(le tengo que hacer algunos retoques)

Saludos!

Yo misma dijo...

Cocalero, me alegro de que por fin hayas sido capaz! en realidad es un truco fácil aunque algo laborioso, pero si tienes cuidado no suele fallar!!!

anonimo dijo...

hola no puedo hacerlo por q subi una plantilla modificada promocual08.blogspot.com

Yo misma dijo...

Promocual, he estado mirando el código de tu plantilla y en principio no he visto nada que no te permita hacerlo. Inténtalo otra vez con paciencia y cuidado (antes haz un respaldo de la plantilla por si algo sale mal) y si aún no puedes dime qué es exactamente lo que te falla.

Anónimo dijo...

aaaahhh... por fin...

llebaba buscando to el dia y ninguna de las otras formas que encontre me funcionaba para ponerla a la derecha.

Gracias por esta ayuda.

Saludos!!

Yo misma dijo...

Adrian, de nada! Ya he visto que al final las has puesto las dos juntas a la derecha, queda muy bien! me alegro de haberte servido de ayuda.

†♦÷[--_Kuwabara_--]÷♦† dijo...

ahhhh tio gracias me agudaste un monton es mu facil vale por el gran aporte!!!!!! estare biendo tu blog a ver que mas puedo encontrar ;)

Yo misma dijo...

Faillent, me alegro de que te haya servido! Ya he visto en tu blog que tienes una a cada lado, queda muy bien. Pues nada, espero que encuentres algún otro truqui que te sirva ;)

Anónimo dijo...

hey bro como andas? hey no me ayudo para nada.. ni el tuyo ni cualquier otro tuto

siempre me da este error:

Por favor, corrige el siguiente error y envía la plantilla de nuevo.
The new widget id "NewProfile" is invalid for type: Profile

te agradeceria full si me puedes ayudar! gracias

Centro de Noticias Carnaval de Negros y Blancos dijo...

Hola. He intentado seguir tus consejos para incluir una segunda slidebar a mi blog en blogger, pero cuando llego al punto cuatro de vuestro tutorial y reviso vista previa sale una alerta de blogge que dice asi: "No se ha podido analizar su plantilla porque no está bien conformada. Asegurese de que todos los elementos XLM se han cerrado correctamente. Mensaje de error de XML: The element type "body" must betermined by the matching end-tag." No se mucho de este código html y quiero que me ayudes porfavor.

Gracias

Yhonny E. dijo...

Hola...he recorrido..toda la blogsfera.buscando el resultado que quiero.y ahora que lo consigo.me tapan los codigos las imagenes.el lapiz y la hijita..jejexD.nos e nada de codigos..peor me gustaria usar esa segunda sidebar de el lado izqueirdo en la web cristiana que pronto estare levantando con el poder de Dios.ya que le daria una excelente estetica a el blog.alguna persona que me pueda ayudar personalmente dejeme un mensaje a el siguiente soporte.el cual me llegara a mi correo.porfavor..os seriad e gran ayuda..mil bendiciones..cuidence mucho.y sigan asi!.se les quiere.gracias por su atencion

aqui os dejo elblog

Unknown dijo...

Hola, que tal!!!
Muy buen aporte, así como los que anteriormente han escrito en este espacio, yo también tenía problemas para colocar la sidebar con otras explicaciones, su explicación me ha parecido de lo más sencilla, gracias...

Goku el Super Sayayin dijo...

tengo este problema como lo soluciono The new widget id "NewProfile" is invalid for type: Profile

Goku el Super Sayayin dijo...

YA LO ARREGLE I EL PROBLEMA ES QUE SE CAMBIA newprofile por Profile2

Anónimo dijo...

¡Hola! Mira, yo lo que realmente quiero no sé si es una segunda sidebar. Lo que yo quiero es poder escribir a la izquierda de las entradas, pero sin que estas se rueden. Me gustaría mantener la sidebar de la derecha y el blog en sí como están, y simplemente poder escribir en lo que vendría siendo el margen de la derecha, porque se queda muy vacío y no me gusta como queda. Más o menos como tú, que al lado de la entrada has añadido detalles, donde pone "Guarda siempre una copia de la plantilla...". Eso es lo que yo quiero, poder escribir a la izquierda sin que se rueden el resto de las cosas, simplemente para rellenar ese hueco amplio. ¿Sabrías ayudarme?

Anónimo dijo...

Poder escribir en el margen de la izquierda, quiero decir. Me confundí

Tempi dijo...

¡Hola!

Después de seguir todos los pasos, al intentar guardar la nueva plantilla, tengo un problema y este es el mensaje que me dan:

El código ID del nuevo widget "NewProfile" no es válido para este tipo: Profile

¿Sabes por qué puede ser? Muchas gracias por ayudarme

Publicar un comentario

ENTRADAS MÁS POPULARES