Sin categoría

Añadir una barra lateral (sidebar) en Blogger

Todas las plantillas disponibles a través del panel de control de Blogger disponen de solo una columna. Por eso, vamos a ver como podemos añadir una segunda columna, de manera que quede como puedes ver en este blog de pruebas.

El proceso es bastante sencillo pero requiere tocar varios elementos del código, así que para prevenir cualquier problema, lo mejor es que primero hagas una copia de seguridad de la plantilla. Lo puedes hacer en “Plantilla” -> “Edición HTML”.
Una vez guardado empezaremos a editar la plantilla.

Vamos a suponer que estamos trabajando con una plantilla cuya barra lateral esté a la derecha. Entonces en “Edición HTML”, de nuevo, nos vamos a la sección “Editar plantilla”.

Lo primero que tenemos que hacer es cambiar el nombre a la antigua barra lateral, para poder identificarla correctamente:

Buscamos esto:

<div id=’sidebar-wrapper’>
<b:section class=’sidebar’ id=’right-sidebar’ preferred=’yes’>

y lo cambiamos por esto:

<div id=’right-sidebar-wrapper’>
<b:section class=’sidebar’ id=’right-sidebar’ preferred=’yes’>

Esa etiqueta tiene un elemento CSS asociado, así que también tenemos que cambiarlo:

En la parte superior del recuadro “Editar Plantilla” buscamos lo siguiente:

#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 lo cambiamos por esto:

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

Puedes realizar una vista previa de la plantilla y comprobar que se ve bien.

El siguiente paso es añadir la otra barra lateral, la izquierda en este caso.

Primero vamos a añadirla en la plantilla y después crearemos el CSS con sus propiedades.

Debes localizar el siguiente trozo de código.

<div id=’content-wrapper’>
<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>

Una vez que lo tengas localizado debes añadir entre <div id=’content-wrapper’> y <div id=’main-wrapper’&gt lo siguiente:

<div id=’content-wrapper’>
<div id=’left-sidebar-wrapper’>
<b:section class=’sidebar’ id=’left-sidebar’ preferred=’yes’/>
</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>

Pero claro, no hay ninguna propiedad definida para esa etiqueta así que tendremos que crearla:

En el mismo sitio donde antes modificamos el nombre de la barra lateral derecha puedes añadir lo siguiente debajo de #right-sidebar-wrapper:

#left-sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

Bien si ahora realizas una vista previa verás que una de las columnas se desplaza hacia abajo. Eso es debido a que el div que las contiene no es lo suficientemente ancho. Por eso tenemos que ampliarlo.

Busca lo siguiente:

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

Debes modificar el 660 por 860, de manera que quede asi:

#outer-wrapper {
width: 860px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Por otro lado también puedes modificar la cabecera para que su ancho coincida con el nuevo ancho del contenido. No obstante tendrás que tener en cuenta, si tienes una imagen, que el nuevo ancho modificará su posición o, simplemente, no cubrirá todo.

Deberías cambiar esto:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Por esto:

#header-wrapper {
width:860px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Una vez modificado todo, guarda la plantilla y ve a “Elementos de página”, verás que ahora tienes una nueva columna a la izquierda. Sólo te queda añadir contenido como lo haces habitualmente

About the author

Dimas

View all posts

