Muchas veces me han preguntado cómo aumentar el ancho disponible del blog. Es que las plantillas por defecto están pensadas para resoluciones de 800 pixeles de ancho y hoy por hoy, tal como puede verse en cualquier estadística, ese es un valor demasiado escaso; menos del 5% de los visitantes tienen resoluciones inferiores a 1024 así que ese será el número mágico sobre el cual deberíamos trabajar ya que es el tipo de resolución más utilizada.
Al igual que cada hogar es un mundo, cada plantilla también lo es por lo que se hace muy difícil dar una solución que las contemple a todas. Se me ocurre que lo mejor es tratar de aprender qué es lo que Blogger hace y como es el esquema gráfico de un blog y para eso, no podemos empezar con lo más complejo sino con lo más simple que es la plantilla Mínima.
Pero no se confundan. Lo de Mínima no es un calificativo, sólo es un nombre y a mi juicio, es la mejor codificada y es el modelo que deberíamos usar para crear cualquier otra, no sé si es perfecta pero se acerca bastante y con ese esquema, entendiendo cómo modificarla, jamás tendremos problemas con los navegadores y sus caprichos ¿Exagero? Tal vez un poco pero confieso que es el modelo que utilizo para cualquier blog incluyendo WordPress.
Si queremos empezar a rediseñar la plantilla tenemos dos opciones: o nos encomendamos a la buena voluntad de alguien o aprendemos. Yo, prefiero lo segundo así que empiezo creando un blog, seleccionando la plantilla Mínima de Blogger y dejando la Configuración por defecto. Agrego entonces uno o más posts con muchos "Lorem ipsum dolor sit amet ..." y ya estoy listo para comenzar.
Pero no se confundan. Lo de Mínima no es un calificativo, sólo es un nombre y a mi juicio, es la mejor codificada y es el modelo que deberíamos usar para crear cualquier otra, no sé si es perfecta pero se acerca bastante y con ese esquema, entendiendo cómo modificarla, jamás tendremos problemas con los navegadores y sus caprichos ¿Exagero? Tal vez un poco pero confieso que es el modelo que utilizo para cualquier blog incluyendo WordPress.
Si queremos empezar a rediseñar la plantilla tenemos dos opciones: o nos encomendamos a la buena voluntad de alguien o aprendemos. Yo, prefiero lo segundo así que empiezo creando un blog, seleccionando la plantilla Mínima de Blogger y dejando la Configuración por defecto. Agrego entonces uno o más posts con muchos "Lorem ipsum dolor sit amet ..." y ya estoy listo para comenzar.
Desde Diseño | Elementos de la página voy a añadir y organizar los elementos que aparecen por defecto (Archivos, Seguidores, Perfil); esto sólo es maquillaje personal así que si no queremos, podemos dejarlos tal como están.
De todas maneras, hagamos o no hagamos esos cambios, no es mala idea detenerse un poco en esa pantalla de Blogger porque allí podremos ver el esquema gráfico del blog que es la base para entender cómo cambiarlo.
Nuestro blog no es otra cosa que una serie de rectángulos independientes que se van creando desde afuera hacia a dentro, desde el más grande hasta el más chico, uno dentro de otro. Lo que vemos en la pantalla del monitor es el rectángulo más grande, el que contiene a todos los otros y es el que está definido entre las etiquetas <body> y </body> así que las propiedades generales de nuestro sitio quedan establecidas allí.
De todas maneras, hagamos o no hagamos esos cambios, no es mala idea detenerse un poco en esa pantalla de Blogger porque allí podremos ver el esquema gráfico del blog que es la base para entender cómo cambiarlo.
Nuestro blog no es otra cosa que una serie de rectángulos independientes que se van creando desde afuera hacia a dentro, desde el más grande hasta el más chico, uno dentro de otro. Lo que vemos en la pantalla del monitor es el rectángulo más grande, el que contiene a todos los otros y es el que está definido entre las etiquetas <body> y </body> así que las propiedades generales de nuestro sitio quedan establecidas allí.
Dentro de ese gran rectángulo, hay otro llamado outer-wrapper que es más pequeño ya que lo separamos de los bordes de la ventana y que tiene una característica fundamental, tiene definido el ancho (width) que es, justamente, el ancho real de nuestro sitio y lo más común es que esté centrado con respecto a la ventana. Dentro de este hay otro más llamado wrap2 que normalmente no tiene propiedades y por lo tanto, es exactamente igual que el anterior ¿Para qué dos? Sería largo de explicar pero, simplificando, esa es la mejor forma de evitar problemas de compatibilidad con los navegadores.
Y siguen los rectángulos. Siempre, de afuera hacia adentro lo que quiere decir que el externo contendrá uno o más y por lo tanto, el contenido tendrá un ancho menor o igual al contenedor pero nunca será más grande. Y aquí vale una aclaración: para evitar problemas, el ancho no sólo es el valor de width, el ancho que debemos considerar debe incluir los bordes y los márgenes.
ancho real = width + border + margin + padding
Así que en el rectángulo outer-wrapper vamos a encontrar otros tres rectángulos más, todos del mismo ancho, uno debajo del otro: header-wrapper es el encabezado del blog, content-wrapper es el contenido (posts+sidebar) y footer-wrapper el pie de página del sitio.
Nuevamente, dentro de cada uno de esos rectángulos habrá otros y dentro de esos otros habrá otros más y así seguiremos hasta el último que será una imagen, un texto o cualquier otra cosa pero, faltaría ver el que nos importa que es el rectángulo central, el llamado content-wrapper porque es con el cual nos manejaremos.
Ese bloque rectangular tiene, por defecto, cuatro rectángulos más. El superior se llama crosscol-wrapper y y por ahora no nos interesa porque es invisible; a los efectos de las pruebas, podemos eliminarlo. El último también es invisible y muy importante, dice:
Y siguen los rectángulos. Siempre, de afuera hacia adentro lo que quiere decir que el externo contendrá uno o más y por lo tanto, el contenido tendrá un ancho menor o igual al contenedor pero nunca será más grande. Y aquí vale una aclaración: para evitar problemas, el ancho no sólo es el valor de width, el ancho que debemos considerar debe incluir los bordes y los márgenes.
ancho real = width + border + margin + padding
Así que en el rectángulo outer-wrapper vamos a encontrar otros tres rectángulos más, todos del mismo ancho, uno debajo del otro: header-wrapper es el encabezado del blog, content-wrapper es el contenido (posts+sidebar) y footer-wrapper el pie de página del sitio.
Nuevamente, dentro de cada uno de esos rectángulos habrá otros y dentro de esos otros habrá otros más y así seguiremos hasta el último que será una imagen, un texto o cualquier otra cosa pero, faltaría ver el que nos importa que es el rectángulo central, el llamado content-wrapper porque es con el cual nos manejaremos.
Ese bloque rectangular tiene, por defecto, cuatro rectángulos más. El superior se llama crosscol-wrapper y y por ahora no nos interesa porque es invisible; a los efectos de las pruebas, podemos eliminarlo. El último también es invisible y muy importante, dice:
<div class="clear"></div>
Los dos del medio son el punto clave del diseño: main-wrapper es el rectángulo que contiene las entradas y sidebar-wrapper el que contiene los elementos de la sidebar. Ambos tienen una particularidad: flotan, y eso es lo que nos permite colocarlos uno al lado del otro ¿Por qué? porque la suma de sus anchos es inferior al ancho del contenedor.
¿No les ha pasado cosas como "ayyyyy la sidebar se fue al fondo"? Esa es la explicación.
¿No les ha pasado cosas como "ayyyyy la sidebar se fue al fondo"? Esa es la explicación.
Y ahora sí, basta de palabrería, hacemos click en Edición de HTML para empezar a jugar.
En la plantilla, el estilo CSS es todo eso que está entre <b:skin> y </b:skin>. Allí, haremos una primera modificación para que todo esté claro y siga el mismo criterio. Por alguna extraña razón, las definiciones del footer no son razonables así que las cambiaremos. Buscamos:
En la plantilla, el estilo CSS es todo eso que está entre <b:skin> y </b:skin>. Allí, haremos una primera modificación para que todo esté claro y siga el mismo criterio. Por alguna extraña razón, las definiciones del footer no son razonables así que las cambiaremos. Buscamos:
#footer {
clear: both;
margin: 0 auto;
padding-top: 15px;
line-height: 1.6em;
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
width: 660px;
}y lo cambiamos por esto:
#footer-wrapper { clear: both; margin: 0 auto; width: 660px; } #footer { letter-spacing: .1em; line-height: 1.6em; padding-top: 15px; text-align: center; text-transform: uppercase; }
También agregaremos esto para que todos los bloques queden definidos:
#content-wrapper {
position: relative;
width: 100%;
}Y ocultaremos la navbar porque me molesta:
#navbar {
display: none;
height: 0;
visibility: hidden;
}Esta es la plantilla por defecto y en el ejemplo, pude hacerse click sobre los enlaces de la entrada para colorizar los diferentes rectángulos e identificarlos.
Ahora, vamos a cambiar el ancho del blog y lo que vamos a mirar es el valor que está definido en outer-wrapper:
Ahora, vamos a cambiar el ancho del blog y lo que vamos a mirar es el valor que está definido en outer-wrapper:
#outer-wrapper {
width: 660px;
margin: 0 auto;
padding: 10px;
text-align: $startSide;
font: $bodyfont;
}Cambiaremos entonces el valor de la propiedad width; le voy a dar 980 pixeles porque si bien el ancho de la pantalla es de 1024, debemos descontarle los márgenes, en este caso dice padding:10px; así que sería:
10 - 1024 - 10 = 1004
Pero aún así sería demasiado ya que hay una barra de desplazamiento vertical que debemos descontar y esa barra varía de tamaño según sea el navegador. Por si fuera poco, Internet Explorer se ejecuta en una ventana que tiene un borde lo que disminuye aún más el espacio disponible. En principio, en IE el ancho máximo sería de 983 pixeles y en Firefox de 991 pixeles así que tomo un número redondo y resuelvo las pequeñas diferencias.
¿Qué pasaría si lo hiciera más ancho? Nada grave, apareceria entonces una barra de desplazamiento horizontal.
Así que si he decidido que mi blog tenga 980 pixeles de ancho y ahora tiene 660 pixeles, le estaré agregando 320 pixeles que voy a colocar como valor en los tres rectángulos principales:
10 - 1024 - 10 = 1004
Pero aún así sería demasiado ya que hay una barra de desplazamiento vertical que debemos descontar y esa barra varía de tamaño según sea el navegador. Por si fuera poco, Internet Explorer se ejecuta en una ventana que tiene un borde lo que disminuye aún más el espacio disponible. En principio, en IE el ancho máximo sería de 983 pixeles y en Firefox de 991 pixeles así que tomo un número redondo y resuelvo las pequeñas diferencias.
¿Qué pasaría si lo hiciera más ancho? Nada grave, apareceria entonces una barra de desplazamiento horizontal.
Así que si he decidido que mi blog tenga 980 pixeles de ancho y ahora tiene 660 pixeles, le estaré agregando 320 pixeles que voy a colocar como valor en los tres rectángulos principales:
#outer-wrapper {
.......
width: 980px; /* cambio 660 por 980 */
}
#header-wrapper {
.......
width: 980px; /* cambio 660 por 980 */
}
#footer-wrapper {
.......
width: 980px; /* cambio 660 por 980 */
}Por último, debería resolver cómo distribuiré esos 320 pixeles extras entre el rectangulo de entradas y el de la sidebar. En este caso le agregaré 150 a las entradas y el resto, a la sidebar así que también cambio esos valores en el CSS:
#main-wrapper {
.......
width: 560px; /* 410 + 150 = 560 */
}
#sidebar-wrapper {
.......
width: 390px; /* 220 + 170 = 390 */
}Con eso, tengo completada la tarea y como no he cambiado márgenes ni ninguna otra propiedad, el resultado será la misma estructura pero, se distribuirá de mejor manera en la ventana del monitor.
¿Podemos seguir cambiando cosas? Sí: esto continuará ...
¿Podemos seguir cambiando cosas? Sí: esto continuará ...
225 comentarios:
Cómo corregir eso no es algo que pueda indicarte; es algo que sólo puede hacerse dentro del mismo blog. Tendrías que ver cómo establecer las propiedades de cada sección para que se vena de otro modo en la pantalla de diseño; fijate en esta entrada y en esta otra.
Gracias, ahora lo reviso
Hola, he estado buscando en mi plantilla, adivinando, buscando alternativas y no encuentro como modificar la distancia de la caja de comentarios tal como se ve en esta imagen http://dl.dropbox.com/u/37643524/C_Web/Coment.PNG no sé si sepas en qué parte de la plantilla está la clave, he leído algunos de tus entradas y me ha ayudado como en los metatag, gracias.
Gracias hermano, lo pude arreglar al problema de los gadgets desordenados.. la prueba: http://k27.kn3.net/198DA16AE.png jeje ;)
ahora tengo otro, no puedo lograr que el gadget de las entradas del blog salga en la portada del blog abajo del gadget "pruebas abajo", he logrado que salga en la parte inferior pero cuando lo hago se me baja toda la sidebar hasta la altura de las entradas del blog (después del gadget "pruebas abajo")
esta es la plantilla original: http://revolutionchurchtemplate.blogspot.com/
yo descargué una copia (no del autor sino de otra parte) y la he estado editando pero mis conocimientos son muy basicos.
este es mi blog de pruebas (con la plantilla trucha jaja): http://pruebplan.blogspot.com/
me puedes ayudar para que salga como la plantilla original en las entradas del blog resumidas por favor
muchas gracias hermano
Saludos
mdlmb:
Agregando esta regla en el CSS, le quitas el margen a ese rectángulo:
#comments-block.avatar-comment-indent {margin-left: 0;}
y eventualmente, colocas esto:
#comments-block.avatar-comment-indent {margin-left: 0 !important;}
CristJian:
Así, en general, debería estar colocado dentro del DIV #contentleft; no puedo decirte el lugar preciso porque eso es algo que sól ose ve en la plantilla y además, luego de ser colocado , debería tener propiedades CSS similares a las de los DIVs de arriba en cuanto a flotación y ancho.
hola hermano, ya arreglé la plantilla que me estaba molestando (por no decir triturando la cabeza) estos dias.. jaja
una pregunta, encontré este script en esta plantilla que estoy editando y también hace resumir las entradas, pero aun no cacho el truquito
medio medio estuve moneando para que se vea como la original-> http://revolutionchurchtemplate.blogspot.com/ en el área de las entradas y por lo que deduzco, en la original solo muestra una entrada por pagina, pero usando el script muestra 3 entradas resumidas... eso es lo que no logro cacharle
aqui te paso lo que he encontrado, no sé si es todo pero si falta algo te paso la plantilla que he estado arreglando (claro, si es que no estoy molestando mucho jaja xP )...
este es lo que encontré del script http://dl.dropbox.com/u/37663913/script.txt
mi blog de pruebas: http://pruebplan.blogspot.com/
Saludos
Gracias por realizar este tipo de tutoriales me lo leeré poco a poco.
Un saludo.
Regi
No se que pasa que no encuentro ninguna etiqueta de las que se incluyen en . Igual es que al cambio de los nuevos diseños no corresponden.
Que pena llego tarde.
vagabundia disculpa si soy el unico que no entendi pero... tu blog se pondria expandir un poco mas quitando esos bordes laterales mas claros??
o esto es lo maximo que se puede expandir?
El ancho del blog es el que quieras definir y no hay restricciones al respecto.
#footer {
clear
amigo no encuentro esa parte para empesar a modificar
mi plantilla es esta por las dudas
http://pruebaa123455.blogspot.com.ar/
Supongo que te refieres al #footer-wrapper y allí está; si los IDs o clases de esa plantilla varian con respecto a los que usa Blogger en una plantilla común, tendrás que ver cuál es cual ya que no existe un único método.
Hola tambien soy dueña de un blog en blogspot y no he podido hacer el ancho a las columnas a pesar que lo intenté durante todo un día,(soy nueva en esto) pero necesito ayuda urgente que tal si te envio los codigos de mi plantilla y si no es mucha molestia que me lo cambies el ancho de las columnas y el cuerpo en general , agradecere tu ayuda muchas gracias (pdt. estan expandidos los artilugios) a pesar de que lo intente todo sigue saliendo la columna izquierda debajo como muestras en la imagen
Tendría que ver tu ejemplo online. Si estás usando las nuevas plantillas, los anchos se cambian desde el mismo editor de plantillas ya que hacerlo manualmente es engorroso.
Hola JMiur: Se me han desplazado los gadgets que tenía en los laterales del blog,debajo de las entradas y no soy capaz de ponerlos en su sitio,ya que en el diseño de la plantilla los veo colocados en los laterales,
Cuando puedas échame un cable ¿OK?
Es curioso en las páginas estáticas se ve bien pero en la de inicio no
Lo mas probable es que alguna de las entradas, seguramente la última, tenga algún error. Colócalas como borrador hasta dar con la que causa el problema.
Muchísimas gracias!!! Eres un genio,era una entrada.Gracias de nuevo
Maestro aquí voy aprendiendo lo que debí aprender hace 2 o 3 años
pero como no aprender con tantas guías y tan buena explicación...
En ocasiones me tardo en entender algunos trucos y es que las cosas no se aprenden de la noche a la mañana, muchas gracias por tan excelentes explicaciones
Que gran maestro, saber es una cosa, saber enseñar es otra. Genial lo tuyo.
Flaco, excelente!! sos un groso. Me sirvió demasiado lo que explicaste. Me acabo de bajar un template de btemplates y tenía el problema que no podía modificar el ancho desde el editor de plantillas. Bueno, ahora gracias a tu artículo lo estoy haciendo desde el código. Me sirve porque no tenía idea antes qué era el main wrapper, outer wrapper, etc y al estar ahí la imagen me vino de diez! Gracias! =)
De gran ayuda amigo, gracias
Podrías decirme cómo hacer para ampliar esta plantilla?
No encuentro la forma de hacerlo..
http://mpferrari.blogspot.com.ar/
Tiene 1300 pixeles de ancho así que es bastante amplia. De todos modos, para modificarla, debes seguir las indcaciones de esta misma entrada e ir viendo los resultados paso a paso.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...