236

Ensanchar la plantilla Mínima

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
Me han pedido en un comentario la explicación para ensanchar la plantilla Mínima de Blogger, así que paso a explicarlo a continuación. Estas mismas modificaciones sirven para todas las plantillas Mínima (Dark, Blue, Ochre y, por supuesto la Mínima "normal").
Tendremos en cuenta que partiremos de una Mínima tal cual la proporciona Blogger, sin ninguna modificación anterior.
Voy a tomar las medidas para ello que considero más adecuadas para su perfecta visualización en distintas resoluciones aunque, por supuesto, cada uno puede aumentar o disminuir las mismas según considere oportuno.

[1] Vamos a la parte de Edición de HTML en nuestra plantilla. No hace falta que expandamos los artilugios.
En primer lugar localizaremos el #outer-wrapper { esto es, por así llamarlo, el "cuerpo" del blog, tendremos que ensancharlo para más tarde cuando hagamos lo mismo con el cuerpo de las entradas y la sidebar, estan tengan suficiente espacio.
Nos fijamos en la primera línea:
#outer-wrapper {
width: 660px;
Cambiaremos esa línea por width: 850px;

[2] Vamos ahora a ensanchar el cuerpo de entradas (main), buscamos un poco más abajo de lo anterior esto: #main-wrapper { y al igual que antes cambiamos la línea del width (ancho) por esta: width: 500px;


31] Un poco más abajo vemos #sidebar-wrapper {, ahí es donde modificaremos el ancho de nuestra sidebar con el mismo sistema que antes, cambiando la línea del width (ancho) por esta otra: width: 250px;


[4] Esta parte no es imprescindible, pero según mi opinión, el blog gana bastante estéticamente si la cabecera (header) y el pie del blog (footer) tienen el mismo ancho que el resto del blog. Para hacer este cambio buscamos (hacia arriba) esta parte: #header-wrapper { y cambiamos la línea del width porwidth:850px; (el mismo ancho que el cuerpo del blog), así la cabecera ocupará el mismo espacio que las entradas y la sidebar juntas.
Bajamos ahora por el código de la plantilla, hasta encontrar el #footer { y le ponemos también el mismo ancho que el blog: width:850px;

[5] Usamos la vista previa, y si todo ha ido según lo previsto, guardamos los cambios.

[Nota]

Si cambiamos las medidas usadas para ensanchar el width (ancho) de las entradas y la sidebar, tendremos en cuenta que la suma de los dos valores no deben nunca sobrepasar la anchura total del blog y, que tendremos que dejar, como en este caso, unos pixeles sobrantes lo que nos asegurará una distancia optima entre los elementos y, por tanto, una correcta visualización del blog.

Ejemplo de plantilla
Ejemplo de plantilla

Podéis consultar también como añadirle una nueva sidebar a la plantilla Mínima.

Entradas Relacionadas:

236 comentarios:

«El más antiguo   ‹Más antiguo   Total comentarios: 201 – 236 de 236   Más reciente›   El más reciente»
Anónimo

Supernovas Tienes razón :S no me dí cuenta de eso... mira, create un nuevo blog con la plantilla Mínima y ahí puedes ver las medidas y quizá te sea útil además como blog de pruebas.

Supernovas

OK. Gracias

Unknown

Hola, seguí paso a paso tus sugerencias, uso la plantilla Minima Strech y las medidas que dices que debo de cambiar vienen en porcentajes, no viene tal cual el "width: 660px;".
No se que hacer, quiero que mi plantilla sea de dos cols pero no tan ancha como la que uso actualmente, si no como esta tuya con dos franjas blancas a los costados, gracias! Ojalá puedas ayudarme.
Los cambios los hago en un blog de pruebas y actualmente este es mi blog http://mamadealtademanda.blogspot.com/

Adriana Pecyner

Graias Rosa, ya lo encontré, tengo una diferencia de color por el header, pero esta mucho mejor. mil gracias.

Anónimo

