English Português

Agregar una nueva sidebar a una plantilla Blogger es una de las preguntas más comunes entre lo usuarios de la plataforma para blogs de Google. Agregar una segunda sidebar varia en complejidad de acuerdo al diseño que se trate, así, mientras algunas solo requieran cambiar unas lineas de css, otras necesitarán de una remodelación total que tal vez hagan más conveniente cambiar de diseño.

A grandes rasgos el proceso es el siguiente:

  1. Analizar la estructura y estilos de la plantilla.
  2. Agregar un nueva zona editable, es decir, la nueva zona para agregar los gadgets.
  3. Modificar estilos.

Para seguir sin problema este y cualquier tutorial que implica hacer cambios en la estructura de un blog o sitio web es muy recomendable saber algo de html y css. Entonces:

Analizar la estructura y estilos de la plantilla

La mayoría de las plantillas, y especialmente las de Blogger, tienen una estructura muy similar, un header (cabecera) con título y descripción, un contenedor con la columna principal y una sidebar (barra lateral) y un footer (píe de página) con créditos y otra información.

Para este caso, es de interés el contenedor, donde se encuentra el contenido y la sidebar, desde el código de Blogger (Diseño / Edición HTML) este se ve como:

<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>

	<div id='sidebar-wrapper'>
		<b:section class='sidebar' id='sidebar' preferred='yes'>
			<!-- Código de los gadgets o widgets del sidebar -->
		</b:section>	
		
		
	</div>
</div>

Varia un poco de plantilla en plantilla, pero generalmente es muy similar a lo anterior. Tanto main-wrapper (columna principal) como sidebar-wrapper (contenedor del sidebar) están definidos por estilos css que determinan su ancho, fondo y otras características. Así que lo primero será averiguar estas características buscando algo como:

#main-wrapper {
float:left;
width:620px;
/*.... otros atributos ... */
}
#sidebar-wrapper {
float:right;
width:300px;
/*.... otros atributos ... */
}

Nota: Seguramente no los encontraran juntos ni exactamente igual y en algunas ocasiones, más de una vez.

Aquí es importante ver los anchos (width) de cada elemento, pues para agregar una nueva barra hay que cambiar la distribución. Al sumar los anchos del código de ejemplo se tiene un total de 920px, el cual será el espacio disponible para el contenedor principal y las sidebars.

Agregar un nueva zona editable.

Agregar una nueva zona editable en blogger es muy sencillo, estas están definidas por elementos “section” que al incluirlos en el código ya pueden contener gadgets (elementos de página). El código de una nueva zona editable es algo como:

<b:section class='sidebar' id='sidebar2' preferred='yes'></b:section>

Y para agregar una nueva zona editable, solo hay que agregar este código justo después de la zona editable existente:

<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>

	<div id='sidebar-wrapper'>
		<!-- Zona editable existente -->
		<b:section class='sidebar' id='sidebar' preferred='yes'>
			<!-- Código de los gadgets o widgets del sidebar -->
		</b:section>	

		<!-- Nueva zona editable -->
		<b:section class='sidebar' id='sidebar2' preferred='yes'></b:section>		
		
	</div>
</div>

Hay que tener cuidado que el ID de la nueva zona, no exista en otro elemento “section”, es por eso que en el ejemplo aparece como “sidebar2”. La clase puede repetirse y en el caso de los sidebars hasta es conveniente que lo haga. Como es una zona nueva, no necesita tener código de gadgets, estos se integraran automáticamente cuando agreguemos un nuevo gadgets desde “Elementos de página”.

Con esto ya hay una zona editable pero como no la plantilla no esta preparada seguramente se deformaría, así que falta hacer algunos cambios.

Modificar estilos.

Ya sabemos el ancho total disponible y tenemos la zona editable, así que hay que cambiar determinar el ancho de cada elemento. Siguiendo el ejemplo; main-wrapper se reduce a 540px y sidebar-wrapper el ahora contenedor de ambas sidebars se aumenta a 380px. Quedando los estilos como sigue:

#main-wrapper {
float:left;
width:540px;
/*.... otros atributos ... */
}
#sidebar-wrapper {
float:right;
width:380px;
/*.... otros atributos ... */
}

