lunes, 11 de febrero de 2008

AÑADIR UNA SEGUNDA SIDEBAR A TU BLOG

A petición de Hugo, os voy a explicar cómo se añade una tercera columna a nuestra plantilla, es este caso, es una segunda sidebar (donde colocamos los artilugios, menús...)

Es un poco pesado de hacer porque tendreis que ir cambiando números hasta encontrar el formato que más os guste. Yo, en principio os voy a poner los números que yo tengo puestos en mi plantilla, por si os apetece tenerla así.

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

Empezamos la aventura....abróchense los cinturones.......que vamos a despegar....

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.

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.

10 comentarios:

Hugo Dey dijo...

Muchísimas gracias la verdad es que estoy recién empezando a arreglar el blog y lo poco que tiene (de cosas "no incluidas") lo he aprendido aqui. Necesito que tenga mas espacio para luego comenzar a subir el material, que tiene como mínimo que refrescarse dos veces a la semana.
De nuevo te lo agradezco, ayudas mucho a la gente, lo que cambia es el frente en que las personas lo hacen, pero se necesita estar en todos los frentes posibles para combatir la deshumanización, la que lamentablemente ocupa los mismos medios y canales para propagarse que su contraparte.

Hugo Dey dijo...

Es increible, lo hice y me salió a la primera, queda SUPER!!! muchas gracias!!!!!

ShiguerU dijo...

Muy bueno el blog. Felecidades.
http://oofriendlyfireoo.blogspot.com/

games dijo...

no me sale lo ise igual que vos me dijiste pero no me sale pasame porfa todotu codigo html de tu plantilla (toda entera)asi me es mas fasil aserlo porfa

games dijo...

no me agas caso me confundi en algo ahora me salio bien

TANGUEANDO POR EL NOA dijo...

sos una grosaaaaa, graciass

Meg dijo...

Gracias por la ayuda la verdad me ayudo muchisimo tu blog.

Mil gracias

German dijo...

Nya eres uan diosa de los blogs
alabada sea Nya ajajaja
mi blog esta de lujo entra

jackassweb.blogspot.com

sin-miedo-temor.blogspot.com

Sandra dijo...

Hola!. Muchas gracias por tus aportaciones y ayuda. Sólo quería comentar que esta parte de agregar una segunda sidebar no me sale. Lo he intentado varias veces pero no hay manera. ¿Me podrías ayudar?. Gracias de nuevo y un abrazo.

Laila dijo...

la ultima parte no me sale el ultimo codigo para agregar
me sale me dic lo sigiente : El código ID del nuevo widget "NewProfile" no es válido para este tipo: Profile

ayudaaaa!!