sábado, 27 de marzo de 2010

Añadir una nueva barra lateral en Blogger

 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>


----------------------------------------------------------------------------------------------------------------------------------------------------------

1 comentario:

ANRAFERA dijo...

Muy interesante. Gracias por la exposición. Saludos.