miércoles 13 de febrero de 2008

Plantilla Minima - Agregar sidebar

Si quieres saber como agregar una sidebar a tu plantilla mínima de blogger, pues esta entrada es la indicada.
La sidebar es la que se encuentra al lado de las entradas, es donde tu pones elementos, como las etiquetas, tu perfil y algunas otras cosas para adornar tu blog.
Para agregar una nueva sigue los siguientes pasos, y si quieres un ejemplo, ve esta plantilla que yo modifique y le agregue una nueva sidebar.
Empezamos entonces...

Debes modificar algunas partes de tu plantilla html para que esta no se deforme al hacer los cambios.
Para ello haz lo siguiente:

Busca el siguiente código en tu plantilla edición html :

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

Ahora hay que modificar el ancho (width) del #outer-wrapper, el ancho (width) del #main-wrapper y el ancho (width) de la #sidebar-wrapper, para poder agregar la nueva sidebar. Aparte de esto hay que agregarle un margen hacia la izquierda (margen-left) para que haya un espacio entre la nueva sidebar y la columna principal.
Ejemplo de como debiera quedar:

#outer-wrapper {
width: 750px;
...
}
#main-wrapper {
width: 400px;
margin-left: 20px;
...
}
#sidebar-wrapper {
width: 150px;
float: right;
...
}

Ahora tendremos que recién agregar la nueva sidebar, pegando el siguiente código justo despues de
#sidebar-wrapper {
width: 150px;
float: right;
...
}

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


Una vez ya pegado el código, debes buscar el siguiente código

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

Y pegar el siguiente justo despues:

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

Este código hará que puedas agregar elementos a la sidebar, si no pegas este código no te funcionará.

Lo ultimo es ver si te resulto, apretando el botón de vista previa.

Te daré un dato, por si quieres cambiar la sidebar de lugar(derecha o izquierda).
Para cambiar de posición la sidebar nueva o la que ya tenias debes cambiar el float.
Para poner la sidebar en la derecha cambia por float: right; y en la izquierda por float: left;

Y recuerda, este truco funciona en todas las plantillas Minima (Dark, Blue, Ochre, Lefty, Stretch, Lefty Stretch), Denim y Dotsdark

Espero que te halla sido útil esta info. Si tienes alguna duda déjame un comentario.
Adios!

3 comentarios:

TILIE dijo...

Hola.
Mi outer-wrapper dice 740px y el main-wrapl, 485px. ¿se puede agregar sidebar? Me da rabia ver tanto espacio desaprovechado.
Gracis y cariños.

Pablo dijo...

Hola.
Gracias a tus instrucciones puede modificar mi blog!
Luego de probar un rato distintos valores pude agregar una columna.

Muchas Gracias.

P.D. Me falta "acomodar" bastante pero de a poco...

La Dama Pálida dijo...

Me aparece este error:
El código ID del nuevo widget "NewProfile" no es válido para este tipo: Profile

¿que debo hacer?