Mamá de Alta Demanda Cámbiate la plantilla a la Mínima normal y te evitarás dolores de cabeza...

Jacqueline

Muchas Gracias, me cree un blog de prueba para aprender a manejar todo bien para mi blog

La hormiguita

Hola Rosa,..... me gusto mucho el cambio de header... lindo. Bueno necesito tu ayuda, estoy haciendo un blog, para una amiga use de plantilla base la snapshot que me fue mas facil de modificar y le puse una cabecera pero no queda en su lugar y sobra un chiquitito y no es por la medida, cuando carga las págian es como que aparece bien y despues se corre y aparte a veces aparece la original de abajo que no supe como sacarla......???? por si es necesario te paso el blog. lidiamarxer.blogspot.com otra cosa que me gustaría sacar es mostrando entradas etiqueta...blabla...bla... se puede?
Espero que me puedas ayudar, desde ya como siempre muchas gracias.:)

Anónimo

La hormiguita La cabecera yo la veo bien... quizá es que uso los navegadores actualizados en sus últimas versiones.

En cuanto al mensaje de etiquetas, mira aquí:
http://elescaparatederosa.blogspot.com/2007/05/eliminar-mensaje-de-etiquetas.html

La hormiguita

Muchas gracias Rosa, ya saque lo de mostrar las entradas... muchas gracias, también encontre un post de esa plantilla en el escaparate, me ayudo mucho. Solo me queda pendiente, comentarte que guarde la palntilla y la quise subir a un blog de prueba y me salió esto:
No hemos podido guardar tu plantilla
Por favor, corrige el siguiente error y envía la plantilla de nuevo.
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "link" must be terminated by the matching end-tag "".?????
Espero este todo bien....
un abrazo.

Anónimo

La hormiguita Pues no puedo saber exactamente donde, pero es algún enlce que ha quedado sin cerrar, probablemente le falte la </a> al final o algo así... a veces sobre la plantilla que trabajas Blogger lo da de paso pero al tratar de cargarla no... suelen ser nimiedades pero que molestan...

La hormiguita

Gracias Rosa, habia en rojo algo que no copie, pero , no es momento... que tengas unas hermosas fiestas.... gracias por todo.Puse la nieve quedo hermoss....:)
un abrazo.
Un abrazo para todos los que comparten el blog.

kriis fine

Muchas gracias por la información, me ayudo bastante, soy nueva en esto y buscando encontré la solución en tu blog, lo que me gustaría es saber poner las fotos más grandes, como podría hacerlo? porke al subirlas ya la puse en medida máxima.

gracias de antemano!!

Anónimo

kriis fine Mira si esto te sirve:
http://elescaparatederosa.blogspot.com/2008/10/imagenes-tamao-real-en-blogger.html

J.M. Rábago García

Hola Rosa. Ensanché la platila, se ve mucho mejor. El problema es a la hora de publicar las fotos, me siguen apareciendo al mismo tamaño que antes de ensancharla. Yo quiero que ocupe todo el espacio del main-wrapper. Como se hace? qué hago mal? Si te dá por entrar en el blog verás que he vuelto a las medidas originales. Un saludo Rosa.

Rosa

MAROMOS MOUNTAIN Si subes las fotos a la entrada desde tu PC a Blogger, una vez subidas y pinchando sobre ellas puedes escoger varios tamaño, el mayor creo que es "extra grande" o algo así... ocupa el espacio de la entrada.

J.M. Rábago García

Hola Rosa. Hago lo que dices pero si pincho sobre la foto no me aparece ninguna opción de escoger tamaño. En edición si puedo pinchar sobre ella y arrastrarla para que se agrande, pero me la deforma y en la ventana que se abre para subir la imagen solo puedo elegir entre tamano pequeño, medio o grande. No sé, cuando tengas un rato haber si me dices algo. Gracias Rosa.

J.M. Rábago García

