Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
Esta es una de las plantillas de Blogger a la que es necesario modificar sus imágenes para conseguir ensancharla y que se vea optimamente.
Por supuesto, estas modificaciones parten de una plantilla "virgen", es decir, tal cual la proporciona Blogger.
1- Buscamos el #outer-wrapper { y modificamos su ancho en 950px:
width: 950px;
Hacemos lo mismo en #content-wrapper {
width: 950px;
2- En #main-wrapper { ponemos de ancho 600px:
width: 600px;
En
#sidebar-wrapper { ponemos de ancho 342px:
width: 342px;
3- En #sidebar { Cambiamos los pixeles de la imagen de adorno para que se vea un poco más hacia la derecha:
background: url(http://www.blogblog.com/thisaway_blue/bg_sidebar_arrow.gif) repeat-y 250px 0;
Si preferimos eliminarla (es ese adorno que parece un arbolito) borramos esa línea.
4- Ahora vamos a sustituir las imágenes del fondo por las que he modificado:
En #header-wrapper { cambiamos la url de la imagen por esta otra:
http://img142.imageshack.us/img142/2771/barraheaderjq1.gif
En #content-wrapper { cambiamos la url de la imagen por esta otra:
http://img225.imageshack.us/img225/2120/bgmainwrapperlq4.gif
En #footer-wrapper { cambiamos la url de la imagen por esta otra:
http://img524.imageshack.us/img524/5626/barrapiete3.gif
La he probado en Internet Explorer y Firefox con óptimos resultados.
DESCARGAR PLANTILLA
Gracias Rosa, salió tal cual!.
ResponderEliminarF3DOR VL4DIMIR
Gracias rosa me sirvio de mucho estaba cansado de todo tan apeñuscado
ResponderEliminarhola,ayer he visto tu web por primera vez y sin duda eres la mejor en explicar todas estas cosas que nos ayudan a hacer un mejor blog.En mi caso llevo utilizando la plantilla Harbor durante un año pero la quiero cambiar por la Thisaway blue,el problema es que no doy conseguido añadir una nueva columna,en cambio con la otra que tenía sí que puedo gracias a ti.
ResponderEliminarLa verdad es que la plantilla Harbor con dos columnas queda un poco cargada,por mucho que amplíe el ancho pues no me gusta,en cambio en la Thisaway blue creo que se presta mejor una segunda fila.¿cómo lo hago?También tenía pensado cambiar el color de fondo de una de las dos columnas,¿se puede hacer?
Hola Rosa! Yo tengo esta plantilla, y e seguido todos tus pasos. Y al final queda todo bien de forma excepto que en la sidebar sale como una raya en medio(a partir del segundo post. Pr cierto, la mia es la thisaway de color marron-naranja.
ResponderEliminarEspero que me puedas contestar en cuanto puedas.
Gracias
prisonbreakkclub@gmail.com
Kike, hevisto tu blog con IE y Firefox (últimas versiones) y no veo nada raro,ni ninguna raya... Puede ser cosa de tu navegador...
ResponderEliminarTe dejo el borde de abajo de la cabecera por si quieres colocarlo, es en #header-wrapper { cambias la url por esta:
http://img144.imageshack.us/img144/5725/headerabajobg8.jpg
Y en #footer-wrapper { esta:
http://img143.imageshack.us/img143/2973/footerarribaii1.jpg
Saludos, Rosa!
ResponderEliminarSimplemente te visito para comentarte que ayer encontrè de casualidad tu blog y esta ampliaciòn de plantilla que era lo que yo querìa hace semanas. Me viniste de lo mejor y estaba genialmente explicada. Que vaya que lo que sè de HTML es tanto como nada.
Muchìsimas gracias!
Saludos,
Adictísima, gracias, te ha quedado muy bien y además has sido tan amable de referenciarme en tu blog, no todo el mundo lo hace.
ResponderEliminar¡Un abrazo!
Muchas gracias!!
ResponderEliminarEs lo que andaba buscando.
Solo queria pedirte un super favor, si tendrias las imagenes para esta plantilla pero en color rosa, es que no se modificarlas.
Saludos!!
hola Rosa me tope con tu blog de casualida y me a parecido muy chevere y acabo de provar este truco en mi blog y me ha quedado de maravilla muchas gracias y segire buscando aver que mas cositas me sirven .ok y de nuevo gracias rosa la primorosa jejeje.. ha y este es mi URL por si lo queres ver ok.= http://el-coste.blogspot.com/
ResponderEliminarRosa, tienes un blog estupendo.
ResponderEliminarYo ya me he puesto manos a la obra para añadir cositas a mi blog. He empezado por ensanchar la plantilla de thisaway rose.
En mi caso es de color rosa, peor he realizado todos los cambios que tu explicas, cambiando blue por rose, pero una parte del blog se vé de color azul.
¿¿¿Me podrías echar una manita???
Gracias y enhorabuena.
Ángela, el problema es, como ya digo en la entrada, que el fondo del blog está conseguido con imágenes y yo no tengo ni idea de editarlas para cambiar su tamaño, de hecho para hacer esta entrada me ayudó un amigo con el tema...
ResponderEliminarPodrías hacerlo sustituyendo las imágenes por colores, es decir, eliminando donde va la url de la imagen y cambiándolo solo por el color, por experiencia te digo, que el efecto es casi el mismo.
Estas son las partes a modificar una vez hechos los cambios de las medidas:
#content-wrapper {
position: relative;
width: 950px;
background: #fcecf1 ;
}
#main {
padding-top: 22px;
padding-$endSide: 8px;
padding-bottom: 0;
padding-$startSide: 8px;
background: #fcecf1;
}
#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: $endSide;
margin-top: 0;
margin-$endSide: 3px;
margin-bottom: 0;
margin-$startSide: 0;
width: 342px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background:#f8e0e8;
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 */
}
Rosa eh cambiado mi plantilla harbor a esta,ya que necesitaba una renovacion.Hice todo lo que mencionas aqui, es mas he leido los comentarios ya que podrian ser parte de mi problema.
ResponderEliminarEn mi caso me pasa lo mismo que Kike me sale la sidebar con una raya en el medio apartir del segundo post,cambie las imagenes (aunq las quisiera mas chicas) y no hay caso,vuelve a lo mismo.
Desearia que me ayudes,ya que queda muy feo asi.
Gracias de todas maneras.
Como siempre excelente el blog cada dia mejor!
.con.ganas.de.huir., el problema de KIKE era su navegador que andaba aún con versión antigua...no se cual es tu caso porque no veo tu blog:
ResponderEliminarPerfil
Hola Rosa, para empezar darte las gracias porque con tu ayuda he conseguido hacer algo que llevaba queriendo hacer hace tiempo.
ResponderEliminarEn mi caso, al igual que con Angela, uso tambien la plantilla rosa y no la azul.He hecho los cambios que le mencionabas a ella de ponerle los colores en lugar de cambiar la url y todo ha ido perfecto.
Ahora lo unico que me falta es cambiar el borde de abajo de la cabecera y el borde de arriba del pie.
Es decir: #header-wrapper y #footer-wrapper
Me puedes ayudar por favor. Saludos y gracias de nuevo.
PD: Mi blog es www.trihia.es
Galera, no suelo hacerlo, la verdad, más que nada porque los programas de diseño de imágenes y eso...no se me dan nada bien.
ResponderEliminarPero he ido a ver tu blog y, nada más entrar, he visto la foto de los dos chicos que tienes en la sidebar...¿y sabes que? :D la chica se parece muchísimo (al menos en esa foto) a mi hermana :-X así que de repente he pensado -¡pues se las hago- jajajja
Anécdotas a parte, aquí están tus imágenes;-):
Header-wrapper
http://img151.imageshack.us/img151/7645/cabeceraabajorj6.gif
Footer-wrapper
http://img151.imageshack.us/img151/5597/footerarribajg1.gif
Muchas gracias por todo Rosa. Ahora si que tengo el blog bien.
ResponderEliminarPerdona Rosa ya lo he arreglado al tema del perfil,creo que si ahora puedes verlo para poder ayudarme.
ResponderEliminarIgualmente te dejo la direccion aqui, www.conganasdehuir.blogspot.com
Muchas gracias.
Con ganas de huir, tu caso no es el mismo que el de Kike, ya que a el le pasaba después de haber seguido los pasos correctamente...
ResponderEliminarTu no lo has hecho, se te ha olvidado cambiar las imágenes que explico en la entrada...
Fíjate bien.
Muy biena entrada, yo tengo la thisaway green, podrías porner las imágenes para esta, o decirme como hacerlas?
ResponderEliminarJorge, pues lo siento, pero ahora no tengo la posibilidad de modificar las imágenes...Lo que hay que hacer es hacerlas nuevas al tamaño que vayas a poner los anchos en tu blog.
ResponderEliminarSi vas a usar los tamaños de esta entrada, pues usa estás imágenes para ver el tamaño que necesitas.
Holas, no sé si estoy tripitiendo comentario, porque le doy a publicar y no los veo xD.
ResponderEliminarQuería darte las gracias Rosa por la explicación para ensanchar la thisaway. Yo tengo la VERDE y he hecho lo que le comentabas a Jorge, modificar las imágenes. Os dejo los enlaces:
1º HEADER-wrapper:
http://img171.imageshack.us/img171/9012/bgheaderbottomer4.gif
2º Content-wrapper:
http://img123.imageshack.us/img123/4041/bgmainwrapperfd3.gif
3º Footer-wrapper:
http://img515.imageshack.us/img515/8718/bgfootertoplm2.gif
La distribución del espacio la he hecho un poco distinta (#sidebar-wrapper 270,#main-wrapper 670). Aquí podéis ver cómo queda la verde:
http://bricoworld.blogspot.com/
Gracias de nuevo!!
Criatura, muchísimas gracias!:-)
ResponderEliminarRosa, segui tus instrucciones y todo perfecto pero el color azul de los lados me encandelillaba asi que se lo quite. Pero me gustaria poner una imagen y he tratado por todos lados pero no se me da. podrias decirme donde tengo que poner la imagen para que quede en el fondo. Gracias.
ResponderEliminarRSS, veo que está conseguido;)
ResponderEliminarSi Rosa, ya consegui poner el fondo, gracias. Logre hacerlo con estos dos datos que encontre espero puedan ayudatre para tu blog porque yo comono sabia ninguna de las dos pues tuve que buscar para logar hacerlo.
ResponderEliminarhttp://zonacerebral.com/2007/04/como-cambiar-el-fondo-del-blog-en-blogger.html
http://blogandweb.com/blogger/hospedar-imagenes-plantilla-blogger/
No tenia ni idea como cargar imagenes para luego usar la URL pero ya aprendi. Un Abrazo.
Hola Rosa antes de nada felicitarte por tu blog que es estupendo.
ResponderEliminarMi plantilla es la Thisaway (Rose), y simplemente me gustaria añadirle otra columna a la izquierda, He visto que lo has hecho con la plantilla Rounders, y no se si se podria hacer con esta que te digo.
Bueno un saludo, y gracias por todo
VANESA Poder se puede, pero no es sencillo explicarlo en un comentario...
ResponderEliminarEn este blog puedes descargar el código para la plantilla ya con las modificaciones hechas:
http://blogandroll-xosse.blogspot.com/2007/01/template-b-thisaway-blue.html
Gracias Rosa, aunque plantillas tengo, simplemente no quisiera modificar todo lo que tengo en las columnas del blog, simplemente añadirle otra. De todas maneras eres estupenda.
ResponderEliminarSaludos
VANESA Me lo apunto y dependiendo del tiempo que vaya teniendo disponible, lo publicaré...pero no te prometo nada ¿ok?
ResponderEliminarRosa, sabes si se puede cambiar el color?
ResponderEliminarMira, échale un ojo a mi blog, por favor, para que veas cómo lo tengo. Lo que yo quiero es, en vez de ese tono azulado, algo m´as claro, incluso blanco. Pero sin cambiar lo de abajo del todo, que me gusta que lo de creative commons quede como ajeno del resto. No sé si me explico.
Un abrazo
El blog es este: http://awixumayita.blogspot.com
Awixumayita Vamos a ver...localiza esto en el código de tu plantilla:
ResponderEliminar#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url() repeat-y left top;
}
Esa última línea la del background déjala así:
background: #ffffff;
Luego localiza mas abajo esto:
#main {
padding-top: 22px;
padding-right: 8px;
padding-bottom: 0;
padding-left: 8px;
background: url(http://www.blogblog.com/thisaway_blue/bg_content.gif) repeat-x left top;
}
Dejas igual la línea del background:
background: #fff;
Haces lo mismo en #sidebar-wrapper {
Y si quieres eliminar esa imagen que es como una "espiga" que va de arriba abajo de la sidebar, lo haces aquí:
#sidebar {
padding-top: 7px;
padding-right: 11px;
padding-bottom: 0;
padding-left: 14px;
background: url(http://www.blogblog.com/thisaway_blue/bg_sidebar_arrow.gif) repeat-y 179px 0;
}
Eliminando la línea completa del background.
Todo esto lo haces y USAS LA VISTA PREVIA ANTES DE GUARDAR.
Suerte! :D
Hola Rosa como estás??
ResponderEliminarPrimero que nada felicitarte por el blog, es realmente EXCELENTE. Tus explicaciones son barbaras.
He podido agrandar la plantilla excepto que me queda la siderbar mucho más abajo.
Este es mi blog http://infosobrecine.blogspot.com/
(lo uso para hacer pruebas)
Podrías echarle un vistazo?? Estoy segura que solo con verlo te darás cuenta que es lo que me falta.
Muchas gracias
Gaby
Gabriela Veo que ya tienes otra plantilla...
ResponderEliminarBuenas. Me quedó todo perfecto salvo por una cosa. El celeste más oscuro del fondo de la barra lateral llega hasta un punto determinado y de ahí para abajo tiene el mismo color que el fondo del cuerpo del blog.
ResponderEliminarMuy bueno el blog!
Gracias!
Pocho Legrand Así es. La sidebar llega hasta donde están los gadget colocados...
ResponderEliminarEl dibujo de la flecha si llega hasta abajo de los gadget, pero el color más oscuro no llega a cubrir ni la mitad de ellos
ResponderEliminarPocho Localiza el #sidebar-wrapper { y en el bloque del código verás esta línea:
ResponderEliminarbackground: url(http://www.blogblog.com/thisaway_blue/bg_sidebar.gif) repeat-x left top;
Borrala por completo o borra la url de la imagen que es lo que da el color de fondo solo en ese trozo... me cuentas. ;)
antes que nada una felicitación por el blog que es fenomenal y gracias por el tutorial me funciono a la perfección
ResponderEliminarweeeeee excelente!!!!! me encanto como quedo... ahora me gustaria saber si puedo poner dos columnas en la misma sidebar jaja... nunca se queda satisfecho el hombre... mi sitio quedo asi www.fondosyfonditos.com.ar
ResponderEliminarfingolfin Esta entrada creo que te servirá de orientación:
ResponderEliminarhttp://elescaparatederosa.blogspot.com/2009/08/nueva-sidebar-dividida-en-dos.html
Este comentario ha sido eliminado por el autor.
ResponderEliminarHola Rosa, menudo blog que tienes mas currao.
ResponderEliminarBueno yo intento desde hace unos dias ensanchar el mio y bueno un poco torpe, he segido las instruciones que comentas y al final me sale los bordes azul (Claro es para esta color) el mio es thisaway green. Y tambine me sale una linea vertical aparte de un tono de color diferente en el fondo. toma ya... espero que me ayudes, muchas gracias....
Ezú En el comentario numero 21 tienes las imágenes para la verde, los demás pasos son idénticos a los de la entrada.
ResponderEliminarRosa muchas gracias, me quedo de maravilla.
ResponderEliminarUn abrazo Jesús
Gracias!!!!!!!!!!!!!!!!! Te re amooooooooo!!!!!!!!
ResponderEliminarcon tu post acabas de solucionarme un grave problema visual del blog!!!
SIN PALABRAS
Gracias!!!!!!!!! mil gracias!!!!
Gracias Rosa. Me ha servido para buscar #main-wrapper en mi plantilla y ampliarlo.
ResponderEliminargracias rosa no sabes cuanto busque para agrandar mi plantilla thisaway rose y cuantos dolores de cabeza me causo,ahora use tus datos y tambien cambie la url por colores y me quedo genial si queres verlo pasate por mi blog http://pasionyaoi-love.blogspot.com muchas gracias y sigue dando estos consejos para los que somos nuevos en esto bye!
ResponderEliminarRosa podrías publicar una explicación para agregar otra columna a esta planilla ;) ?
ResponderEliminarRacHaV2 Trata de buscar en Google... no recuerdo donde, pero en varios sitios la encuentras ya con las tres columnas.
ResponderEliminarRosa el problema es que mi planilla ya tiene muchas modificaciones y volver ponerlas todas esta como :O esperaba que publicaras algo que explicara donde poner los datos de la otra planilla ya es que mas dificil en estas planillas ;)
ResponderEliminarRacHaV2 Si lo se... es más difícil por el uso de imágenes de fondo, habría que modificarlas o anularlas... pues lo siento pero de momento no voy a publicar nada sobre esta u otras plantillas "antiguas" de Blogger... pocos las usan ya y tengo demasiados pedidos de ayuda para las novedades de Blogger que me llevan demasiado tiempo...
ResponderEliminarMirando por ahí, encontré esto, por si te sirve:
http://laeulalia-thisaway3.blogspot.com/
Hola Rosa, me llamo Fco. José, Muchas gracias, me has ayudado a ensanchar mi plantilla :D
ResponderEliminarmi blog: http://pinsdepako.blogspot.com/
saludos