| Reducir el ancho de la cabecera es un recurso para lograr un buen diseño en un blog de Blogger. Tomaremos como modelo la segunda plantilla Simple ya que, por estar su cabecera bien diferenciada dentro del cuerpo del blog, se adapta fácilmente a este procedimiento:  1.- Es aconsejable reducir el tamaño de los caracteres del título del blog ya que, por defecto, en esta plantilla es de 60px, tamaño que hace que la altura de la cabecera sea un tanto exagerada y, si el título es largo, ocupará en la cabecera, cuando hayamos reducido su ancho, más de una línea, aumentando aún más la altura de la cabecera. Entonces vamos a:
 ...y reducimos el tamaño de la fuente del título, al que mejor se adapte a la cabecera. 2.- Vamos a Edición de HTML:
...y lo eliminamos reemplazándolo con éste:
Con el anterior código asignamos a la cabecera un ancho y un margen izquierdo que la hagan congruente con el cuerpo de las entradas. 3.- El espacio dejado por la cabecera, a la derecha, lo ocupamos subiendo la sidebar, así: Como la sidebar tiene, por defecto, un margen superior de 0px, tendremos que superar ese margen con un número negativo de pixeles. Entonces localizamos y eliminamos el siguiente código:
...reemplazándolo con éste:
4.- Vista previa y Guardar plantilla. Nota: Dependiendo de los elementos que agreguemos en la sidebar, ésta puede desplazarse hacia arriba o hacia abajo. La ponemos en el lugar preciso aumentando o disminuyendo el número de pixeles que le dimos al margen superior, cambiando la cifra y observando con la Vista previa. 
|
28.6.12
Reducir ancho de cabecera, plantilla simple
Suscribirse a:
Enviar comentarios
(
Atom
)
15 comentarios :
Hola, te cuento que estoy comenzando mi blog y me he decido hacerlo basandome en la opcion que me da blogger con la plantilla travel, es la que mas me acomoda y me gusta, el tema es que no me gusta el gran espacio que hay entre la cabecera y la fecha de la primera o más reciente entrada, es mucho, sabes como puedo reducir ese espacio, busqué, pero no encuentro, es el espacio inferior que queda entre la foto de la cabecera y la fecha, te dejo el blog para que veas, espero me puedas ayudar, saludos y gracias por tu blog!
http://bloggertest4.blogspot.com/
bloggertest10: Deberás ponerle un margen superior negativo al cuerpo de las entradas, así: vas a:
Diseño ► Edición de html ► Continuar
Sin expandir plantillas de artilugios localizas el siguiente código:
.main-inner .column-center-inner {
padding: $(content.posts.padding) 0;
}
...que está en esta sección:
/* Main
----------------------------------------------- */
A ese código le agregas la siguiente línea, antes de la llave de cierre:
margin-top: -50px;
..debiendo quedarte así:
.main-inner .column-center-inner {
padding: $(content.posts.padding) 0;
margin-top: -50px;
}
La cifra negativa asignada a la cantidad de pixeles (-50px) la puedes modificar, aumentándola o disminuyéndola, y vas obervando con la "Vista previa" hasta lograr el margen que quieras, y guardas plantilla.
Saludos.
Hola puedo modificar un sistema de comentarios como este. Para que publique directamente el mensaje, que no me pida que será publicado tras la revisión
Anónimo, y ¿Cómo se hace esa modificación?
Saludos.
Hola Pedro Pablo, muchas gracias por el blog. Es utílisimo y claro.
Mi blog tiene la side bar a la izquierda y no coincide con la línea de la cabecera la que está más a la izquierda. Cómo puedo correr la sidebar hacia la izquierda para alinearla con la cabecera?
Muchas gracias de antemano por la ayuda
AT Ana Torres, debe ponerle un margen izquierdo negativo a la sidebar, así: localiza en la pantilla, sin expandir artilugios, esta etiqueta:
]]></b:skin>
...y antes de la misma pega este código:
#sidebar-wrapper {
margin-left: -20px;
}
Va mirando con la vista previa y modificando la cifra negativa (-20), aumentándola o disminuyéndola hasta que logre poner la sidebar en el lugar deseado.
Si no le funciona me dice, por favor, qué plantilla utiliza.
Saludos.
Gracias por su pronta respuesta, Pedro Pablo.
Lo intenté y no funcionó aún con valores negativos altos. Uso la plantilla simple.
Ayúdeme, por favor.
Saludos.
Ana, La plantilla Simple tiene la sidebar a la derecha; si en su blog está a la izquierda es porque le cambió de lugar. En ese caso, si hizo el cambio correctamente, el código que debe pegar, antes de la etiqueta
]]></b:skin>
es éste:
.main-outer {
margin-left: -30px;
}
...modificando la cifra negativa lo necesario.
Pero si no le cambió de lugar a la sidebar y tiene confusión en los conceptos "derecha" e "izquierda", cambia, en el código, "left" por "right".
¿Me cuenta si le funcionó?
Saludos.
Muchas gracias!! me fuiste de gran ayuda
¡Con mucho gusto Cris!
Saludos.
Hi, hice todo lo que dices tu, pero cuando termine y guarde la plantilla, desapareció la barra de desplazamiento y el blog se hizo más chico, esto sólo pasa en la página principal del blog, en las entradas o páginas estáticas aparece completo con la barra de desplazamiento, ¿qué pasó?, a un amigo también lo sucedió...
Anónimo, como se indica en el punto uno del tutorial se debe tener cuidado con la longitud del título del blog y el tamaño de los caracteres del mismo, ya que si el título ocupa mucho espacio, al reducir el ancho de la cabecera ésta aumentará su altura ocultando la barra de navegación.
Las medidas y los márgenes para la cabecera y la sidebar pueden no ser idénticas a las indicadas en el tutorial sino que se deben adaptar a las medidas del blog.
Saludos.
Holaa! podrías ayudarma reducir el tamaño del sidebar, quiero que las imágenes de mis entradas sean más grandes y no puedo hacerlo porque se ponen encima de la columna dl sidebar...
Gracias.
Hola Dolce Pao, en el sideñador de plantillas encuentras la opción para cambiar el ancho de la sidebar, siguiendo esta ruta, desde la página principal:
Diseño ► Plantilla ► Personalizar ► Diseñador de plantillas ► Ajustar ancho
Saludos.
hola me preguntaba si sabes como reducir el margen que queda en la parte superior del titulo, es decir arriba del titulo, quiero reducirlo. gracias
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.