AÑADIR UNA SEGUNDA COLUMNA AL BLOG

Uno de nuestros lectores, Fedejb, me ha preguntado cómo se hace para poder añadir más gadgets o accesorios a los dos lados del blog. Pues aquí va tu respuesta.

Realmente, lo que hacemos es primeramente añadir una segunda columna a la plantilla del blog (esto técnicamente se llama sidebar) y hay determinadas plantillas en las que se puede añadir como explico a continuación.

Como dije ya en su día (que este tema a lo expliqué...) es un poco pesado de hacer porque tendreis que ir cambiando números hasta encontrar el formato que más os guste pero, bueno, en principio os voy a poner los números que yo tengo puestos en mi plantilla, por si os apetece tenerla así. De hecho veis perfectamente cómo queda y si no os gusta así, sólo debeis de cambiar numeritos hasta encontrar el formato deseado por vosotros.

Deciros antes de nada, que yo uso ordenador portátil y siempre hago la plantilla ancha porque prefiero verla así. No he probado desde que hice mis blogs a verlos en una pantalla de un pc de sobremesa, así que no sé cómo se verá.

NOTA IMPORTANTÍSIMA: alguno de vosotros ha cambiado la plantilla haciendo esto y no se ha acordado de guardar previamente una copia de la que ya tenía hecha. Antes de nada.....haceis una copia por si la liais parda y os equivocais (al menos podreis tener la que ya teníais)

Empezamos la lección número 2 de cómo hacer una sidebar nueva....

Estos códigos que os voy a poner, sirven sólo para las plantillas de Mínima, Denim y Dostdark de blogger. Yo la que uso es la Mínima Dark, así que es la que explicaré porque es la que, evidentemente, me sé de memoria ya.

1º Vamos a nuestra Plantilla y buscamos la parte del código que os muestro:

/* 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. Y ahora nos toca cambiar números.... el width (ancho) de #outer-wrapper, de #main-wrapper y de #sidebar-wrapper, para que podamos poner la nueva sidebar. También tenemos que añadir un margen hacia la izquierda (margen-left) para que haya un espacio entre la nueva sidebar y la columna principal.

Como he dicho antes, os voy a poner de ejemplo mi plantilla, así que aquí va:

#outer-wrapper { width: 958px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; } #main-wrapper { width: 460px; float: left; margin-left: 30px; 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 */ }

3º Después de este código, donde nos pone sidebar-wrapper y sus datos, debemos añadir la nueva sidebar con éste código:

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

4º Ahora al final, casi casi, de nuestra plantilla buscamos éste código:

<div id="content-wrapper"> <div id="crosscol-wrapper" style="text-align:center"> <b:section class="crosscol" id="crosscol" showaddelement="no" /> </div>

Y añadimos este otro:

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

NOTA: para ver los cambios según los vais haciendo y comprobar que la plantilla ha quedado a vuestro gusto con los números que vayais modificando....en vez de guardar cambios, le dais sólo a VISTA PREVIA.