47 Comments

  • ME SALIÓ ESTE TEXTO:

    No hemos podido obtener una vista preliminar de su 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: Open quote is expected for attribute “id” associated with an element type “div”.

    Ya no pude seguir. Me podrías ayudar?

    Por otro lado, me gustaría saber si hay alguna forma de adjuntar archivos con mis entradas como sucede con las fotos. Quisiera subir unos archivos en formato pdf, word y power point específicamente.

  • Hola!

    He vuelto a comprobar el código y está bien así que comprobad que lo habéis copiado bien. Puede ser que el error surja al copiarlo y pegarlo. Hacedlo a mano si hace falta, pone que no se ha cerrado una etiqueta pero están bien…

    Saludos!

  • Vale, ya lo he comprobado, el error da al copiar y pegar por las comillas, asi que ponerlas a mano.

    Por otro parte, Cecilia tu tienes que hacer otra cosa en tu plantilla, además de lo dicho aqui tienes que cambiar, esto:

    #sidebar {
    width: 226px;
    float: right;
    color: $sidebarTextColor;
    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 */
    }

    Por esto:

    #right-sidebar-wrapper {
    width: 226px;
    float: right;
    color: $sidebarTextColor;
    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 */
    }

    El resto es igual. Pero recordad, las comillas ‘ ‘ escribidlas a mano

  • Los errores surgen al copiar y pegar, por que las comas y las comillas son diferentes a las del formato que tiene la plantilla blogger. Ya en otras ocasiones se verifico este error y luego de mucho observarlo descubrí que era esto lo que originaba el mismo. Gracias por la información Dimas! 😉

  • Hola nuévamente.

    Escribí a mano el código varias veces tal y como me dijiste. El cambio que me sugeriste la última vez, lo hice desde ayer porque intuí que haría falta.

    el mensaje de error dice esto:

    Mensaje de error de XML: Element type “b:section” must be followed by either attribute specifications, “>” or “/>”.

    Busqué dentro de los cambios que hice el elemento “b:section” y le quité, aumenté de varias formas los signos > y /. Aunque posíblemente me ha faltado alguna.

    ¿Qué será entonces? ¿debo experimentar con otra plantilla?

  • No logro dar con esto. Estoy aún con la plantilla antigua y aunque trato de adptar los codigos que pusiste, no consigo lo que busco, que es una columna a cada lado del main.
    Algo que puedas decirme al respecto?
    Gracias desde ya
    Jezabell

  • Muchísimas Gracias, he logrado hacer muchísimos cambios con los trucos de tu página, pero ahora voy por más: Deseo que en lugar de comentarios diga “gemidos”. Cómo hago ese cambio?

  • Estoy intentando poner otra columna en la parte derecha pero no soy capaz. A ver si me la podeis hacer vosotros.
    Si quieres te paso mi plantilla gracias.

  • No he podido poner las 3 columnas o a lo mejor no tengo la plantilla correcta. ¿Me podrian decir via correo electronico que plantilla poner para que me salga?. Mi plantillas es la numero 565 creada por Douglas Bowman por favor.

    Gracias

  • a mi me gustarí saber como puedo agregar otra barra, pero no a la izquierda. Sino sumar una más a la derecha.

    Salu2.

    JoN!

  • Saludos,

    Seguí los consejos tuyos y el de los demás y me salió todo perfecto ( !Claro! luego de que me salió el error y seguí leyendo los post).

    Muchas gracias…

  • #18
    Los puedes quitar desde las opciones de blogger.

    Te aparecen solo a ti, gracias a ellos puedes modificar un post, o elemento de la plantilla sin tener que entrar al panel de administrador de blogger. Es muy útil para ahorrar tiempo, si quieres ver como se ve el blog sin eso… sale de la cuenta de Google y ve a la url de tu blog.

    Saludos.

  • Todo barbaro pero mi plantilla no es una de esas simples, sino que es una con la columna derecha redondeada,no se si me explico(la plantilla no es solo texto) y no tengo justamente asi:

    Tengo asi:


    Alguien sabe como hacerlo en una de estas plantillas.Gracias

  • Que tal, segui todos los pasos, todo estuvo bien, se ve el espacio en el blog, pero cuando deseo colocar elementos de la pagina simplemente no se puede, por que se da esto? agradezco la ayuda

  • Hola, seguí todos los pasos y los comentarios, pero ahora, en lugar de tener 2 barras con contenido, se ha desplazado lo que tenía a la derecha en la izquiera (la nueva), y en la derecha me quedó un hueco. ¿cómo hay que hacer para dotar de contenido las 2 barras?

    Gracias.

  • Yo solito me contesto:

    He pegado de nuevo

    y he cambiado ‘left’ por ‘right’, no se si es muy ortodoxo, pero ya me valió.

    Gracias de nuevo por la ayuda.

    Saludos.

  • Clases Particulares de Todas las Materias.
    Nivel Primario, Secundario y Universitario. CBC. UBA XII. Todas las facultades Privadas. Idiomas (inglés, italiano, portugués, etc). Computación. Capacitación Empresarial. Taller literario.
    Profesores Particulares de Todas las Materias

  • Wooooooo Wooooooooo Woooooooooooo, muchas gracias! He conseguido poner una segunda barra a la izquierda, que logro! xDD, ahora si que mola la página!

    (Ya que estamos, es atomskfreak.blogspot.com, si tenéis alguna sugerencia sobre la página, hacedmela llegar, y con gusto iré metiendo material!)

  • Amigo, me tira el siguiente error:
    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: Open quote is expected for attribute “{1}” associated with an element type “id”.

  • Bueno el Truco men si me salio ya tengo dos barras una a la izquierda y a la derecha pero como hago para k esa barra me salga a la derecha tambien …
    se lo agredeceria

  • Hola , logre tener la otra columna pero por mas que le he cambiado valores de anchos ya sea de cada side bar como del header como de main no puedo logra acer que no me quede separada la sidebar derecha del main , es decir la izquierda que es la nueva queda pegada al main pero la derecha la original tiene una separacion de mas de 10 px, ya no se a donde cambiar nada por que ya te dije hasta le di la opcion center a el main y la sidebar derecha me quedo abajo. Como debo hacer?
    Gracias
    pdfurgi@hotmail.com

  • Hola, conseguí crear una nueva columna a la izquierda, pero la derecha se desplacó hacia abajo, debajo de las entradas del blog, sin que se quede a la derecha.

    fer_formula-1[arroba]hotmail.com

  • PARABÉNS POR SEU BLOG. Visito sempre. Os textos são de excelente qualidade. Tentei acrescentar uma coluna a mais em meu blog, seguindo suas instruções. Usei o modelo TIC-TAC e quando visualizei saiu esta mensagem de erro:

    “Não foi possível visualizar o modelo
    Corrija o erro abaixo e envie o seu modelo novamente.
    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: Open quote is expected for attribute “{1}” associated with an element type “id”.”

    Por favor, explique-me como resolver isso.

  • Buenas, tengo un problemilla, cuando pongo todo lo que dices, me sale lo siguiente:

    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: Open quote is expected for attribute “{1}” associated with an element type “class”.

    Lo raro es que hasta lo he copiado a mano como comentabas antes, ya no se que hacer, en mi caso es que mi plantilla no tiene barras a la derecha ( es un tema externo a blogger) y queria añadirsela yo, si me pudieras echar una mano, muchisimas gracias.

  • me pasa lo mismo ke a Ude
    no me funciona nada
    lo e copiado
    lo e puetso a mano
    y nada
    ademas algunas cosas en mi plnatilla son diferentes

  • He estado toda la tarde intentando cambiar la plantilla (minima dark) y siempre da error…de los de las comillas ya me di cuenta ¿No tienes otra de tres columnas que esté completa para no tener que hacer cambios en la original?

    Gracias por instruirnos, en cualquier caso

    Manuel

  • Hola a todos, estoy un poco liado con lo de la cuenta de blogger… El tema es que la abrí con una cuenta de hotmail y ahora me dice algunas veces que necesito una de Gmail, pero la he intentado cambiar y no se hacerlo, soy muy torpe. ¿Podéis ayudarme?. Gracias

  • me gustaria agregar un menu como el q tu tienes formado por conceptos, podrias enseñarme? o por lo menos com se le llama a eso para buscar en la web. gracias por tu blog

  • Oye pues muchísimas gracias por compartir esto de la tercera columna.
    Me dio los errores que citan por ahi y lo que ocurre es que en una de las veces de (c+v) faltaba antes del último paréntesis meterle encima /* y después hay que ir variando las comillas pues no es la misma comilla que sale en blogger, esta es recta ”” y no esta ´´´´

    muchisimas gracias, pues. Estaba buscando esto.

  • Muchas gracias!

    Muy bueno el post, auque tuve que modificar otras cositas de las que decias tu, porque yo de #outer-wrapper no tenia nada, y tuve que aumentar el tamaño del #content-wrapper

    Me costó descubrirlo pero lo conseguí!

    Aquí podeis ver los resultados http://lacosaestafatal.blogspot.com

  • Hola!
    No hay manera de hacerlo. He probado un millón de veces y nada. Puedo mandarte la plantilla modificada a ver que pasa? El post siempre me queda por debajo de la nueva sidebar. Saludos