De esto modo el espacio disponible para ambas sidebars es de 380px. Lo más comun es ambas tengan el mismo ancho, es decir que ocupen el 50% cada una. A partir de lo IDs de cada zona editable definimos el ancho de cada una y su ubicación (derecha – izquierda) dentro del contenedor sidebar-wrapper, agregando los estilos:

#sidebar {
width:50%;
float:left;
/*.... otros atributos que consideres necesarios: padding, margin, etc ... */
}
#sidebar2 {
width:50%;
float:right;
/*.... otros atributos que consideres necesarios: padding, margin, etc ... */
}

Con esto ya se tiene 2 sidebars de un ancho de 190px cada una, capaces de soportar gadgets.

Observaciones

Algunas plantillas pueden tener problemas al cambiar el ancho del sidebar o el contenedor principal, sobre todo aquellas basadas en imágenes fijas que obviamente no cambian de tamaño al reducirse el ancho. En tal caso se pueden editar las imágenes con photoshop para adaptarlas al nuevo ancho.

Conclusión

En general esto proceso puede ser complicado, sobre todo si no se tiene nociones suficientes de css o la plantilla tiene una maquetación -estructura- compleja. Para tal caso queda aprender css o buscar una plantilla con 3 columnas y personalizarla.

Les agradezco cualquier opinión o corrección en los comentarios y sus dudas en nuestro foro.

