| 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. | 
6 comentarios :
no sirve el demo :( es sólo para invitados
Disculpa Truco95. Un descuido mío. Ya está habilitado para todo el mundo. Gracias por tu visita.
Saludos.
Mi blog podría ser un buen ejemplo no? http://adorabledesign.com.ar :) Muy claro el tutorial. Saludos!
Maira: Un excelente ejemplo. Felicitaciones!
Saludos.
No soy capaz, en ningún sitio aparece sidebar-wrapper :S
M: Si tu plantilla es de la nuevas sigue este tutorial:
http://bloguermast.blogspot.com/2012/06/sidebar-fija-plantillas-nuevas.html
Saludos.
Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.
El autor.