Agregar una nueva sidebar a una plantilla Blogger es una de las preguntas más comunes entre lo usuarios de la plataforma para blogs de Google. Agregar una segunda sidebar varia en complejidad de acuerdo al diseño que se trate, así, mientras algunas solo requieran cambiar unas lineas de css, otras necesitarán de una remodelación total que tal vez hagan más conveniente cambiar de diseño.

A grandes rasgos el proceso es el siguiente:

1. Analizar la estructura y estilos de la plantilla.
2. Agregar un nueva zona editable, es decir, la nueva zona para agregar los gadgets.
3. Modificar estilos.

Para seguir sin problema este y cualquier tutorial que implica hacer cambios en la estructura de un blog o sitio web es muy recomendable saber algo de html y css. Entonces:

La mayoría de las plantillas, y especialmente las de Blogger, tienen una estructura muy similar, un header (cabecera) con título y descripción, un contenedor con la columna principal y una sidebar (barra lateral) y un footer (píe de página) con créditos y otra información.

Para este caso, es de interés el contenedor, donde se encuentra el contenido y la sidebar, desde el código de Blogger (Diseño / Edición HTML) este se ve como:


<div id='content-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<!-- Código de los gadgets o widgets del sidebar -->
</b:section>
</div>
</div>


Varia un poco de plantilla en plantilla, pero generalmente es muy similar a lo anterior. Tanto main-wrapper (columna principal) como sidebar-wrapper (contenedor del sidebar) están definidos por estilos css que determinan su ancho, fondo y otras características. Así que lo primero será averiguar estas características buscando algo como:


#main-wrapper {
float:left;
width:620px;
/*.... otros atributos ... */
}
#sidebar-wrapper {
float:right;
width:300px;
/*.... otros atributos ... */
}


Nota: Seguramente no los encontraran juntos ni exactamente igual y en algunas ocasiones, más de una vez.

Aquí es importante ver los anchos (width) de cada elemento, pues para agregar una nueva barra hay que cambiar la distribución. Al sumar los anchos del código de ejemplo se tiene un total de 920px, el cual será el espacio disponible para el contenedor principal y las sidebars.

Posted in: Blogger, Trucos y Tips, Tutoriales