Otras referencias sobre este tema:

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Claudia / Hace 8 años /

      Muy bueno el tuto! Siempre ha me gustado la claridad con la que explicas 😉

      Responder a Claudia →
    2. Sebastian / Hace 8 años /

      Wow, un Gran Post, te pasaste, esta muy facil de entender, muy breve y a la vez muy específico. Yo creaba el Sidebar de una forma mucho mas Larga y Compleja pero con este Tutorial, Me di cuenta de lo facil que es. Muchas Gracias

      Responder a Sebastian →
    3. Francisco / Hace 8 años /

      Clau, yo siento que cantinfleo demasiado, me haces sentir mejor, gracias 😛

      Sebastian, que bueno que se haya entendido ^_^

      Responder a Francisco →
    4. montserrat lacomba / Hace 8 años /

      ¡Hola!
      Muchas gracias, siguiendo tus pasos ha sido facilísimo.
      ¿Sabes cómo se puede convertir una lista de links en un menú desplegable? Tengo listas demasiado largas en el blog y me gustaría poder mostrarlas igual como hago con los archivos.

      Responder a montserrat lacomba →
    5. Albert / Hace 8 años /

      a mi no me sale el outer graperme sale esor

      #outer-wrapper {
      background: url(http://bp1.blogger.com/_Zuzii37VUO4/RkOth-MBSlI/AAAAAAAAA7E/aVmcjKJVwPA/s1600/fondo-blogy.jpg) no-repeat center top;

      me podrias explicar paso a paso en mu correo porvavor ya.

      Responder a Albert →
    6. gester / Hace 8 años /

      interesante amigo siempre quice agregar un nuevo sidebar, y con este tutorial lo vi sencillo gracias por esto; pero mi otra inquietud es como puedo colocar otra sidebar pero ala parte izquierda, para que la entrad principal vaya al centro con dos sidebar a los costados, favor responder gracias

      Responder a gester →
    7. topociego / Hace 8 años /

      Muy bueno tu post, esta muy bien explicado, lo haces super sencillo 😀 gracias!!!

      Responder a topociego →
    8. Paula Moreno / Hace 8 años /

      Hola,

      Quisiera saber si es posible subdividir el footer de blogger en 3 o 4 partes para poder utilizarlo en lugar del sidebar.

      Muchas gracias,

      Paula

      Responder a Paula Moreno →
    9. cesar / Hace 8 años /

      hola quisiera saber que debo hacer para que me quede un sidebara a cada lado del post

      Responder a cesar →
    10. Carles / Hace 8 años /

      Hola,

      Muchísimas gracias por tus aportaciones.

      Tengo una web en html y un blog de blogger.
      Quería saber si hay alguna manera de insertar las entradas del blogger en mi web html. De modo que pudan verse desde mi web las entradas actualizadas en blogger.

      Muchas gracias
      Saludos
      Carles

      Responder a Carles →
    11. lavidalinux / Hace 7 años /

      Muchas gracias por la ayuda. Me ha servido para una plantilla que estoy por usar en mi blog. Gracias!

      Responder a lavidalinux →
    12. juan / Hace 7 años /

      Hola, he seguido tus instrucciones y todo perfecto. Pero, ¿cómo podría poner una side a cada lado del post? lo he intentado pero no lo consigo. Gracias, un saludo

      Responder a juan →
    13. Dawin / Hace 7 años /

      Realmente la Flia de Tu Revista Tecnológica, estará eternamente agradecida. Solo teniamos 2 Columnas y gracia tu Soporte ya tenemos otra imagen.

      Ahora nuestro administrador tomando como base esta tutoria a podido comprender como hacer diversos cambios.

      P.D.
      Que Dios te Bendiga.

      Responder a Dawin →
    14. Jebuzzz / Hace 7 años /

      Hermano, hice todo como dijiste y cuando intento guardar la plantilla, hay un error: “Se ha encontrado más de una sección con el ID: main. Los ID de sección deben ser exclusivos.”

      Entonces modifiqué “sidebar2” por otro nombre. Ej: “newsidebar” para la ID de lo que agregué… y tampoco funcionó…

      ¿Podrías responderme qué sucede?

      Abrazo.

      Jebú.
      P/D2: Como busqué bastante sobre esto, y tu explicación fue la más simple -o mejor explicada- … también supe que puedo poner la nueva sidebar a la izquierda, por ejemplo. ¿Cómo lo haría? 😀

      Responder a Jebuzzz →
    15. Flor / Hace 7 años /

      Hola: estuve leyendo acerca de como colocar otra side bar, intenté hacerlo (varias veces) pero se me hizo imposible, el texto quedaba debajo de la sidebar o la sidebar en el medio y la nueva que había hecho, no se donde estaba.
      El punto es que algunos de los códigos que colocaste no pude encontrarlos o no se.
      Me gustaría encontrar la forma de colocar 2 sidebars a cada lado del post, pero también quise (aunque sea) agrandar la única sidebar q tengo y no pude hacerlo, no se si es por la plantilla que tengo.
      Agradecería tu ayuda…

      Responder a Flor →
    16. Margarita / Hace 7 años /

      Muchas gracias, esta información fue de mucha ayuda.

      Responder a Margarita →
    17. Yo_MiSmitO / Hace 7 años /

      wenisima

      Responder a Yo_MiSmitO →
    18. velirha / Hace 7 años /

      hola! como puedo poner blogsaver en mi blog en la barra lateral. Entiendo que hay que copiar el codigo pero lo que no entiendo es donde y como :/

      se supica responder con urgencia 🙂

      Responder a velirha →
    19. Borest / Hace 7 años /

      Hola Francisco, en el caso de la plantilla de Este blog al parecer no tengo ninguna sidebar, aparentemente esta un tipo menu, pero no me deja agregar ningun widget, habra una forma de agregar un codigo para poder crear widgets en esa parte? Saludos.

      Responder a Borest →
    20. Belén / Hace 7 años /

      Hola francisco soy belén y quiero poner una sidebar más a la derecha de mi blog, tengo plantilla Harbor de blogger, en la tercera sidebar quiero colocar los títulos de la entradas antiguas que cliqueando allí me lleve a la página que busco. He tratado de hacer el ejercicio pero no lo he conseguido. Me sale que no es válido el HTLM o algo parecido. Por favor, es la plantilla adecuada? Muchas gracias espero tu respuesta en mi e-mail. Saludos y nuevamente muchas gracias por brindar tu ayuda. Adiós.

      Responder a Belén →
    21. Pabela / Hace 7 años /

      Hola Sebastián quería hacerte una consulta que me parece tiene que ver con este tema. Resulta que en mi blog tengo un slide que en el blog de pruebas (http://testcinerata.blogspot.com/) lo cambié por otro de otro estilo pero me queda un espacio en blanco a la derecha del slide que me gustaría poder tener un cuadrado de publicidad, pero no sé bien cómo poder editar esa zona para agregar un widget. Espero que entiendas mi consulta!! jaja básicamente quiero rellenar ese espacio con un widget pero no sé cómo hacerlo. Saludos!

      Responder a Pabela →
    22. Nacho / Hace 6 años /

      No entendi nada,se mas sencillo

      Responder a Nacho →
    23. Luis Antonio / Hace 6 años /

      Hola . buena explicacion. pero yo quisiera saber como colocar cada sidebar en un lado diferente , es decir con el contenido centrado y los sidebares en el lado derecho y en el lado izquierdo…

      Podrías ayudarme… yo conozco algo de html y css , asi que solo necesito una pequeña ayuda (un empujon)

      Un saludo de un fiel lector
      Luis enciso

      Responder a Luis Antonio →
    24. Francisco / Hace 6 años /

      @Luis Antonio El principio es el mismo. Para tener una de cada lado, pones una zona editable y el principal con float:left y otra con float:right, y ahora solo debes cuidar anchos y margenes para que ninguna columna se vaya al fondo.

      Responder a Francisco →
    25. Moises / Hace 6 años /

      Buen dia, en la solapa /Diseño/Elementos de Pagina, “Añadir y organizar elementos de la Pagina” hay uno o mas cuadros que dice: “añadir un gadget”, estoy intentando personalizar mi blog y no encuentro el codigo de este recuadro para ocultarlo o eliminarlo. Sabes cual es el nombre o que debo de hacer. Gracias

      Responder a Moises →
    26. Max Villasante / Hace 6 años /

      uqeria hacerle una consulta tengo mi Blo, anteriormente estba bien y cuando le cambien por el template Oracle.xlm dividio la parte de mi donde edito mis entradas en dos columnas y no puedo mostrar ya mis Entradas ni viddeos de youtube que tenia , agradecere me pueda orientar al respecto, gracias

      Responder a Max Villasante →
    27. Max Villasante / Hace 6 años /

      premiumbloggertemplates.com/2010/11/oracle-premium-blogger-template.html
      esta es la pagina donde se puede ver el Oracle

      Responder a Max Villasante →
    28. Julio / Hace 6 años /

      Muchas gracias Francisco,
      Estoy empezando en esto de los blogs, y tu explicación es muy didáctica, sencilla y precisa. Felicitaciones.

      Responder a Julio →
    29. Wrrzag / Hace 6 años /

      Hola! Tengo un problema: He conseguido agragar una columna en la barra lateral para poner gadgets pequeños, y otra después, algo así :

      |———-| |—–|
      |–cuerpo–| |–|–| -> columnas
      |———-| |—–|

      Lo que pasa es que en el blog normal se ve perfecto, pero si voy a un post menor que todas las columnas, las que quedarían a partir del final del post se me desplazan debajo (el primero, que es corto, sirve para verlo bien: wrrzag.blogspot.com/2011/04/anunci.html. ¿Sabrías alguna forma de hacer que las barras laterales siempre estén en el mismo sitio?
      Gracias, y felicidades por el blog!

      Responder a Wrrzag →
    30. Francisco / Hace 6 años /

      @Wrrzag Busca sobre clearfix en Google es una técnica CSS que, entre otras cosas, sirve para hacer las columnas paralelas del mismo tamaño.

      Responder a Francisco →
    31. juan pablo / Hace 6 años /

      che, soy solo un niño pero digo que esta hasta bueno el tut 🙂

      Responder a juan pablo →
    32. Wrrzag / Hace 6 años /

      Vale, voy a mirarlo. Gracias! 😀

      Responder a Wrrzag →
    33. Abraham / Hace 6 años /

      @Francisco: Si francisco, eres muy bueno.

      Responder a Abraham →
    34. uruapanonline.tk / Hace 5 años /

      esta bien pero kiero hace un slide bar pero horizontal pues to k hacerla vertical seria = k poner varios slide en una columna

      Responder a uruapanonline.tk →
    35. misael / Hace 5 años /

      amigo de verdad que me estoy voviendo loco me gustaria que me pudieras ayudar a poner una columna de lado izquierdo de mi blog por favor amigo espero tengas el tiempo para ayudarme
      como ves solo tiene una columna a la derecha pero quiero una a la izquierda ayudame… porfavor 😀

      Responder a misael →
    36. anonimo / Hace 5 años /

      seria mas facilque publique el codigo entero y listo.. asi me complico mucho

      Responder a anonimo →
    37. Zherg / Hace 5 años /

      Muchas gracias por la información, un saludo!!

      Responder a Zherg →
    38. irma pilar torres carpio / Hace 5 años /

      hola, tengo un problema, recien estoy iniciando en wordpres.org e instale y active la primera vez un tema nuevo para mi blog, y hasta ahi todo bien, pero cada vez que instalo y activo un nuevo tema para la siguiente pagina sucede que modifica los temas de las paginas y los widest grabadas anteriormente (el contenido lo mantiene felizmente), como si cada vez activara por defecto, he hecho muchas pruebas, personalizando el menu pense que era por eso pero no, he desactivado plugins, tampoco… no se como puedo solucionarlo…

      Responder a irma pilar torres carpio →
    39. Olmo Axayacatl / Hace 5 años /

      Muy buena la explicación, bastante detallada y fácil de entender. Por el momento no he pensado agregar una segunda sidebar pero cuando requiera hacerlo ya se que instrucciones seguir.

      Responder a Olmo Axayacatl →
    40. P3ru / Hace 5 años /

      Puedo comentar tu articulo en mi blog? parece que detallas bastante bien como descuartizar una plantilla y puede ser muy util, aveces simplemente añadimos codigo y codigo y no nos paramos a ver los cuadros y como crear zonas…nose esta muy bien. Buen tuto gracias

      Responder a P3ru →
    41. Xander Reyes / Hace 5 años /

      Hola tengo un blog alojado en blogger, en las nuevas plantillas de blogger, tiene una sidebar en la izquierda, la columna principal en el centro y en el lado derecho 2 sidebar (En realidad una divida del medio hacia abajo), lo unico que deseo hacer es la sidebar de la izquierda, lograr que aparezca en la derecha, para que todas las sidebar esten a la derecha y por ultimo, modificar el padding de los widgets, para que ese rellegno que veran en mi blog que se ve sobrando mucho espacio por dondequiera, sea menor, pues hay muchos espacio desperdiciado, gracias anticiapdas.

      Responder a Xander Reyes →
    42. Frank / Hace 5 años /

      Hola Consuelo,

      en los gadgets que tenemos en la columnas en blogger,

      escoge Archivo del Blog y desde ahí puedes editar hasta dar con una de las opciones que te guste

      Responder a Frank →
    43. aldo / Hace 5 años /

      Hola mira estube leendo tu post y e intentado hacer lo que me dijiste pero no me funciona haber si me puedes ayudar porfavor te lo agradeceria mucho

      Responder a aldo →
    44. PILAR / Hace 5 años /

      Hola Francisco.
      Si fueras tan amable de responder a la siguiente pregunta: yo tengo un blog (www.tallerbauletto.com)que tenía una distribución de una zona central y 1 barra lateral a cada lado.
      La barra de la izquierda está Ok, pero la barra de la derecha en la que tenia unas fotos que iban pasando, un contador de visitas y poco más ha desaparecido.
      Evidentemente será que algo he tocado, pero no se lo que es, ni se como volver a ponerlo.
      ¿puedes echarme una mano?
      muchas gracias
      pilar

      Responder a PILAR →
    45. María de las Mercedes / Hace 4 años /

      Hola!!! Tengo problemas al agregar una nueva columna a la izquierda, no encuentro el lugar donde agregarla. La plantilla que tengo instalada no tiene las secciones tradicionalmente conocidas, es muy rara. Pero necesito poner una columna ahí!!! Si podrías responderme a mi email y decirme cómo agregarla, te agradezco!! Saludos.

      Responder a María de las Mercedes →
    46. Roberto / Hace 4 años /

      hola amigo me puedes decir como poner un sidebar footer?

      Responder a Roberto →
    47. Cristina / Hace 2 años /

      Hola! Quiero tener 3 gadget debajo de la cabecera consecutivos; ahora sólo puedo hacer un gadget debajo de otro que ocupa lo mismo que la cabecera, osea:

      CABECERA
      GADGET
      GADGET
      GADGET
      (esto es lo que puedo hacer)

      CABECERA
      GADGET GADGET GADGET
      (esto es lo que quiero hacer)

      ¿Cómo puedo hacerlo?

      Responder a Cristina →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad