martes, 21 de octubre de 2008

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.

5 comentarios:

Anónimo dijo...

esto vale para columnas, pilares, augustas, severianas, marias, juanas, eustaquias, etc... o para cabras locassssssss, jejjejejejejejejejejejejeje

Anónimo dijo...

Ya estamos?? Ya estamos ???

Pero que hecho yo, que esta petarda no hace más que meterse conmigo.

Lo que dice nuestra admirada Nya, se refiere a columnas en la presentacion del blog. A las barras laterales, o side bar, que dice ella.

Estas brujas, no se enteran de nada...
Hazte un cursillo de reciclaje, anda.

Salud os.

AnGi dijo...

Puede que a srcabronazo y a sorgine, no les funciono, o esperaban algo diferente, pero a mi si me funciono, pues ya tengo las 3 columnas que yo queria en mi blog.
Y solo de esta menera la pude conseguir.
Muchas gracias en verdad.

Unknown dijo...

Hola Nya

me ha gustado mucho tu blog, es muy práctico y volveré a pasarme por aquí... a si que para ti va mi voto como mejor blog de informática en los Premios 20 Blogs, un saludo.

Juan Perez Betancourt dijo...

saludos ha sido buena tu guia para colocar 2 columnas al blog. pero la he apñicado y me sale con esto: El código ID del nuevo widget "NewProfile" no es válido para este tipo: Profile. sera que me hechas una mano porfavor. sabria agradesertelo. ya una parte le he modificado, al pareser presenta problema con el ultimo codigo que hay que ingresar. espero tu ayuda.ah muy bueno tu blog.