Hola Rosa, soy yo otra vez. Ya lo arreglé, era el editor antiguo, con el nuevo si lo puedo hacer. Muchas gracias.

Rosa

MAROMOS MOUNTAIN Si, me di cuenta después... siempre pienso que todo el mundo anda "actualizado" :S
Mis disculpas!

[Enrike23]

:) GRACIAS ROSA! ERES GENIAL ... TUS CODIGOS SON DE MUCHA AYUDA!

La Maira

Señora: MIL GRACIAS su ayuda resulto sumamente util, practica y sobre todo COMPRENSIBLE.

Rosa

La Maira ¡Gracias encanto! :D

Amo

GROSAAAAAAAAAAAA

Francisco González

Muy bueno y util el articulo, lo he puesto en practica y ha sido un exito.
Tienes un blog muy interesante.
Gracias.

Eugenia Ramos Psijas

Hola Rosita me gusta mucho tu blog ya que eres muy didactica para explicar. Quiero que me ayudes con lo sgte: en mi blog hice algunos cambios como por ej: eliminar los gadget de los lados para darle mas espacio al cuerpo central. Es posible que sin perder el actual ancho de las entradas, pueda poner gadget a ambos lados ?
http://www.mylittlegreatworld.blogspot.com

Gracias de antemano

Cocina

Hola Rosa!estoy usando el salto de linea en mis entradas y quiesiera agrandar las entradas individuales podrias orientarme, cual es el codigo que deberia cambiar?
saludos

Anónimo

Cocofansclub Pues el que dice aquí en el paso [2]... pero ten en cuenta que si ensanchas tus entradas, probablemente no habrá suficiente espacio y se "caerá" la sidebar... en un blog todo está dentro de un contenedor, así que cuando aumentamos algo de forma individual, también habría que aumentar el contenedor (paso [1])

Cocina

Comprendido Ro :D
muchas gracias!

Andres

hola a mi no me funciona busque con ctrl + f y busque y no encontre nada

Anónimo

Andres Y no vas a encontrarlo... tu plantilla es de las nuevas, así que eso se hace desde el Diseñador.

Vicky

Como hago para ensanchar la cabezera del blog , no soy muy buena para estas cosas y me gustaria aprender para que quede bien!

Gracias (:

idiomatica-compulsiva.blogspot.com ( es mi blog )

Rafael Monsanto Cruz

Estimada Rosa tengo un problema con mi plantilla y es que en #outer-wrapper { lo que me sale es lo siguiente:

/** Tweaks for layout editor mode */
body#layout #outer-wrapper {
margin-top: 10px;
}
/*----------Banner 125x125-----------*/

.banner{
margin: 0 0 10px 0;
padding: 10px auto 10px;
width:100%;
float:center;
}
.banner ul {
margin: 0px 0px;
padding: 10px 25px;
list-style-type:none;
}
.banner li{
height:125px;
width:125px;
margin: 6px 6px ;
padding:5px 5px;
list-style:none;
display : block;
display:inline;
float:right;
}
.banner li a:link, .banner li a:visited {
text-decoration: none;

No encuentro donde modificarlo.

Anónimo

Vicky Tu cabecera ya es tan ancha como el resto de tu blog... lo que pasa es que has colocado una imagen mucho más estrecha... has de subir una imagen de aproximadamente 950px de ancho.

Anónimo

Rafael Monsanto Cruz ¿Para que plantilla es? Estas explicaciones son para la Mínima de Blogger, no para otras, menos si son del nuevo diseñador, ya que en esas se ensancha desde el Diseñador de forma automática.

ThunderGirl

Estuve usando varios de tus tutoriales para mejorar mi blog. Muchas gracias.

Unknown

yo no puedo hacerlo,no se porqe no lo entiendo bien:S

Anónimo

ANN Pues yo veo tu Mínima bien ancha... incluso demasiado diría yo...

«El más antiguo   ‹Más antiguo   Total comentarios: 201 – 236 de 236   Más reciente›   El más reciente»

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S