| 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:
2.- Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo:
...lo eliminamos y en su lugar pegamos éste:
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
...y le agregamos la línea con la que asignamos un ancho a la cabecera (header), debiendo quedar así:
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:
2.- Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo:
...lo eliminamos y, en su lugar, pegamos éste:
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
...y le agregamos la línea con la que asignamos un ancho a la cabecera (header), debiendo quedar así:
El comentario resaltado en rojo es informativo y se puede eliminar.4.- Vista previa y Guardar plantilla Vea: Sidebar fija para plantillas antiguas.
|
21.6.12
Sidebar fija para plantillas nuevas
Suscribirse a:
Enviar comentarios
(
Atom
)
19 comentarios :
muchas gracias, lo estaba buscando. Me quedó genial. Saludos.
@samgomdor: ¡Con mucho gusto! Gracias por su visita.
Saludos.
Pedro quedó muy buena, yo tengo mi plantilla fija, tu lo explicas muy bien
Hola Pedro,
Intenté aplicar el código. Funciona en cuanto que la sidebar queda fija pero me quedaba la ubica a la izquierda sobre las entradas y no me queda claro como cambiarle la disposición.
Gracias
¡Te felicito por tu labor!
mi blog por si quieres ojear el código: www.danielestevemanya.blogspot.com
Peter: Te quedaron muy bien tus blogs. Felicitaciones! Gracias por tu visita.
Saludos.
Daniel: Prueba con esto: Dale un margen izquierdo a la sidebar, así: en el código correspondiente a la sidebar, agrega antes de esta línea:
position: fixed;
ésta:
margin-left: 630px;
...aumentando o disminuyendo la cantidad de pixeles (630px), y observando con la Vista previa, hasta que te quede en el lugar correcto.
Si no te funciona esto me dices, por favor, qué plantilla utilizas.
Saludos.
Hola de nuevo,
¡Gracias!¡Funciona perfectamente! (tan solo tuve que calcular algo más de píxeles (800) y resuelto: www.danielestevemanya.blogspot.com).
Utilizo la plantilla "simple" que me parece que tiene una estructura distinta a otras...no lo sé,pero me ha costado un poco modificarla pero con esto la doy por terminada.
Gracias de nuevo, un saludo y felicitaciones por tu blog que es de gran utilidad :)
Hola, una pregunta: cambié de diseño de plantilla, pasé la sidebar al lado izquierdo pero ya no se queda fija. ¿Cómo le hago para que quede fija como antes? Espero que me pueda responder. Saludos.
@samgomdor: Dígame, por favor ¿qué plantilla utiliza?
Saludos.
Buen día, Pedro:
Realicé los pasos y quedó muy bien, sólo que ahora cuando pongo muchos gadgets en la sidebar, se amontonan en la parte de abajo del blog y se ve encimado. ¿Hay alguna solución para esto? uso la plantilla simple y la dirección del blog es www.rs.org.mx en este momento está sin entradas para que se pueda apreciar lo que comento. Muchas gracias por la ayuda.
Goku: Desafortunadamente la sidebar fija no es apropiada para poner en ella muchos gadgets porque los últimos no se verán, dependiendo de la altura de la resolución de la pantalla en la que se vea el blog, ya que la sidebar no se desplaza. Sin embargo, si aplicó el tutorial con exactitud, no debería ocurrir lo que comenta; los gadgets no se deberían amontonar.
Pruebe asignando una altura a la sidebar, agregando al final del código del punto dos del tutorial, antes de la llave de cierre, una de las siguientes líneas:
height: 100%;
o
height: 990px;
Saludos.
Gracias, Pedro, lo intentaré.
Saludos
Pedro, cómo puedo fijar la columna izquierda? Probé con el código para la Simple pero el menú queda sobre la columna central.
.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}
Blogger Template Style
Name: Simple
Espero puedas ayudarme
Saludos
J!mm, la plantilla Simple tiene, originalmente, la sidebar en la parte derecha y el cuerpo de las entradas en la parte izquierda. Entonces deduzco que con "columna izquierda" te refieres al cuerpo de las antredas. Si es así no te conviene fijarla porque las entradas no se verían completas.
O ¿es que agregaste una sidebar izquierda? En el blog que figura en tu perfil no la vi.
Si te refieres al cuerpo de las entradas y de todas maneras quieres fijarlo, me lo dices y te explico cómo hacerlo.
¿Me aclaras la pregunta, por favor?
Saludos.
Saludos.
Hola, Pedro gracias por la respuesta.
Mi sidebar es a la izquierda, es la que quiero bloquear. El blog lo tengo con contraseña ya que estoy en plenos cambios. Me avisas si necesitas verlo
J!mm, para que la sidebar no quede sobre la columna central deberás ponerle un margen izquierdo negativo, así:
El código correspondiente a la sidebar, o sea el que indicas en tu pregunta, o sea éste:
.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}
lo cambias por éste:
.main-inner .column-left-inner {
padding: 0 5px;
margin-top: -90px; /*Margen superior*/
width: 310px; /*Ancho de la sidebar*/
position: fixed; /*Para fijar la sidebar*/
margin-left: -500px; /*Margen izquierdo*/
}
..cambiando la cifra negativa del margen izquierdo(-500), hasta lograr que la sidebar se ubique en el sitio que le corresponde. Entre más aumentes la cifra más se desplazará la sidebar hacia la izquierda. Las cifras del margen superior y del ancho de la sidebar las cambias, si es necesario, hasta adaptarlas al diseño de tu blog.
Saludos.
Gracias Pedro! Funcionó perfecto! Tengo que ver bien el margen superior pero el resto muy bien.
Saludos
Hola, antes que nada, muchas gracias por el tutorial, queda de maravilla la sidebar fija, pero, ¿cómo puedo hacer que quede fija tanto en explorer como firefox? Es que en esos dos exploradores se superpone la sidebar a las entradas.
¡Un saludo!
María, este tutorial está probado en los principales navegadores, inclusive los que menciona, y en todos funciona perfectamente. Alguna modificación hecha en la plantilla impide que funcione en esos navegadores.
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.