A la hora de añadir una nueva
sidebar (o barra lateral) en un
blog de
Blogger, lo primero que hay que hacer es buscar en la plantilla el encabezado
/* Outer-Wrapper */ y centrarse en el siguiente código:
/* Outer-Wrapper */
#outer-wrapper {
width: 660px;
margin: 0 auto;
padding: 0;
text-align: justify;
font: $bodyfont;
border: 4px ridge #3399cc;
background: #c3d9ff;
}
#main-wrapper {
width: 410px;
padding: 10px 8px 10px 8px;
float: $startSide;
border-top: 2px solid $bordercolor;
border-right: 1px solid $bordercolor;
border-bottom: 2px solid $bordercolor;
border-left: 1px solid $bordercolor;
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;
padding: 10px 8px 10px 8px;
float: $endSide;
border: 0;
background-color: #eeeeee;
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 */
}
Empezaremos por renombrar
#sidebar-wrapper como
#right-sidebar-wrapper y añadiremos una nueva línea de código para la nueva columna lateral:
#left-sidebar-wrapper (con propiedades y valores similares a los de la otra columna lateral). También hay que
modificar el ancho total del blog, teniendo en cuenta que la suma del ancho del left-sidebar-wrapper, del main-wrapper y del right-sidebar-wrapper debe ser siempre ligeramente inferior al ancho del outer-wrapper (no hay que olvidar aplicar el mismo cambio de ancho total al
header-wrapper y al
footer [o
footer-wrapper]). Es conveniente añadir al main-wrapper la propiedad
margin-left con el correspondiente
valor de longitud en píxeles, para separar el contenedor de los
posts del de la nueva columna lateral.
El código que deberemos de implementar será similar al del siguiente ejemplo:
/* Outer-Wrapper */
#outer-wrapper {
width: 980px;
margin: 0 auto;
padding: 0;
text-align: justify;
font: $bodyfont;
border: 4px ridge #3399cc;
background: #c3d9ff;
}
#left-sidebar-wrapper {
width: 210px;
padding: 10px 8px 10px 8px;
float: $startSide;
text-align: center;
border: 0;
background-color: #eeeeee;
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 */
}
#main-wrapper {
width: 475px;
margin-top: 4px;
margin-left: 5px;
padding: 10px 8px 10px 8px;
float: $startSide;
border-top: 2px solid $bordercolor;
border-right: 1px solid $bordercolor;
border-bottom: 2px solid $bordercolor;
border-left: 1px solid $bordercolor;
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 */
}
#right-sidebar-wrapper {
width: 235px;
padding: 10px 8px 10px 8px;
float: $endSide;
border: 0;
background-color: #eeeeee;
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 */
}
Por último, hay que añadir a la plantilla el siguiente código debajo de la línea resaltada en
rojo (renombrando el elemento
div id='sidebar-wrapper'):
<div id='content-wrapper'>
<div id='left-sidebar-wrapper'>
<b:section class='left-sidebar' id='left-sidebar' preferred='yes'>
</b:section>
</div><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='right-sidebar-wrapper'>
<b:section class='right-sidebar' id='right-sidebar' preferred='yes'>
</b:section>
</div>
----------------------------------------------------------------------------------------------------------------------------------------------------------
