Agregar una segunda sidebar a plantilla
Esta entrada servirá para enseñaros como agregar una nueva sidebar en vuestro blog.
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, aunque yo os lo voy a explicar para que no tengáis ninguna duda en ningún paso.
Entonces:
Casi todas las plantillas tienen una estructura muy similar, sobre todo las de Blogger, 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.
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:
{
float:left;
width:620px; /*.... otros atributos ... */
}
#sidebar-wrapper
{
float:right;
width:300px; /*.... otros atributos ... */ }
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.
Agregar una nueva zona editable en blogger es muy sencillo, éstas están definidas por elementos “section” que al incluirlos en el código ya pueden contener gadgets (elementos de página). El código de una nueva zona editable es algo como:
<b:section class='sidebar' id='sidebar2' preferred='yes'></b:section>
Y para agregar una nueva zona editable, solo hay que agregar este código justo después de la zona editable existente:
Por ejemplo, en mi caso:
<!-- (Lateral) -->
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section> ( Esta sería la sección de una sidebar, desde el primer </b:section hasta el que va al principio de este paréntesis)
<b:section class='sidebar' id='sidebar2'preferred='yes'></b:section> ( Esta sería la segunda sidebar, la que nosotros agregamos)
</div>
Hay que tener cuidado que el ID de la nueva zona, no exista en otro elemento “section”, es por eso que en el ejemplo aparece como “sidebar2″. La clase puede repetirse y en el caso de los sidebars hasta es conveniente que lo haga. Como es una zona nueva, no necesita tener código de gadgets, estos se integraran automáticamente cuando agreguemos un nuevo gadgets desde “Elementos de página”.
Con esto ya hay una zona editable pero como no la plantilla no esta preparada seguramente se deformaría, así que falta hacer algunos cambios.
Ya sabemos el ancho total disponible y tenemos la zona editable, así que hay que cambiar determinar el ancho de cada elemento. Siguiendo el ejemplo; main-wrapper se reduce a 540px y sidebar-wrapper el ahora contenedor de ambas sidebars se aumenta a 380px. Quedando los estilos como esto:
#main-wrapper
{
float:left;
width:540px; /*.... otros atributos ... */
}
#sidebar-wrapper
{
float:right;
width:380px; /*.... otros atributos ... */
}
{
float:left;
width:540px; /*.... otros atributos ... */
}
#sidebar-wrapper
{
float:right;
width:380px; /*.... otros atributos ... */
}
De esto modo el espacio disponible para ambas sidebars es de 380px. Lo más comun es ambas tengan el mismo ancho, es decir que ocupen el 50% cada una. A partir de lo IDs de cada zona editable definimos el ancho de cada una y su ubicación (derecha – izquierda) dentro del contenedor sidebar-wrapper, agregando los estilos:
#sidebar
{
width:50%;
width: 190px;
float:left; /*.... otros atributos que consideres necesarios:
padding, margin, etc ... */
}
#sidebar2
{
width:50%;
width: 190px;
float:right; /*.... otros atributos que consideres necesarios:
padding, margin, etc ... */
}
Con esto ya se tiene 2 sidebars de un ancho de 190px cada una, capaces de soportar gadgets.
Observaciones
Algunas plantillas pueden tener problemas al cambiar el ancho del sidebar o el contenedor principal, sobre todo aquellas basadas en imágenes fijas que obviamente no cambian de tamaño al reducirse el ancho. En tal caso se pueden editar las imágenes con photoshop para adaptarlas al nuevo ancho.
En general esto proceso puede ser complicado, sobre todo si no se tiene nociones suficientes de css o la plantilla tiene una maquetación -estructura- compleja. Para tal caso queda aprender css o buscar una plantilla de 3 columnas y personalizarla.
0 Response to Agregar una segunda sidebar a plantilla
Publicar un comentario