Herramientas para Webmasters de Blogger: sidebar fija

21.6.12

Para fijar la sidebar en plantillas nuevas (Diseñador de plantillas) vamos a utilizar como modelos la Awesome inc. (Fantástico S.A.) y la Simple.

Sidebar fija para plantilla Awesome Inc.

1.- Vamos a Editar HTML:

Diseño

►

Plantilla

►

Editar HTML

►

Click dentro del editor

►

Ctrl+f

►

2.- Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo:

 .main-inner .column-center-inner,

.main-inner .column-left-inner,

.main-inner .column-right-inner {

padding: 0 5px;

}

...lo eliminamos y en su lugar pegamos éste:

 .main-inner .column-center-inner {

}

.main-inner .column-left-inner {

}

.main-inner .column-right-inner {

  padding: 0 5px;

  margin-top: -90px; /*Margen superior*/

  width: 310px; /*Ancho de la sidebar*/

  position: fixed; /*Para fijar la sidebar*/

}

Los comentarios resaltados en rojo son informativos y se pueden eliminar.

Con el anterior código, además de fijarla, estamos asignando a la sidebar un margen superior en número negativo para que llegue hasta el tope superior, y un ancho de 310px. Para subir o bajar la sidebar aumentamos o disminuimos el margen superior.

3.- Debido a que la sidebar ahora va a llegar hasta el tope superior, pasará por "encima" de la cabecera (header), tendremos que disminuír el ancho de ésta, así:

Localizamos el siguiente código

 .header-inner .Header .titlewrapper,

.header-inner .Header .descriptionwrapper {

  padding-left: 0;

  padding-right: 0;

  margin-bottom: 0;

}

...y le agregamos la línea con la que asignamos un ancho a la cabecera (header), debiendo quedar así:

 .header-inner .Header .titlewrapper,

.header-inner .Header .descriptionwrapper {

  padding-left: 0;

  padding-right: 0;

  margin-bottom: 0;

  width: 600px; /*Ancho asignado a la cabecera*/

}

El comentario resaltado en rojo es informativo y se puede eliminar.

4.- Vista previa y Guardar plantilla

Sidebar fija para plantilla Simple

1.- Vamos a Editar HTML:

Diseño

►

Plantilla

►

Editar HTML

►

Click dentro del editor

►

Ctrl+f

►

2.- Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo:

 .main-inner .column-right-outer {

  width: $(main.column.right.width);

  margin-right: -$(main.column.right.width);

}

...lo eliminamos y, en su lugar, pegamos éste:

 .main-inner .column-right-inner {

  padding: 0 5px;

  margin-top: -90px; /*Margen superior*/

  width: 310px; /*Ancho de la sidebar*/

  position: fixed; /*Para fijar la sidebar*/

}

Los comentarios resaltados en rojo son informativos y se pueden eliminar.

 .header-outer {

  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;

  _background-image: none;

...y le agregamos la línea con la que asignamos un ancho a la cabecera (header), debiendo quedar así:

 .header-outer {

  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;

  _background-image: none;

width: 610px; /*Ancho de la cabecera*/

}

El comentario resaltado en rojo es informativo y se puede eliminar.

4.- Vista previa y Guardar plantilla

Vea: Sidebar fija para plantillas antiguas.

15.6.12

Podemos hacer que la sidebar de nuestro blog quede fija. Tomaremos como referencia la plantilla Mínima, procedimiento que, tomado como modelo, podremos aplicar a otras plantillas antiguas.

1.- Vamos a Editar HTML:

Diseño

►

Plantilla

►

Editar HTML

►

Click dentro del editor

►

Ctrl+f

►

2.- Localizamos el código correspondiente a la envoltura de la sidebar, poniendo dentro del rectángulo de búsqueda (Search) una línea del mismo:

 #sidebar-wrapper {

  width: 220px;

  float: $endSide;

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

}

Este código no está asignando a la sidebar márgenes superior (up) ni izquierdo (left), que serán necesarios por lo que se explica más adelante. Entonces lo eliminamos y lo reemplazamos por el siguiente:

 #sidebar-wrapper {

  margin-top: -185px; /*Margen superior*/

  margin-left: 440px; /*Margen izquierdo*/

  position: fixed; /*para fijar la sidebar*/

  width: 220px;

  float: $endSide;

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

}

(Los comentarios resaltados en rojo son informativos y se pueden eliminar)

Con esta modificación hemos dado a la sidebar:

Un margen superior en número negativo, para que sobrepase la cabecera y llegue hasta el tope superior, y
Un margen izquierdo suficiente para que se ubique al lado derecho de las entradas, ocupando su lugar original, ya que, al ponerla fija, se desplaza hacia la izquierda, quedando sobre las entradas.

Si queremos subir o bajar más la sidebar aumentamos o disminuimos el valor absoluto de la cifra negativa que le pusimos al margen superior (-185px).

3.- Debido a que la sidebar ahora va a llegar hasta el tope superior, pasará por "encima" de la cabecera (header), tendremos que disminuír el ancho de ésta, así: Localizamos el código correspodiente a la envoltura de la cabecera:

 #header-wrapper {

  width:660px;

  margin:0 auto 10px;

  border:1px solid $bordercolor;

  }

Lo eliminamos y lo reemplazamos por éste:

 #header-wrapper {

  width:405px; /*Ancho de la cabecera*/

  margin:0 auto 10px;

  border:1px solid $bordercolor;

  margin-left:0px; /*Margen izquierdo de la cabecera*/

  }

(Los comentarios resaltados en rojo se pueden eliminar)

Con esta modificación hemos reducido el ancho de la cabecera dejándolo igual al ancho del cuerpo de las entradas, y le hemos dado un margen izquierdo de cero para que se ubique a ese costado.

4.- Vista previa y Guardar plantilla

Vea: Sidebar fija para plantillas nuevas.