Añadir una sidebar

Es bastante fácil, aunque parezca complicado, y es 100% recomendable, que primero lo prueben en un blog de pruebas, antes de ejecutarlo en nuestro blog público.

Es importante que siempre antes que hagas un cambio en la plantilla guardes una copia, por si el truco no te funciona o no te gusta puedas volver a lo que tenías.
Nada es infalible...^_^

No todas las plantillas son iguales, pero este truco es casi seguro que funcione, porque se trata solo de copiar la sidebar existente y duplicarla.
Según la plantilla con la que trabajes, tal vez tengas que hacer unas pequeñas modificaciones en padding y margin.

Primero vaamos a Plantilla/Edición html y buscamos esto:

/* Outer-Wrapper --------------------------------- */

Debajo vemos #outer-wrapper { aquí modificaremos el ancho, esto hará que el cuerpo del blog se ensanche a la medida deseada, en este ejemplo vamos a usar 900px, es decir, quedaría así:

#outer-wrapper {
width: 900px;

Luego buscamos un poco más abajo la sidebar de nuestra plantilla:

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

La copiamos y, justo debajo lo pegamos.
Así duplicamos la sidebar, ahora tenemos que cambiarle el nombre y le ponemos, por ejemplo, newsidebar, además necesitamos que quede del otro lado, para que las entradas queden en el medio de las dos sidebar, para lograrlo le cambiamos el float, quedaría así:

#newsidebar-wrapper {
width: 220px;
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 */
}
-Lo podrías dejar como está, es decir las 2 sidebar del mismo lado, eso ya queda al gusto del consumidor.

Después bajamos por la plantilla hasta encontrar:

<div id="content-wrapper">

Debajo de esa línea añadimos el código necesario para que nuestra sidebar se muestre en el blog:
<div id="newsidebar-wrapper">
<?xml:namespace prefix = b /><b:section class="sidebar" id="newsidebar" preferred="yes">
</b:section>
</div>

Guardamos los cambios.
De momento la nueva sidebar está vacia, llendo a Plantilla/Elementos, vas a ver que ya es posible añadir nuevos elementos a la sidebar, añadimos uno, guardamos cambios y vemos la nueva sidebar, si ves que la distancia de las sidebar a las entradas no es la correcta, lo solucionás volviendo a Plantilla/Edición html, y añadiendo en #main-wrapper {
un nuevo valor para el margen:

margin-left: 20px;

Quedaría así



Según Rosa el blog ganaría en estética si la cabecera y el pie, tuviesen la misma medida que el cuerpo, para ello modificamos su ancho (width) en #header-wrapper { y en #footer {, cambiando su valor a 900px.
Seguir Leyendo...[+/-]