Para cualquier modificación, siempre hay que entrar por Plantilla > Edición de HTML. A continuación y por si las flies, ¡GUARDA TU PLANTILLA ACTUAL!, usando Descargar plantilla completa. Esta utilidad te permite grabar un fichero con la configuración actual, que podrás recuperar en caso de desastre mediante Cargar una plantilla desde tu archivo de disco duro.
Antes de grabar las modificaciones, siempre puedes hacer Vista previa para comprobar que todo va bien y que las novedades a la plantilla funcionan correctamente, pero no obstante es muy conveniente salvar el trabajo hecho hasta la fecha.
CAMBIAR EL ANCHO DE LAS COLUMNAS
Lo primero que me molestó de la plantilla original (en mi caso Minima Black) es el desperdicio de espacio tan grande que había. Incluso en resolución de 800x600, sobraba hueco por todas partes. Para aprovechar más la pantalla, se pueden cambiar los parámetros de anchura total, del cuerpo de las entradas y de la barra lateral.
A continuación, la parte del código fuente dónde hay que modificar los datos. Sólo hay que tener en cuenta que el ancho total no puede ser más grande que la suma de los anchos del cuerpo principal y de la barra lateral (o de las columnas que se hagan para los que tengan 3...o más). Las medidas vienen en píxeles (px). Se pueden hacer pruebas con distintas combinaciones de anchos, haciendo Vista previa antes de Guardar plantilla definitivamente.
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 740px; <-- Ancho total
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 490px; <-- Ancho cuerpo principal página
float: left;
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 */
}
#sidebar-wrapper {
width: 220px; <-- Ancho barra lateral float: right;
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 */
}
----------------------------------------------- */
#outer-wrapper {
width: 740px; <-- Ancho total
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 490px; <-- Ancho cuerpo principal página
float: left;
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 */
}
#sidebar-wrapper {
width: 220px; <-- Ancho barra lateral float: right;
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 */
}
Con las medidas reseñadas (740, 490 y 220) se aprovecha un 95% del espacio para resoluciones de 800x600. Para resoluciones mayores, evidentemente quedan huecos, pero de esta manera la web será cómodamente visible en todas las configuraciones.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Tenés alguna idea de cómo ajustar el diseño de la plantilla en la solapa de edición? Es decir, en "Elementos de la página". Cuando ajusté el ancho general (ensanché) el esquema se desajustó.
ResponderEliminarNo es que haya seguido tus pasos, me las ingenié solo, pero eso me quedó colgando.
Respondeme al blog, please, porque no creo que lea este después. Estoy buscando por otros lugares, y seguro después me olvido.
Hola soy yo otra vez, estoy contenta acabo de utilizar unos d tus consejos y consegui cambiar el ancho de mis columnas, sigo buscando soluciones a mis otras dudas, pero se que gracias a personas como tú, las encontraré!!!
ResponderEliminarSaludos.
ResponderEliminarHe tomado muchas de tus buenas ideas para mi blog:
http://seriestvanime.blogspot.com/
Pero hay dos o tres que nomas no he entendido como hacerle.
1. El Ancho de Columnas.
2. Que mis visitantes puedan dejar mensajes.
3. Que se muestre la barra del blog en la parte superior de la pagina.
Podrias echarme una mano?
Perdona las molestias, pero apenas estoy aprendiendo esto de diseno de blogs
Para lo del ancho de las columnas, la solución está en Blogger. Ancho de columnas.
ResponderEliminarPara que tus visitantes puedan dejar mensajes, tienes que echar un vistazo al apartado de Configurar Comentarios.
No obstante, si lo que necesitas es una aclaración concreta, haz la pregunta menos general. De lo contrario es muy difícil para mí contestarte adecuadamente.
Lo último no lo entiendo. "Que se muestre la barra del blog en la parte superior de la pagina" ¿qué barra?
ola oloman, otra vez yo, e progresado ya mucho, ahora otro problema, cambie mi plantilla y no e podido agrandar las columnas, no sale el codigo por ningun lado, http://runescape-latinos.blogspot.com, espero tu respuesta, saludos
ResponderEliminara i no e podido encontrar como colocar 3 columnas. gracias
ResponderEliminarYa he visto que no has podido esperar y has puesto directamente una nueva plantilla con tres columnas, solucionando los dos problemas de una tacada.
ResponderEliminarComprueba el gráfico de factores de las armas, porque tiene más ancho que el cuerpo de las entradas y se ve regular.
no entendi esto ultimo que el cuerpo de las armas... lo que nesesito ahora es ampliar donde se postea, porque tengo unas tablas que se borra una parte, o un text area que se pueda usar lellendo el html no mostrandolo, saludos
ResponderEliminarHola Oloman, gracias por publicar estos datos tan buenos, que necesitamos los que apenas estamos incursionando en el mundo del Blog, lo voy a poner en práctica.
ResponderEliminarPersonas como tu se valoran,porque aportan sus conocimientos sin egoismos.
Hola Oloman y mil gracias por tus aportaciones, ya que estoy un poco pez en HTML pero voy poco a poco. Para adapatar mi plantilla blogger tic tac a 1024...qué valores pongo???.
ResponderEliminarLos que tengo ahora son:
#outer-wrapper {
width: 847px;
margin: 0px auto 0;
text-align: left;
font: $bodyfont;
background: url(http://www.blogblog.com/tictac_blue/tile.gif) repeat-y;
}
#content-wrapper {
margin-left: 42px; /* to avoid the border image */
width: 763px;
}
#main {
float: left;
width: 460px;
margin: 20px 0 0 0;
padding: 0 0 0 1em;
line-height: 1.5em;
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 */
}
#sidebar {
float: right;
width: 259px;
padding: 20px 0px 0 0;
font-size: 85%;
line-height: 1.4em;
color: $sidebartextcolor;
background: url(http://www.blogblog.com/tictac_blue/sidebar_bg.gif) no-repeat 0 0;
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 */
}
Te agradezcon enooormemente tu ayuda. Eres un crack!!!
Hay que cambiar las 3 medidas y las 2 imágenes que están marcadas en negrita.
ResponderEliminarProbado y funciona.
Suerte.
#outer-wrapper {
width: 1024px;
margin: 0px auto 0;
text-align: $startSide;
font: $bodyfont;
background: url(http://img85.imageshack.us/img85/1134/1024tileleftyw2.gif) repeat-y;
}
#content-wrapper {
margin-$startSide: 42px; /* to avoid the border image */
width: 940px;
}
#main {
float: $startSide;
width: 637px;
margin-top: 20px;
margin-$endSide: 0;
margin-bottom: 0;
margin-$startSide: 0;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 0;
padding-$startSide: 1em;
line-height: 1.5em;
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 */
}
#sidebar {
float: $endSide;
width: 259px;
padding-top: 20px;
padding-$endSide: 0px;
padding-bottom: 0;
padding-$startSide: 0;
font-size: 85%;
line-height: 1.4em;
color: $sidebartextcolor;
background: url(http://www.blogblog.com/tictac_blue/sidebar_bg.gif) no-repeat $startSide top;
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 */
}
/* ---( header and site name )--- */
#header-wrapper {
margin: 0;
padding: 0;
font: $pagetitlefont;
background: #e0e0e0 url(http://img125.imageshack.us/img125/1175/1024topdivbluelefthp6.gif) no-repeat $startSide top;
}
Hola Oloman....
ResponderEliminarMe tienes alucinada con tu destreza, pero como estoy tan pez, algo he hecho mal que me dice esto cuando hago los cambios:
"No hemos podido obtener una vista preliminar de su plantilla.
Por favor, corrige el siguiente error y envía la plantilla de nuevo.
Declaración de variable no válida en máscara de página: La variable se utiliza, pero no está definida. Información: startSide"
Qué cambio???...o qué no he cambiado???.
Por cierto, voy a publicar algo bueno de Berlín, estoy en ello ;)...Me estoy montando una agencia de viajes online (por fin libre de jefes esclavizadores) y voy a trabajar (en lo que he hecho siempre) para mí....Así que cuando tenga la web en marcha te la paso para que le eches un vistazo...te haré cliente VIP...jejeje ;)
No quiero redundar en exceso, pero lo dicho: MIL GRACIAS DE NUEVO!!!
....YA ESTÁ!!!, es que mira que soy cagaprisas....lo 1º que he hecho es copiar y pegar TODO, ahora sólo he cambiado lo que me has indicado en negrita...NO TE MOLESTO MÁS.
ResponderEliminarMe pongo con lo de Berlín ;)
Saludos!
Se me olvidó comentarte... Las imágenes tenían el tamaño justo para la plantilla original. He tenido que modificar los dos fondos principales (cabecera y cuerpo) para ampliarlos al nuevo tamaño.
ResponderEliminarHay una tercera que no modifiqué, que es la del pie. Era muy tarde cuando lo hice, está abajo y casi que no se ve y además no me disgustaba mucho. Si quieres cambiarlo, copias la imagen en un programa de gráficos, amplias a 1024 pixels (creo recordar), la guardas y sustituyes la dirección en la plantilla.
Saludos,
¿cómo se llama la barra de abajo?....no la encuentro en el html...
ResponderEliminarYa he visto que utilizas es Imageshack....está muy bien.
Gracias again...
El pie está realmente formado por dos imágenes. Las de negrita :-) Esas son las que tendrías que agrandar.
ResponderEliminar#footer-wrapper {
margin: 0;
padding: 0 0 9px 0;
font-size: 85%;
color: #ddd;
background: url(http://www.blogblog.com/tictac_blue/bottom_sill.gif) no-repeat bottom left;
}#footer {
margin: 0;
padding: 20px 320px 20px 95px;
background: url(http://www.blogblog.com/tictac_blue/bottom_sash.gif) no-repeat top left;
}
Oloman, quisiera que pasaras por mi blog y vieras que anché la parte principal pero quiero que entonces la parte de arriba quede centrada (no se como hacerlo) y que en la parte de las entradas el borde de la derecha quede bien en la esquina.
ResponderEliminarAYÚDAME POR FAVOR ;)
El problema es que las esquinas se consiguen con una imagen que tiene la misma longitud que el cuerpo de la entrada (485px). Al aumentar el ancho, la imagen se queda "corta".
ResponderEliminarCambia en tu código
http://www.blogblog.com/rounders4/corners_main_top.gif
por
http://img409.imageshack.us/img409/1411/cornersmaintop525pr0.gif
y
http://www.blogblog.com/rounders4/corners_main_bot.gif
por
http://img409.imageshack.us/img409/143/cornersmainbot525uh0.gif.
Sobre el mensaje del ambigrama que pusiste en Olografías, te pongo en la cola.
Un saludo,
estoy mirando y aprendiendo gracias,GRACIAS EL RESUCITADO TE BENDIGA
ResponderEliminarhola amigo me llamo leandro, como hago para dividir en tres columnas mi blog? porque puse musica la parte derecha y la imagen se me queda cortada casi por la mitad, como hacer para que todo quede bien? graciass!! mi blog es www.elmismoqueeltuyo.blogspot.com
ResponderEliminarGuau! Lo de la perdida de espacio me tenía enferma. Mil gracias... increíble que fuera tan tan fácil.
ResponderEliminarAún no busqué en el blog, pero no te quiero volver loco llenando de comentarios por todos lados, así que pregunto: ¿qué parte de la plantilla hay que modificar para que la cabecera quede también de 740 px en lugar de 660 px?
Igual, si ya hay algo de esto, lo encontraré...
Gracias de nuevo.
Emile, como tú tienes esto...
ResponderEliminar/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #940f04;
}
...en tu plantilla, simplemente sustituye un número por otro.
;)
Juaz... que vergüenza, de haber sabido que era tan fácil...
ResponderEliminarMuchas gracias por la pronta respuesta -llegué en el día indicado :D-
Hola antes de nada decir que muy bueno el blog da muchos consejos muy utiles=D
ResponderEliminarmi problema es que intento cambiar las medidas de la columna lateral para que una imagen que pue en ella no se me quede cortada, pero a pesar de poner los valores que pusiste arriba no cambia nada en el blog.
me podrías ayudar??mi blog es este:
http://djcrazycow.blogspot.com/
muchas gracias=D
No puedeo acceder a tu código Djcrazycow, pero los valores que puse son de ejemplo. Puedes ampliar la barra lateral, siempre que cambies en la misma cantidad de pixels el apartado de Ancho total.
ResponderEliminarYa me dirás...
Hola es grande tu blog pues sirve de gran ayuda, no consigo dar el ancho que quisiera al blog sé me des configura todo, no se si será por la plantilla.
ResponderEliminarGracias
Un saludo
Miguel, esta es la parte que tienes que cambiar...
ResponderEliminar#outer-wrapper {
width: 860px;
margin:0px auto;
padding: 0px 10px;
text-align:left;
font: normal normal 100% Trebuchet, Trebuchet MS, Arial, sans-serif;
background: url(http://img118.imageshack.us/img118/4130/wrapperelkh8.png) repeat-y center top;
}
#main-wrapper {
width: 420px;
float: left;
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 */
}
#right-sidebar-wrapper {
padding-left:10px;
width: 210px;
float: right;
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 */
}
#left-sidebar-wrapper {
padding-left:10px;
width: 195px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
El primer contenedor es el ancho total de la página. La cantidad de pixels que pongas ahí, tienes que distribuirla entre el MAIN y las dos SIDEBARS. No apures los pixels porque otras partes de la plantilla puede que achiquen el espacio (MARGIN, PADDING...)
Observa que de 860 actuales, se aprovechan sólo 420+210+195 = 825px
Hola
ResponderEliminarEs posible que algunas plantillas no tengan las caracteristicas que explicas? porque estoy tratando de alterar las colunas de la utilizo en mi blog y no doy. Para que tengas una idea de que plantilla estoy usando aquí está la URL:http://adpinc.blogspot.com/
Agradezco tu ayuda
En tu caso ajfd, los contenedores se llaman respectivamente #main, #contentwrapper y #sidebars. El primero engloba a los otros dos que son el cuerpo de las entradas y la barra lateral.
ResponderEliminarEsta última tiene a su vez dos sub-barras: #sidebar1 y #sidebar2
Hola Oloman,
ResponderEliminarYo soy bastante negada en Blog. He comenzado hace poco y no tengo ni idea. Buscando, he ido a parar a tu blog que es genial para gente como yo.
Estoy intentado cambiar el ancho de las 2 columnas de mi blog pero no encuentro nada que ponga "wrapper" (lo he buscado con Ctrl-F)
si puedes echarle un vistazo a mi blog httpp://sidhheabalorios.blogspot.com/ e intentar echarme un clave?
Gracias por todo
Hola Sidhhe.
ResponderEliminar.CON parece que es el contenedor general
.SC parece el contenedor de las entradas
.SR parece el contenedor de la barra lateral
Digo "parece" porque no tienes una plantilla estandar y habría que investigar algo más para saberlo seguro. Prueba a cambiar esos valores y darle a la Vista Previa sin Guardar, para comprobar que es así.
De todas formas, los gráficos que llevan tu blog, sospecho que te complicarán la posibilidad de ampliar el ancho. Si finalmente lo haces, seguramente tendrás que rehacer los fondos de cada bloque.
Muy bonita la plantilla, por cierto.
Gracias Oloman.
ResponderEliminarMejor lo dejaré tal como está porque no tengo ni idea. He probado lo que me has comentado: el ancho total se modifica, modifico el contenedor de entradas y entonces la barra lateral se desplaza al final del blog.
Yo lo que quería era, sobretodo, ampliar la barra lateral para que se pudiera ver mejor lo que había escrito... pero bueno...
Muchísimas gracias igualmente.
Lo que tienes que hacer Sidhhe, es sumarle a .CON los pixels que necesites y la misma cantidad, añadirla al actual ancho de .SR.
ResponderEliminarSi eres novatill@, Vista previa antes de Guardar nada. No puede pasar nada malo si no guardas los cambios.
Hola,
ResponderEliminarQuisiera saber si se puede agregar una columna en una plantilla, la baje de un sitio y la puse en mi blog, pero la columna del centro es muy ancha y quisiera agregar otra columna del lado izquierdo se podrá?
Gracias.
Este es es mi blog:
http://aficionadaalpuntodecruz.blogspot.com/
Hola Eri, puedes añadir una segunda sidebar si amplias el espacio total del blog o reduces el de la columna del centro.
ResponderEliminarAquí tienes los detalles sobre cómo hacerlo.
Que tal Oloman:
ResponderEliminarQue bueno que ayudas a gente como yo que no sabe tanto de diseño.
Fijate que quiero cambiar precisamente el ancho de la columna derecha de mi plantilla y por ende hacer mas grande el post,pero al hacer el cambio, me queda un espacio entre la columna derecha y el post.
Qué mas debo ajustar para evitar ese espacio?
Muchas gracias de antemano y felicidades por tu blog.
Alex
MagiCoatepec, cuando amplias una columna, otra tiene que ser reducida en la misma proporción. La segunda alternativa es ampliar el contenedor general (si existe) que contiene (valga la redundancia) las columnas.
ResponderEliminarLo que no entiendo es como haciendo más ancha la columna, te queda un espacio. Debería ser al contrario, pero en tus blogs no veo el problema.
Gracias por el santo, eso ayuda mucho para jugar con las proporciones imagen-texto.
ResponderEliminarPura Vida
Buenas Oloman,
ResponderEliminarTengo un problema en mi blog, pues quiero que la parte de las entradas del mismo queden en el centro y una columna en cada lado. He intentado de todo, incluso modificando las dimensiones de las columnas, pero nada no consigo hacerlo.
Te pongo mi blog para que le heches un vistazo y haber si pudieras darme una solucion.
http://cutfanzine.blogspot.com/
Tendría que ver la parte HTML de tu plantilla Chucky, pero mientras, echa un vistazo a este post por si te ayuda a hacerlo por tí mism@.
ResponderEliminarhttp://oloblogger.blogspot.com/2009/05/plantilla-blogger-crear-secciones.html
O soy un inutil o no me aclaro. En principio el problema deberia estar en esta parte del codigo html de mi blog:
ResponderEliminar/* Outer-Wrapper
----------------------------------------------- */
#wrap {
width: 950px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#content-wrap {
width: 100%;
float: left;
background: url(http://datatemplates.googlepages.com/bg-content.gif) right 0 repeat-y;
}
#content {
margin: 0 440px 0 0;
}
#sidebar-data {
width: 220px;
float: left;
color: #333;
margin-left: -440px;
}
#sidebar2-data {
width: 220px;
float: left;
color: #333;
margin-left: -220px;
}
#content .gap {
margin-right: 10px;
}
#sidebar-data .gap, #sidebar2-data .gap{
margin: 10px;
He intentado cambiar los valores de right y de left incluso pero nada no consigo dar con ello. El Caso es que la parte de las entradas se queda en el mismo sitio y lo unico que consigo que se mueva son los sliderbar.
Quizas con esta linea de codigo te valga para solucionarlo, sino dime como te puedo mandar lodo el codigo del blog. Gracias de antemano, eres un crack
Eso quería que vieras. Los float son lo que colocan los contenedores a derecha o izquierda, pero con respecto a algo, por eso habría que ver la parte de las secciones (HTML).
ResponderEliminarSupongo por lo que dices, que las dos barras están a su vez dentro de un contenedor que está situado a la derecha. Por mucho que cambies los float de las sidebar, estas siempre estarán a la derecha porque el bloque que a su vez las contiene, está ubicado allí.
En base a eso, uno o dos de estos tres, #wrap, #content-wrap o #content, seguramente sean los que te separan el bloque principal de las barras. Luego, cada barra tiene una alineación dentro de su propio contenedor.
Eso hay que verlo, como te decía, en la estructura general de la página, o sea en el orden en que se han redactado los DIV ID y la forma en que se han ido anidando.
Si no te aclaras, aunque prefiero que lo descubras por tí mismo, lo que tienes que hacer es una copia de seguridad de la plantilla. Eso genera un fichero XHTML, réplica de tu plantilla, que me puedes mandar por mail.
Por cierto, eso que pones es la parte CSS
ResponderEliminarhttp://oloblogger.blogspot.com/2008/05/blogger-para-torpes-html-y-css.html
Nada que no lo consigo, me rindo definitivamente. Te he mandado mi plantilla para ver si podrias encontrar alguna solucion. Gracias de antemano y un saludo a ti y a todos los blogeros
ResponderEliminarChucky... mira tu correo.
ResponderEliminarGRACIASSSSSS, OLOMAN ERES MUY GRANDE. Gracias por solucionarme el problema, estaba ya desesperado,eres un fenomeno tio.
ResponderEliminarYo intento cambiar la medida por que una de las columnas se me ha quedado corta (de una plantilla que me descargué)Me estoy volviendo loca intentadólo pero nada.La plantilla de llama magic parper,pero tiene ese error que no sé solucionar ¿Me ayudas?
ResponderEliminarNo se te queda corta Blas de Otero. Lo que ocurre es que las barras laterales se ajustan en altura al contenido.
ResponderEliminarUn blog no tiene la misma estructura que una web clásica. Tiene entradas de distintos tamaños y las sidebars tienen el que tienen, según los artilugios que pongas.
Otra cosa. Sería conveniente que a las entradas que vas creando, le pongas un titular.
sos un groso!
ResponderEliminargarcias por ayudarme!
todo me funcionó barbaro.
Supongo Guadi, que lo de groso será algo bueno ¿no? :)
ResponderEliminarBuen articulo, me sirvio para arrglar un problema de margenes que tenia!! a ver si te das una vuelta y me das unos tips con el diseño, el tuyo esta muy bien
ResponderEliminarMil gracias por todo. Está muy clarito, y es una ayuda inestimable para bloggers neófitos.
ResponderEliminarmuchas gracias! encerio... mi blog: http://lamafiasintecho.blogspot.com
ResponderEliminarHola!
ResponderEliminarMuchas gracias por el post, aunque la busqueda en mi HTML no da resultados, para que te has una idea mi tema es MagicPaper y mi blog
http://proyectodedetectives.blogspot.com/
Gracias!
En tu blog se llaman de otra forma, Julia, pero evidentemente, también tienes configuradas tus columnas:
ResponderEliminar#outer-wrapper { width: 1002px; margin: 0px auto 0; text-align: justify; }
#content-wrapper { margin-left: 0px; /* to avoid the border image */ width: 100%; }
#main { float: left; width: 665px; margin-left: 10px; margin-bottom: 10px; margin-top: 17px; padding: 0px 0px 0px 20px; line-height: 1.5em; 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 */ }
#sidebar { float: right; width: 240px; padding-right: 35px; margin-top: -110px; color: #000000; line-height: 1.4em; 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 */ }
Genial!!!!
ResponderEliminarGracias x el dato =)
Muy útil, muchas gracias!
ResponderEliminarmuchas gracias por la información me funciono de maravilla máster oloman ya cambie el espacio de mi blog
ResponderEliminarnu me funsiono =(
ResponderEliminarpuse los valores y lo unico que paso fue que es columna del lado derecho gadget algo asi.. xD (soi nueva en esto) se fue al finaal de mi blog!.. nu se por que
me ayudas?
clauditakisisolosi.blogspot.com/
xau
Claudita Ki, las tres clases que tienes que tocar en tu caso son:
ResponderEliminar#outer-wrapper
#main
#sidebar
Cualquier cantidad que sumes en el ancho de las dos últimas, tiene que ir incrementado también en la primera, ya que esa engloba a las otras.
Como siempre, una vez más, tus consejos solucionaron mi problema. GRACIAS!!
ResponderEliminarHola!!! bueno, andaba buscando cómo ampliar mis columnas y cuando encontré tu blog fueron enorme mis GRAAAAAAAAAAACIAS!!!!!!! el único sitio en todo internet que lo explica, y bien!!
ResponderEliminarpero bueno, sigo teniendo el mismo problema, pq al seguir tus pasos, se me ensancha digamos.. la sangria.. osea, las letras y gadgets se ensanchan, pero el fondo sigue siendo igual, con lo cual queda descuadrado.
Mi blog es este para que te hagas mejor la idea:
http://mismasymismenos.blogspot.com
y la plantilla no quiero cambiarla.. :(
ojala me puedas responder.
GRACIAS!
Hola Luzzia*.
ResponderEliminarEn primer lugar tienes que hacer el cambio según lo has visto aquí. Luego tienes que localizar en la plantilla las imágenes que forman los fondos de las columnas y si quieres que quede bien, no tendrás más remedio que manipularlas con un editor de imágenes para adaptarlas al nuevo ancho. Para que te hagas una idea, esta es una de ellas:
http://lh4.ggpht.com/jvdmds/Rf37tUsJ2rI/AAAAAAAAAMY/cNjOwiZwJxI/simple-flower-1.jpg
Por último, las alojas en algún sitio y las sustituyes por las direcciones originales.
Se me ocurre ahora que quizás sería más fácil modificar las imágenes primero y una vez cambiadas, luego ir tocando la anchura de las columnas hasta que cuadraran con los nuevos fondos.
Gracias oloman, te pasastes. Habia espera tanto este post. Al fin mi blog de deportes (http://deportetotalenvivo.blogspot.com) esta listo para crecer. Una vez mas muchas gracias por el aporte.
ResponderEliminarHOLA:
ResponderEliminarEs genial que exista gente tan buena.
a mi hijo,le ha gustado el contador de curiosos y quiere poner un el el blog,¿me podrias decir de donde lo puedo sacar?
gracias
Si te refieres al contador en sí, en esta entrada se presentan varios gratuitos.
ResponderEliminarSi te refieres al dibujito, además de lo anterior, tienes que meter delante el código de una imagen. En mi caso se trata de un GIF ANIMADO.
Gracias me a servido de mucho.
ResponderEliminarhttp://themetaljaggers.blogspot.com/
Hola, primero felicitar por este estupendo blog
ResponderEliminarMi consulta: Sé siguiendo tus pasos, modificar el ancho de mi blog, pero cuando lo hago, se me añade ese espacio extra a la derecha en blanco y no el fondo. Por lo que esteticamente, queda fatal. No sé como "alargar" el fondo que es asi cremita como tipo pergamino para que quede todo igual en el total del ancho. ¿en que parte de la plantilla busco ese background para modificar tambien el ancho?
Te agradeceria mucho una ayudita. Gracias de antemano.
Te dejo mi mail: maylajmnz@hotmail.com
Cuando las plantillas tienen fondos con imágenes de tamaño fijo, suele ocurrir lo que comentas. La única solución posible es editar la imagen original, redimensionar hasta el ancho necesario y por último, sustituir en la plantilla la imagen original con la nueva redimensionada.
ResponderEliminarPara buscar la imagen de fondo, desde el navegador, botón derecho, "Ver imagen de fondo". Con eso accedes al fichero de la imagen. Ahí tendrás tanto la propia imagen para poderla descargar, como la dirección que hay que buscar en la plantilla.
Hola:
ResponderEliminarLa plantilla que utilizo en el "diario de lecturas" está mal ya de origen (es decir recién descargada). Si se usa el explorer y una pantalla 4/3 aparece el típico problema de que el cuerpo de las entradas comienza al finalizar la columna lateral.
No me he dado cuenta hasta ahora porque en el resto de navegadores funciona bien. Incluso con el explorer 8 y una pantalla panorámica se ve correcto.
He hurgado en lo que indicas en el artículo y aquí funciona de una forma algo distinta porque, al ser la plantilla expandible, suele ir por "tanto por cien". Aunque el outer wrapper aparece delimitado el main wrapper (que supongo que es lo que tendría que reducir un poco) no lo veo por ningún lado.
He probado a cambiar algunas variables pero no consigo reconocer la cifra que tendría que retocar. Te lo comento por si podrías tener alguna idea.
Gracias y saludos
Me olvidaba. La plantilla es esta .
ResponderEliminarEn la página ser puede ver todo el código directamente sin necesidad de descargarlo.
Blues, en el enlace que me pasas no veo la plantilla completa, pero afortunadamente he podido ver directamente tu código fuente :D
ResponderEliminarMe extrañó lo de los porcentajes, porque al cambiar el tamaño de mi ventana para comprobar qué es lo que pasaba, tu blog no cambiaba de tamaño.
El caso es que los principales bloques tienen su ancho definido en pixeles fijos... y ahí es probablemente donde tendrás que tocar.
Que yo haya visto, dentro del CONTENT-WRAPPER, tienes dos bloques, SIDE-WRAPPER2 (la barra más a la izquierda) y SUBCONTENT-WRAPPER. Dentro de este último anda SIDE-WRAPPER1 (la otra barra) y MAIN-WRAPPER con las entradas. Dentro de este, también me ha parecido que había un #MAIN que incluía el atributo WIDTH.
Los últimos son probablemente los que andas buscando.
Nota: Para averiguar todo esto, he usado esta sencilla herramienta.
Hola, Oloman
ResponderEliminarHe estado leyendo esta entrada y, en mi caso particular, lo que me gustaría probar con mi plantilla no es aumentar el ancho total sino jugar un poco acortando los márgenes, para poder aumentar algo el ancho de sidebar. El problema es que con tanto margin, border, padding, etc. me hago un lío y no sé muy bien qué se puede tocar y qué no :(. Me gustaría recortar un poco el margen total de sidebar + entradas para poder ganar en sidebar sin que ésta se quede completamente pegada al cuerpo principal. No sé si esto se podría hacer con relativa facilidad.
Gracias.
Efectivamente, tu cabecera no te permite ampliar las columnas porque quedaría rara, además de que posiblemente te descuadre el botón del feed y el buscador.
ResponderEliminarRealmente, puedes jugar cambiando los valores de todos los padding y margin que veas, porque con Vista Previa puedes comprobar su resultado antes de grabar los cambios. Si en Vista Previa no ha ocurrido lo que querías, pues con pinchar en Borrar Cambios, ya lo tienes como al principio.
De todas formas una cosa básica es saber en qué orden están los valores de esos dos atributos:
margin: 0px 10px 20px 30px;
Tanto este como padding, siempre están en el mismo orden: arriba (0px en el ejemplo), derecha (10px idem), abajo (20px) e izquierda (30px). Conociendo esto, ya sabes que los que tienes que tocar en tu caso son el segundo y el cuarto. Si viene un sólo valor, ese espacio se aplicará a las cuatro direcciones por igual.
He echado un vistazo rápido y me parece que no tienes mucho de dónde sacar, pero por empezar por alguno, prueba con estos:
.post-body {
line-height:1.55em;
margin-bottom:15px;
padding:20px 10px 70px 3px;
}
#content-wrapper {
padding-left:24px;
width:680px;
}
En este último, como es padding-left, sólo afecta al margen interno (padding) del lado izquierdo.
Suerte.
Muchas gracias por las indicaciones, Oloman :D
ResponderEliminarFinalmente, tan solo he modificado dos parámetros:
#sidebar-wrapper h2 {
color:#FF0000;
font-size:1.3em;
margin:0pt;
padding:0pt 0pt 0pt 29px; <--- ahora 0
text-transform:none;
}
.widget-content {
margin: 0;
padding: 15px 32px 20px; <--- ahora 3
}
Por lo visto tenía la sidebar "atrapada" con tanto margen. Parece que ahora se ve un poco mejor. :)
Saludos.
¡Ooops! Te leí muy rápido y no me dí cuenta de que sólo pedías más espacio para la barra lateral. Pensaba que lo querías en el cuerpo de los posts. Menos mal que por lo menos te dí una pista :)
ResponderEliminarHola Oloman. Primero quiero felicitarte por tu blog, para mi es una referencia para mi inicio en el mundo del blog. Estoy creando un blog y tengo problemas con los anchos de las columnas. Mi problema es que al iniciar el blog siempre se queda éste más ancho que las pantallas de mis ordenadores (mi configuración de pantalla es 1024x600). He mirado el codigo fuente y tengo esta configuración:
ResponderEliminar/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 1230px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 380px;
margin-left: 0px;
margin-top: 150px;
padding:150px;
float: $startSide;
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 */
}
#sidebar-wrapper {
width: 200px;
padding-top:300px;
float: $endSide;
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 */
}
#newsidebar-wrapper {
width: 280px;
padding-top:200px;
float: left;
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 */
}
Es un blog de 3 columnas como puedes apreciar al que coloque un fondo editado con photoshop, el blog es http://clasesparticularesivan.blogspot.com/
para que veas como esta actualmente.
Un saludo.
Gracias
Cambia el valor del WIDTH del #outer-wrapper a 990px (por ejemplo) y creo que se arreglará todo. De todas formas, échale otro vistazo a esta misma entrada para entender qué es lo que hemos hecho con ese cambio.
ResponderEliminarSe me olvidó comentar que es posible que tengas que redimensionar el fondo que forma el cuaderno.
ResponderEliminarGracias Oloman. Ya lo he cambiado y he tenido que hacer algunos reajustes en margenes y demas. Lo que no logro entender es que en algunos ordenadores se ve bien ajustado y en otros se desajusta.
ResponderEliminar¿Puede que cambie en función del navegador y no del ordenador? ;)
ResponderEliminarDIME POR FAVOR COMO AGREGAR UNA NUEVA SIDEBAR!!!!!
ResponderEliminarlo que quiero yo es tener una sidebar a la izquierda, las entradas y una sidebar a la derecha!!! dime como agrego una a la derechaa?? ya tengo la de la izquierda :D
No es rápido explicarlo, porque depende de cada plantilla para hacerlo de manera exacta, pero en este link puedes ver cómo funciona ese tema.
ResponderEliminarhttp://oloblogger.blogspot.com/2008/06/crear-bloques-de-informacin.html
Y en este otro, algo basado en lo mismo:
ResponderEliminarhttp://oloblogger.blogspot.com/2009/05/plantilla-blogger-crear-secciones-iii.html
El antivirus me salta al entrar en tu web, así que no puedo ver nada. De todas formas, echa un vistazo al selector que forma tu barra lateral. Es posible que su anchura (width) sea inferior a la de los gadgets que comentas.
ResponderEliminarPor otra parte, puedes también insertar en ese mismo selector (o cambiar si ya lo tienes) una propiedad overflow:visible; para evitar las barras de desplazamiento, aunque quizás, eso pueda povocar otro tipo de problemas.
Hazte ver lo del malware que así no creo que tengas muchas visitas.
Me puede decir donde tengo que cambiarla numeracion pues lo intento y no me sale gracias
ResponderEliminarbody {
margin: 0;
text-align: center;
min-width: 760px;
background: #9dce43 url(http://www.blogblog.com/thisaway_green/bg_body.gif) repeat-x $startSide top;
color: $textColor;
font-size: small;
}
blockquote {
margin: 0;
padding-top: 0;
padding-$endSide: 10px;
padding-bottom: 0;
padding-$startSide: 10px;
border-$startSide: 6px solid #e8f4d3;
border-$endSide: 6px solid #e8f4d3;
color: $postTitleColor;
}
code {
color: $postTitleColor;
}
hr {
display: none;
}
/* layout
----------------------------------------------- */
#outer-wrapper {
margin: 0 auto;
width: 760px;
text-align: $startSide;
font: $bodyFont;
}
#header-wrapper {
padding-bottom: 15px;
background: url(http://www.blogblog.com/thisaway_green/bg_header_bottom.gif) no-repeat $startSide bottom;
}
#header {
background: #4b6320 url(http://www.blogblog.com/thisaway_green/bg_header.gif) repeat-x $startSide bottom;
}
#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway_green/bg_main_wrapper.gif) repeat-y $startSide top;
}
#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: $startSide;
margin-top: 0;
margin-$endSide: 0;
margin-bottom: 0;
margin-$startSide: 3px;
padding: 0;
width: 483px;
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 */
}
#main {
padding-top: 22px;
padding-$endSide: 8px;
padding-bottom: 0;
padding-$startSide: 8px;
background: url(http://www.blogblog.com/thisaway_green/bg_content.gif) repeat-x $startSide top;
}
.post {
margin-top: 0;
margin-$endSide: 8px;
margin-bottom: 14px;
margin-$startSide: 21px;
padding: 0;
border-bottom: 3px solid #e8f4d3;
}
#comments {
margin-top: 0;
margin-$endSide: 16px;
margin-bottom: 14px;
margin-$startSide: 29px;
padding: 10px;
border: 1px solid #e4f0ce;
background-color: #eff5e4;
}
#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: 269px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway_green/bg_sidebar.gif) repeat-x $startSide top;
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 */
}
#sidebar {
padding-top: 7px;
padding-$endSide: 11px;
padding-bottom: 0;
padding-$startSide: 14px;
background: url(http://www.blogblog.com/thisaway_green/bg_sidebar_arrow.gif) repeat-y 179px 0;
}
#sidebar .widget {
margin-bottom: 20px;
}
#footer-wrapper {
padding-top: 15px;
background: url(http://www.blogblog.com/thisaway_green/bg_footer_top.gif) no-repeat $startSide top;
clear: both;
}
#footer {
background: #374915 url(http://www.blogblog.com/thisaway_green/bg_footer.gif) repeat-x $startSide top;
text-align: center;
min-height: 2em;
}
En los WIDTH de #outer-wrapper y #content-wrapper. En ambos tiene que ir la misma cantidad de pixels (px)
ResponderEliminarLo que añadas o quites de ahí, lo tienes que añadir o quitar también, distribuido entre el #main-wrapper y #sidebar-wrapper.
Suponiendo...
#outer-wrapper 800
#content-wrapper 800
En total +40px que habría que repartir en la proporción que quieras entre los otros dos, por ejemplo 30 a uno y 10 a otro:
#main-wrapper 513
#sidebar-wrapper 279
¿ok?
Muchas gracias por la informacion ,pero si hago los cambios me sale en la columna derecha una linea vertical color verde.Me puede decir el motivo
ResponderEliminarEsta imagen tiene la culpa:
ResponderEliminarhttp://www.blogblog.com/thisaway_green/bg_main_wrapper.gif. Es la que forma los bordes actuales verdes de la zona de entradas+sidebar.
Es de tamaño fijo y al cambiar el ancho, se queda descuadrada. Tendrías que editarla y ensancharla (o encogerla) tanto como lo hiciste con los elementos de los que hemos hablado. Luego la guardas y sustituyes la dirección de la original por la nueva que hayas hecho.
Es de tamaño fijo y al cambiar el ancho, se queda descuadrada. Tendrías que editarla y ensancharla (o encogerla) tanto como lo hiciste con los elementos de los que hemos hablado. Luego la guardas y sustituyes la dirección de la original por la nueva que hayas hecho.
ResponderEliminarComo veras estoy un poco flojo en esto de la informática. Me podrías explicar como hago este paso, pues lo intento y nada de nada.
Un saludo y nuevamente muchas gracias por tu colaboración y por blog que es muy útil
Supongo que tienes algún editor de imágenes. Pues eso es lo primero. Teniéndolo, descargas la imagen de marras (pones la dirección en tu navegador y con el botón derecho, Guardar imagen). Una vez en tu disco duro, la abres con el editor y ya cortas, pegas y lo que sea necesario para darle el ancho adecuado. Incluso puedes probar a redimensionar que es más fácil, aunque no sé cómo quedará así.
ResponderEliminarLuego la subes por ejemplo a un post de Blogger que guardas sin publicar. Si editas ese post con la pestaña en HTML, verás la dirección de la nueva imagen. La copias, editas la plantilla y pegas esta última dirección en sustitución de la dirección de la imagen original.
Por último, cambias una parte de la dirección que pone s400 por s1600 (esto la pasa a tamaño original) y ya guardas las modificaciones.
Suerte.
Muchas gracias por la informacion solucionado el problema, cuando se entiende de las cosas todo es facil, hoy clase ha sido productiva.
ResponderEliminarSaludos y hasta la proxima consulta
Me sirvio muchisimo todo!
ResponderEliminarBueno olaman aqui me tiene otra vez quidiera hacer la consulta sobre:
ResponderEliminarQuiere poner una fotografia de fondo del blog, pero quisiera saber para que se transparente la pagina donde esta escrito como se tiene que hacer
muchas gracias
A ver si es algo como esto lo que quieres:
ResponderEliminarhttp://oloblogger.blogspot.com/2010/01/fondo-de-entradas-transparente.html
Muchas gracias nuevamente.
ResponderEliminarSaludos
Hola oloman felicidades por tu blog esta buenisimo y me ayudo bastante en la creacion del mio, todavia estoy trabajando en el y quisiera incorporarle un chat. El inconveniente que se me presenta es que me aparece soloo una parte de la ventana del chat y quisiera q fuera en su totalidad para mas comodidad. Ya probe con 3 de diferentes pag. y con todos pasa lo mismo.
ResponderEliminarT e agradeceria enormemente si pudieras ayudarme...
Y tambien te invito a que lo visites
http://vivefelizyenarmonia.blogspot.com/
Desde ya muchisimas gracias!!
Hola Matilde.
ResponderEliminarAhora mismo no tienes ningún chat en tu página, pero supongo que el problema será de espacio. Probablemente, el ancho del chat supere el de la barra lateral. Si es eso, lo puedes solucionar
a) haciendo más estrecho el chat si el servicio que te lo facilita te permite configurar eso
b) o bien ampliando dicha barra en detrimento del espacio para los posts, según se explica aquí mismo
Saludos
Hola Oloman, te comento que estuve toda la tarde tratando de corregir el hecho de que las columnas de los costados se ensancharan un poco más para que entrara correctamente todo el contenido.
ResponderEliminareste es mi blog http://www.myvoz.blogspot.com/
te agradeceria que me des una mano ya que traté de seguir las instrucciones aquí expuestas y no pasó nada.
Gracias
Hola Myvoice.
ResponderEliminarEn tu caso, los contenedores generales son #base, #base_btm y #container y todos ellos tienen un ancho de 1000px.
Para aumentar la barra derecha, tienes que modificar el width de #sidebar1 y para la de la izquierda, el de #sidebar2. No olvides aumentar los generales en tantos pixels como añadas a estos dos en total.
Gracias Oloman por ayudarme!!!
ResponderEliminarMe surgió otro problemita que tiene que ver con los colores del fondo de la columna, porque al agrandar la columna todo el contenido se agranda, pero no así el color de fondo. puedes ayudarme?
muchas gracias
Estas son las imágenes que forman respectivamente, los fondos de las barras laterales izquierda y derecha. Echales un vistazo y lo entenderás mejor:
ResponderEliminarhttp://2.bp.blogspot.com/_WoCJXgXotb8/SuDnUmthqJI/AAAAAAAABEI/KseWsDEP6LY/s320/bg_sb1.jpg
http://3.bp.blogspot.com/_WoCJXgXotb8/SuDnUxD1smI/AAAAAAAABEQ/LFtcDrvlf2g/s1600/bg_sb2.png
Tendrías que descargarlas, editarlas para aumentar su ancho, alojarlas en algún sitio y por último, sustituir esas direcciones en la plantilla por las nuevas.
Nuevamente muchas gracias Oloman!!
ResponderEliminarEstaré haciendo estos pasos hoy a la noche cuando me desocupe.
De paso quiero pedirte que veas mi blog
http://myvoz.blogspot.com/ ya que estoy teniendo dos problemas. 1) la columna del medio donde van los post está corrida hacia la izquierda. 2) le agregué un contador de visitas siguiendo los pasos de este bolg y se me puso en cualquier lado. Pido ayuda para estos dos problemas y desde ya te agradezco por las respuestas tan acertadas y rápidas.
Sin duda pondré un acceso a tu blog en el mio.
1) A ver cómo se te queda con estas modificaciones. Líneas completas:
ResponderEliminar#content
display: inline; ELIMINAR
float: left; ELIMINAR
margin: 0px auto; CAMBIAR POR ESTA
#sidebar1
margin: 0px 0px 250px -738px; ELIMINAR
2) "Cualquier lado" no es una pista muy buena para ver qué pasa. De hecho, no encontré ninguno.
Hola Oloman. Muchísimas gracias por tu ayuda a todos y por tu trabajo generoso. He conseguido aumentar sin problemas el ancho de mi sidebar, pero aunque he seguido los pasos que le indicas en tu respuesta 19 a Juanplay, no he conseguido los bordes redondeados pues en el lado derecho me quedan en ángulo recto, así que la he vuelto a dejar como estaba ¿Me podrías ayudar, porfa? mi url es: http//:numerologiamagicablog.blogspot.com
ResponderEliminarAunque verás que no tengo demasiadas cosas en el sidebar, si de paso puedes indicarme cómo aumentarles el tamaño para adaptarlas a un ancho mayor, te lo agradeceré.
Hola Alma
ResponderEliminarEstas dos imágenes son las que forman respectivamente la parte superior e inferior de cada sección de tu sidebar:
http://www2.blogblog.com/rounders3/corners_prof_top.gif
http://www.blogblog.com/rounders3/corners_prof_bot.gif
Podrás comprobar que tienen 240px de ancho, lo mismo que tu sidebar.
Para que salgan bien, tendrás que editar esas dos imágenes de manera que tengan un ancho igual al que quieras ponerle a tu barra lateral. Al terminar, cada curva debe quedar en un extremo de la imagen.
Una vez cambiadas de tamaño, las guardas por ejemplo en un post en borrador (sin publicar) y de ahí tomas la dirección nueva, que deberás sustituir por las originales.
Recuerda ampliar tanto el outer-wrapper como el sidebar-wrapper.
Hola Oloman,
ResponderEliminarMuchas gracias por la info, pero me tendrás que disculpar pues no la he entendido bien. Es que soy muy novata en esto. Primero, no veo los 240px de ancho de las imágenes, aunque sí las de la sidebar. Entonces ¿cómo las edito para cambiarles el ancho? Y finalmente lo que dices "Una vez cambiadas de tamaño, las guardas por ejemplo en un post en borrador (sin publicar) y de ahí tomas la dirección nueva, que deberás sustituir por las originales" no entiendo lo que quieres decir. Lo siento, pero si me lo explicas un poco más tal vez lo consiga hacer.
Muchas gracias
Si pones las direcciones que te dí en tu navegador, accedes directamente a las imágenes que comentaba. Aunque sólo veas dos secciones de circunferencia, realmente es un dibujo que contiene eso y un espacio vacío en medio. Pulsando el botón derecho sobre ellas, podrás guardarlas en tu disco duro.
ResponderEliminarUna vez allí abres cualquier editor de imágenes: paintbrush, photoshop, imageready, photofiltre, gimp... el que tengas, y desde allí, abres la imagen que hay en el disco duro.
En las propiedades de la imagen, tanto desde el mismo botón derecho, como si las abres con un editor, podrás comprobar que tiene 240px de ancho. Por ese motivo, llega de extremo a extremo de la sidebar.
Ahora tú la quieres ampliar; pongamos que lo haces 100px más, hasta 340px. Pues en ese caso, la imagen tiene que tener otros tanto pixeles, de manera que cada circulito se quede en cada extremo de la barra lateral.
Eso es lo que tienes que hacer con la imagen desde el editor: cortar y pegar hasta dejarla de un total de 340px, con cada cuarto de circunferencia en cada extremo.
Una vez modificada la imagen, la tienes que alojar en algún sitio para poder tener una dirección que sustituya la de la imagen original. Hay varias formas, pero la más sencilla es que crees una nueva entrada, subas la imagen y guardes la entrada pero sin publicarla (borrador). Si editas la entrada y desde la pestaña HTML, verás la dirección que Blogger le ha asignado a la imagen que subiste. Esa es la que tienes que poner en lugar de la original.
No sé explicarlo mejor en menos espacio. Suerte.
Hola Oloman te queria preguntar como hacer para agregarle margen a mis columnas y al contenido de mi blog.
ResponderEliminarte dejo el enlace para que veas que por culpa de que no tiene o que tiene mucho margen los contenidos y publicidad se me ve fuera de su lugar!!
ya intente hacer lo que dice el post pero mi plantilla no es como esa.
Espero que resuelvas mi problema desde ya gracias!
http://SmowtionMediaPaga.blogspot.com
/* Columns
----------------------------------------------- */
.main-outer {
border-top: $(main.border.width) solid $(body.rule.color);
}
.fauxcolumn-left-outer .fauxcolumn-inner {
border-right: 1px solid $(body.rule.color);
}
.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: 1px solid $(body.rule.color);
}
/* Headings
----------------------------------------------- */
h2 {
margin: 0 0 1em 0;
font: $(widget.title.font);
color: $(widget.title.text.color);
text-transform: uppercase;
}
/* Widgets
----------------------------------------------- */
.widget .zippy {
color: $(widget.alternate.text.color);
text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
}
/* Posts
----------------------------------------------- */
.post {
margin: 0 0 5px 0;
}
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}
.post-body .tr-caption-container {
color: $(image.text.color);
}
.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}
.post-header {
margin: 0 0 1.5em;
line-height: 1.6;
font-size: 90%;
}
.post-footer {
margin: 20px -2px 0;
padding: 5px 10px;
color: $(post.footer.text.color);
background-color: $(post.footer.background.color);
border-bottom: 1px solid $(post.footer.border.color);
line-height: 1.6;
font-size: 90%;
}
#comments .comment-author {
padding-top: 1.5em;
border-top: 1px solid $(body.rule.color);
background-position: 0 1.5em;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
.avatar-image-container {
margin: .2em 0 0;
}
#comments .avatar-image-container img {
border: 1px solid $(image.border.color);
}
Kevin, por la pinta de ese código debes haber utilizado el nuevo diseñador de plantillas. En ese caso, para ajustar el ancho de las columnas es suficiente con entrar en él y buscar Ajustar Ancho dentro de la opción Diseño.
ResponderEliminarsi ya se como modificar el ancho, pero si habras visto mi blog los banner estan corridos a la derecha dejando un espacio importante sin ultilizar tanto en las columnas y cuerpo de la entrada.
ResponderEliminarMe entiendes? Ademas no quiero que mi blog sea mas ancho que 926px.
Y me gustaria tener todos los contenidos centrados
Kevin, llevo varios días peleándome con una plantilla que creé de prueba con el nuevo diseñador y no hay forma de sacarle punta.
ResponderEliminarTengo ese mismo problema que comentas y no encuentro la manera de arreglarlo. Me da a mí que han facilitado el diseño y complicado las modificaciones. Hasta ahora sólo he logrado cambiar el fondo de una de esas plantillas y cambiar los anchos desde el código, pero ya está.
Todo este rollo quiere decir que no te puedo ayudar. Lo siento.
hola oloman. En primer lugar gracias de antemano.
ResponderEliminarMi duda es que he ampliado el ancho del texto como pretendía, pero como puedes comprobar, los colores del fondo no se corresponden y el editor no me permite cambiarlo, o no se como hacerlo. No sé si es que el tamaño ahora es excesivo. Ojalá me puedas ayudar.
Te mando mi dirección del blog por si lo puedes ver. gracias
oigan necesito ayuda por favor un experto envienme un email nilmarys_princess26@hotmail.com
ResponderEliminarJose, lo que llamas colores de fondo, son realmente "imágenes de fondo". Al ampliar las columnas, sin cambiar las imágenes, estas ocupan menos del nuevo ancho y por eso se ve así. Estas son las imágenes que forman el fondo de los posts y de la barra lateral, respectivamente:
ResponderEliminarhttp://www.blogblog.com/tictac_blue/tile_left.gif
http://www.blogblog.com/tictac_blue/sidebar_bg.gif
Tienes dos opciones:
1. Bajarte la primera de ellas y editarla para ensanchar la parte clara hasta el nuevo ancho que ahora tienes. Luego la tienes que alojar (subir a un host de imágenes) y por último sustituir la dirección actual por la nueva.
2. Eliminar la imagen de fondo y sustituirla por un color plano. Esta segunda es menos vistosa, pero más rápida :D
Zona De Chikas CYN, mejor deja aquí escrito que te pasa. O mejor todavía, busca un poquito por si encontraras directamente algo que te sirva para solucionar tu problema.
ResponderEliminarSaludos.
En el código HTML editar plantilla no está eso de Outer-wraper, y por lo tanto no pude hacer nada...alguien me ayuda???
ResponderEliminarAngel, tú tienes una plantilla de las del nuevo diseñador y por eso no te aparecen esos códigos. Tendrás que modificar el ancho desde la aplicación (máximo total 1000px)
ResponderEliminarHola maestro, he cambiado estrechado la columna de la derecha y me encuentro con un problema del que no veo la solucion en los comentarios ni el buscador, asi que si eres tan amable, agradeceria mucho tu ayuda. Resulta que se estrecha el ancho pero solo en la parte alta, es decir lo que se ve en pantalla, si bajo esta igual de ancha que antes. No se si me explico, mejor lo miras si puedes. He buscado en todo el codigo y encuentro donde cambiar el resto de la columna. http://oranblu.blogspot.com
ResponderEliminarMuchisimas gracias
El problema no son las columnas, sino los fondos. Si te fijas, el texto va dónde tiene que ir, así cómo los elementos de la barra lateral.
ResponderEliminarLo que ensancha visualmente la columna, es esta imagen de fondo:
http://www.blogblog.com/thisaway_rose/bg_main_wrapper.gif
Sólo tienes que editarla para hacer más corta la parte de la derecha y luego sustituirla por la actual.
Gracias maestro, he hecho lo que me dijiste pero no ha funcionado muy bien, sigue viendose raro, el primer pantallazo sale bien pero si bajas la imagen cambia el color y en fin que no me gusta, asi que de perdidos al rio. Voy a cambiar todo el fondo y asunto arreglado, buscare algo chulo y mirare en el buscador como hacerlo. Gracias
ResponderEliminarMe parece que extendiste de más la parte clara del fondo. Tienes que dejar a la derecha una parte -tan ancha como la sidebar- con un color más oscuro, igual al de la barra lateral.
ResponderEliminarDe todas formas, a veces, cuando nos atrancamos, es mejor empezar de nuevo con otra idea :)
Hola Oloman... mi problema es que a pesar de cambiar el ancho de las columnas, cuando inserto las fotos siguen teniendo un ancho de 400 px. Si por HTML la redimensiono al ancho de la columna, entonces me queda pixelada a pesar de que la foto que subo tiene ancho suficiete. Por donde puedo modificar eso.
ResponderEliminarhttp://detodounpocoimas.blogspot.com
creo que ya lo solucionaré con esto
ResponderEliminarhttp://oloblogger.blogspot.com/2008/12/imagenes-con-ancho-variable.html
¿no?
gracias
Sí Carmen. Podría ser una solución. Por HTML fijas que las imágenes ocupen el los px que necesites, pero siempre, previamente, que cambies el s400 por s1600 para usar la de mayor calidad que guarda Blogger.
ResponderEliminarMe estoy volviendo loca, lo intento de mis maneras, pero no soy capaz de hacerlo. Ya tengo muchas cosas en el blog, y en la edicion html, me salen tantas cosas que no soy capaz de encontrar lo que indicas. Agradecería algo de ayuda.
ResponderEliminarMi blog es;
http://traducciones-visual-kei.blogspot.com/
Por favor... ayuda!!! u.u
Hola oloman, otra vez estoy aqui con el dichoso fondo de las entradas. Estoy haciendo pruebas con fondos como dije que haria unos comentarios mas arriba, no se ven mal, pero....... no se ven desde el principio de la pagina¡¡ Yo es que no se ya por donde meterle mano a esto. Por favor ayudame. Gracias
ResponderEliminarNéssä, tienes una plantilla de las del nuevo diseñador y por eso no te aparece lo que aquí se comenta. Tendrás que cambiar el ancho desde esa misma aplicación: Diseñador del plantillas.
ResponderEliminarOranblu: Busca en tu plantilla la direccion de es último fondo que has incorporado (http://img843.imageshack.us/img843/5532/nuevofondoentradas.png) y cámbiala por esta otra dirección: http://img831.imageshack.us/img831/6633/fondoix.jpg
Al ver el diseño de esa imagen, a ver si se entiende un poco mejor lo que quería decir con extender la parte de la sidebar.
Lo consegui. Habia dos imagenes que estaban fastidiandolo todo, pero las encontre y las borre. Gracias, pero al final creo que estabamos hablando de cosas diferentes. El tamaño relativo de la imagen ya lo tenia solucianado para que encajara segun la barra lateral y el cuerpo de las entradas (aun no domino el lenguaje tecnico, je je). Gracias por tu interes.
ResponderEliminarYa veo que lo que querías hacer no era lo que yo entendía. Bueno, una cosa hecha. :D
ResponderEliminarHola olano.Bueno aqui me tienes nuevamente .Quiere hacerte la siguiente pregunta.
ResponderEliminarTengo de fondo unas fotografias mias, pues bien en mi pantalla del ordenador se ven bien,pero sin embargo en otros estan reducidas y no se ven completamente.Me puedes aconsejar el motivo.Un saludo
Trotacaminos, no sabría decirte porque no sé dónde está exactamente el problema. Veo una imagen de fondo, que realmente son dos unidas (cada una con una persona en un sitio distinto).
ResponderEliminarSe ven como se deben ver. Si no es así como las quieres, tendrás que cambiar los originales. Realmente no las deforma el blog, sino que son así: http://img408.imageshack.us/img408/4171/acopladaswww.jpg
Mucchas
ResponderEliminarHola Oloman, antetodo felicitarte por tu estupendo blog y por la generosidad que tienes compartiendo tus conocimientos con los que sabemos menos...yo personalmente soy un desastre absoluto. Tengo un blog al que he cambiado la plantilla hace poco, no tengo ni idea de meterme en el editor de HTML, y tengo dos problemas. Uno: cuando meto fotos en la clumna lateral a pesar de ser de 160 píxeles, salen de 900, como si el mismo blog las hiciese grandes. Dos: quiero acceder desde la pestaña de páginas a mi otro blog, es decir, que pinchando en la pestaña salga directamente el blog y no el enlace...creo que me he explicado fatal, pero seguro que me has entendido. Mi blog es http://pepachez.blogspot.com/. Gracias de antemano y espero puedas ayudarme. Un saludo.
ResponderEliminarHola Pepa. Bienvenida por aquí.
ResponderEliminarActualmente no veo ningún problema con las imágenes, pero si te volviera a pasar, echa un vistazo a esta parte de código que está dentro de tu plantilla:
#Image1_img{
width:950px;
-moz-box-shadow: 0 2px 3px rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 2px 3px rgba(0, 0, 0, .15);
box-shadow: 0 2px 3px rgba(0, 0, 0, .15);
}
Eso, lo que hace es aplicar un ancho de 950px (y unas sombras) a todos los elementos que tenga una ID="Image1_img". O sea, que todo lo que tenga esa etiqueta, saldrá con 950px.
Sobre lo del menú de páginas, con él no podrás hacer lo que quieres. Como su nombre indica, es un menú de páginas y no sirve para otro tipo de enlaces.
Si quieres hacer eso con libertad, tendrás que eliminar el menú de páginas y hacer un menú "a mano". En el ya puedes incluir todos los enlaces que quieras, sin olvidar incluir los tres que actualmente tienes. Bueno, dos si quitas el de "Mis fotos".
Para ver como hacerlo, ya tendrás que buscar la palabra "menu" por ahí. Hay muchos sistemas y no son difíciles.
Muchas gracias por contestarme tan rápido Oloman, voy a mirarlo y ya te cuento, porque me estoy volviendo loca con las dichosas fotitos. Besos.
ResponderEliminarAunque un poco tarde y por problemas tecnico en el ordenado te quiero dar las gracias por tu contestacion
ResponderEliminarUn saludo
Pués nada, he cambiado al final la plantilla, ya tengo esas dos cosas solucionadas, ahora estoy peleando porque lo veo un poco estrecho...y después de estar peleando no veas el despiporre de blog que he montado, jajaa...soy un desastre. A ver si lo consigo. Gracias por todo.Besos.
ResponderEliminarOk Pepa. No olvides hacer copias de seguridad de las versiones de tu plantilla que tengas comprobado que funcionan bien para poder volver a ellas en caso de que surjan problemas.
ResponderEliminarSi tienes alguna pregunta concreta más, no dudes en plantearla. Saludos.
Gracias Oloman, haciendo caso de tus consejos así lo hice, menos mal, porque se me descolocó todo, así que mejor desisto y la dejo como está...no estoy llamada yo para esto de la informática. Sigo viendo un poco estrecho el blog, pero mejor lo dejo. Besos y muchas gracias, eres muy amable.
ResponderEliminarQUE CHEVERE QUE HAYA ESTA CLASSE DE AYUDA CONCRETA. MUCHAS GRACIAS
ResponderEliminarmi blog es http://maxvillasante.blogspot.com/ y desde que cambie por un template aparecen mis entradas en 2 columnas lo cual malogran como eran mis antradas anteriormente no se como podria solucionarlo
ResponderEliminargracias
Max tienes que localizar esta línea en tu plantilla (con artilugios expandidos):
ResponderEliminar<b:loop values='data:posts' var='post'>
Unas líneas más abajo estará esta otra:
</b:loop>
Pues justo antes de esta última inserta esto:
<div style='clear:both;'></div>
Creo que con eso se solucionará tu problema.
Hola, he entrado en este blog buscando como ajustar el largo de mi blog susodeteis.blogspot.com, siempre queda un hueco enorme debajo de las ultimas palabras. Podrías ayudarme, si ya has publicado algo al respecto adjuntame el enlace y muchas gracias por todo de antemano.
ResponderEliminarHola O Suso. Repasa el gadget con el que construyes "Frases del camino...". Hay como 12.000 (sin exagerar) saltos de línea tras la última frase. Si no están en el código del gadget cuando lo edites y por tanto, no los puedes borrar, quizás deberías reconsiderar usar otro sistema ;)
ResponderEliminar"Eres bueno tío!"
ResponderEliminarAcabo de arreglarlo, muchas gracias y me paseo por aquí para aprender más cositas que mejoren mi rincón.
Un abrazo.
Gracias me sirvio de mucho saludos y sigan conmpartiendo mas informacion los felicito
ResponderEliminarHola!!haber yo debo ser la mas torpe de todos por que veo que a nadie le pasa lo que a mi. me he artado de buscar y no hay manera.en fin te explico, yo estoy intentando agrandar la columna derecha de mi blog por que los titulos de mis archivos en la cronologia se ven cortados y quedan feisimos. el problema es que yo no encuentro lo que tu dices en edicion html, no me salen los pixeles totales por ningun lado y uso el control+f para buscarlo chico pero nada no hay manera. Haber si me puedes decir de que puede ser esto por favor, si es por que tengo algo novedoso de blogger o que, donde es para gente tan tonta que no te da ni esas opciones. en fin te dejo mi url y si puedes te pasas o lo que sea vale. Saludos y gracias de antemano.
ResponderEliminarhttp://baulextremenio.blogspot.com/
Baul Extremeño, tienes una plantilla de las nuevas y esta entrada es de hace tres años... de cuando no existían. La forma de cambiar el ancho en tu blog es desde Diseño -- Diseñador de plantillas. Ahora buscas a la izquierda Ancho del Blog (3ª opción).
ResponderEliminarUff gracias oloman!!!me estaba volviendo loca, tonces ahora si yo quiero cambiar algo en html no lo puedo hacer???
ResponderEliminarSí lo puedes hacer Baul Extremeño, lo que ocurre es que la mayoría de referencias (líneas de código) que suelo dar, coinciden con las anteriores plantillas y es posible que no las encuentres en las nuevas. No entiendo su estructura y por eso no puedo indicar bien, siempre, dónde meter el nuevo código para cambiar algo. Esas plantillas conviene adoptarlas sólo si no vas a trastear mucho. Si lo vas a hacer, mi preferencia es clara por las llamadas 'plantillas nuevas 2006'
ResponderEliminarPues a mi lo de Outer-wrapper y todo esto no me sale en mi plantilla! porque??
ResponderEliminarSayQueen, en tu caso es porque tienes una plantilla de las del "nuevo diseñador". En esas, el ancho se cambia accediendo a "Diseñador de plantillas".
ResponderEliminarHola en mi blog no aparece ese código, solo esto
ResponderEliminar/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
html body $(page.width.selector) {
min-width: 0;
max-width: 100%;
width: $(page.width);
}
a:link {
text-decoration:none;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:underline;
color: $(link.hover.color);
}
.body-fauxcolumn-outer .fauxcolumn-inner {
background: transparent $(body.background.gradient.tile) repeat scroll top left;
_background-image: none;
}
.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 400px;
width: 850px;
background: $(body.background);
$(body.background.override)
}
.body-fauxcolumn-outer .cap-top .cap-left {
width: 100%;
background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
_background-image: none;
}
.content-outer {
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
margin-bottom: 1px;
}
Javier, también "Nuevo diseñador". Lo mismo que en el comentario #155
ResponderEliminarMuchas gracias! Me a ayudado mucho!
ResponderEliminarHola amigo, estaba viendo tu blog esta interesante mira soy aprendiz en esto y por ahi vi un carrusel de imagenes para blog, Me gustaria que me expiques un poquito, Gracias por tu ayuda.
ResponderEliminarHay muchos (muchísimos) códigos distintos para montar un carrusel de imágenes Leisy. Tendrías qué decirme cual es el que viste y si me suena, pues entonces no habría problema en explicar cómo contruírlo.
ResponderEliminarhola!!
ResponderEliminarmi duda es la siguiente.
Queria saber si se podía cambiar el ancho de las imagenes que se suben através del gadget de imagen, me explico.
Cuando subo una imagen desde el gadget de imagen pone abajo, reducir automaticamente a 200 px, y si son mas grandes las reduce automaticamente a 200 px. Mi sidebar mide 200 px, no se si pone esa medida por eso, la cuestión es que las quería hacer mas pequeñas y que me las redujera automaticamente a 150px. Se puede hacer?
un saludo y mil gracias
un besito
Ani, no puedes cambiar los tamaños por defecto de subida de imágenes, pero si puedes intentar otra cosa para que cuando se vea la página se redimensionen las imágenes de la sidebar.
ResponderEliminarPrueba a insertar esto antes del cierre del SKIN:
.widget img {width:150px; margin:0px auto;}
Hola!
ResponderEliminaroye no entiendo mucho todo esto~ D:
en donde dice "edicion de HTML" se supone que pego eso verdad?
pero en donde?
Elizabeth~, este código no es para copiar, sino para ilustrar la explicación de qué tipo de código tienes que buscar y qué es lo que tendrías que adaptar para cambiar el ancho de las columnas.
ResponderEliminarDe todas formas, si tienes el nuevo diseñador -y creo que sí-, este post queda algo obsoleto, pues el cambio de tamaño de las columnas puedes hacerlo fácilmente desde él.
Hola Olo, quizás sea más farragoso explicarme por Twitter (soy FAFIMARTIN, te escribí por allí) y te dejo al duda aquí, que es el tema más parecido que he encontrado.
ResponderEliminarEstoy haciendo un blog para mi equipo, y no sé en que momento se me ha cambiado el tamaño de las entradas... Como veis, ahora mismo ocupa todo el ancho del blog, y aparte de quedar bastante feo, me descuadra los logos que había puesto hasta el momento por los lados...
Agradecería una ayuda, porque llevo toda la tarde batallando y no he encontrado manera alguna, de que el tema de las entradas y paginas que cree, vuelvan al tamaño por defecto.
Muchas gracias por la atención
http://img848.imageshack.us/img848/1610/dibujooj.png
Un saludo
Todavía podría ser más sencillo si hallara tu blog. Si no veo el código fuente, me resulta imposible encontrar dónde está el problema. Añade el blog a tu perfil o pásame la dirección/nombre.
Eliminarclubdeluchascandelaria.blogspot.com
EliminarNo sé de dónde sacaste esa plantilla, pero está mal estructurada.
EliminarSe arreglaría un poco si (sin expandir artilugios) las capas (div) que forman las barras laterales (lsidebar-wrapper y rsidebarwrapper), las metes dentro de crosscol section y justo antes de Blog1. Luego tendrías que cambiar el ancho de #Blog1 a 500px y añadirle un margin:0 auto para ver que más o menos se arregla.
Pero en fin, el desajuste es grande y casi seguro que tendrías que hacer bastantes cambios más. Personalmente creo que te merece la pena buscar otra plantilla que esté bien, que esa como digo tiene todo cambiado de sitio y casi habría que reconstruirla entera.
Creo que voy a eliminarlo... Porque cuando no sea este problema, será otro y no tengo conocimientos para hacer los consejos que me acabas de dar... Muchas gracias de todas formas por todo. Un saludo
ResponderEliminarBusca estos selectores y los cambias por los que te pongo. Tendrás que ir buscando porque no creo que vayan juntos:
Eliminar#lsidebar-wrapper {width:0;height:0;padding:0;margin:0;}
#rsidebar-wrapper {width:0;height:0;padding:0;margin:0;}
#myGallery, #myGallerySet, #flickrGallery {width:520px; height:300px; z-index:5;margin:5px auto 15px;overflow:hidden;}
#main-wrapper {width:800px;margin:0 auto;padding:10px 20px 5px 0px;word-wrap:break-word;overflow:hidden;}
Muchas gracias crack, funcionó perfectamente.
ResponderEliminar¡Un abrazo, y hasta la próxima... que visto lo visto, será más pronto que tarde jajaja!
Llevo tiempo siguiendo tus consejos y siempre pude solucionar y mejorar otro blog que tenia de mi hija pero ahora estoy bloqueado con agrandar la caja de post ya que si que e agrandado un poco el blog pero soy incapaz de agrandar la caja donde van las entradas te dejo la parte a donde supuesta mente lo tengo que modificar .
ResponderEliminar/* layout */
#outer-wrapper {
width:1200px;
margin:0 auto;
padding:0 10px;
text-align:left;
}
#wrap2{
margin:0 auto;
width:1200px;
}
#content-wrapper {
margin: 0 auto;
}
#main-wrapper {
width: 800px;
padding:0 10px;
margin:0 auto;
float: left;
word-wrap: break-word;
overflow: hidden;
}
.box-admin{
display:block;
width:auto;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#444;
}
.box-admin .kontainer b{
text-decoration:underline;
}
.box-admin .photo-admin{
background:url(http://3.bp.blogspot.com/-bcLTlN2AFXc/T0NkcbAxjPI/AAAAAAAAAhA/kcwjY1YxuAo/s000/default128.png)no-repeat top center;
width:68px;
height:68px;
margin:0 10px 0 0;
float:left;
border: 1px solid rgba(255, 255, 255, 0.03);
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}
.box-admin .kontainer{padding:5px;}
.box-admin h4{
color:#ccc;
font:bold 12px Arial,Sans-Serif;
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.box-admin h4 a{
color:#ccc;
}
/* widget Profile blogspot */
.widget.Profile .widget-content{
padding-bottom: 225px;
padding: 24px;
height:90px;
}
.widget.Profile .widget-content .profile-img{
margin:0 20px;
}
.widget.Profile .widget-content .profile-datablock{
margin:0 10px 0 10px;
padding:10px;
font-size:12px;
El blog
http://fuenteinternet.blogspot.com/
Gracias.
No, no está por ahí. Es esto y 590px me parece que es la medida que necesitas:
Eliminar.post-body {
width: 590px;
margin: 7px 0 0 0;
float: right;
}
;)
Pues como dices ahora si que ya esta todo en su sitio estaba obcecado en esas
ResponderEliminarlineas y no había manera.
Muchas gracias
Hola Oloman, felicidades por tu blog, ayudas a la gente y eso hay que agradecerlo. Muchas gracias.
ResponderEliminarMe gustaría consultarte algo: En mi blog (http://maranathanews-noticias.blogspot.com) tengo un problema, no consigo que la última entrada (la primera en el blog) quede a la misma altura que las columnas laterales. Quisiera que quede a la misma altura ¿cómo lo puedo solucionar?
Muchas gracias.
Supongo que lo arreglaste, porque ahora mismo las tres columnas empiezan a la misma altura.
EliminarHi! Hablando de columnas, yo tengo problemas desde hace unos dias... solo tengo una columna que cuando se le antoja,se desplaza debajo de las entradas. Habia leido que el problema era el tamaño de las fotos,pues las puse todas pequeñas y sigue el problema.
ResponderEliminarSabeis que puede ser?
Prueba a cambiar ese 31,33% que tienes en .container_12 .grid_4 por un 30%. Si ves que te sigue dando problemas, reduce un par de puntos más.
EliminarHola Oloman, ya he podido hacer algunos arreglos con tu consejo, pero tengo la misma inquietud que otra de las consultas pero contestaste a tu correo y no en estos comentarios, deseo pasar el sidebar de la derecha a la izquierda, el codigo que tengo es:
ResponderEliminar#content-wrap {
float: left;
width: 100%;
}
#content {
margin: 0 440px 0 0;
}
.post {
margin-bottom: 25px;
}
.post2 {
}
.side {
width: 440px;
margin-left: -440px;
float: left;
}
.side1 {
width: 205px;
_width : 200px;
float: left;
color: #333;
margin-left: -0px;
color: #8A4B08;
}
.side2 {
color: #498EB8;
width: 205px;
_width : 200px;
float: left;
color: #333;
}
#content .gap {
margin: 0 20px 0 0;
}
.side1 .gap {
}
.side2 .gap {
margin: 0 0 0 10px;
}
#out-foot {
width: 100%;
float: left;
}
#footer {
margin: 0 auto 0;
width: 950px;
color: #666;
font-size: 1em;
text-align: left;
position: relative;
}
#footer a {
color: #666;
text-decoration: underline
}
#footer a:hover {
color: #333;
text-decoration: none;
}
#footer {
padding-top: 5px;
}
#footer p.right {
position: absolute;
right: 0;
text-align: right;
top: 0;
}
/* Starting Sidebar
******************** */
.side1 ul, .side2 ul, .side ul{
list-style: none;
}
.about a:link, .about a:visited {
background: #ffffff;
color: #8A4B08;
padding: 0 4px;
}
.about a:hover {
background: #34B027;
color: #D7F7D4;
padding: 0 2px;
}
.linkcat, .widget, .boxy, .side .categories, .widget-sortable {
padding: 10px;
border: 1px solid #3AC52C;
background: url(images/bg-gradient.gif) 0 bottom repeat-x;
}
.side1 ul li ul li, .side2 ul li ul li {
padding: 2px 0;
margin-left: 15px;
list-style: square;
color: #8A4B08;
}
Muchas gracias por tu tiempo,
Javier
Necesito que me digas cuál de tus blogs es el de este código, pues las clases no son las "estándar" de Blogger y tendría que ver para qué sirve cada una.
Eliminarel blog es http://vidaok.com
ResponderEliminarReiteradas gracias
Tienes que cambiar el contenido de estas ID para que queden así:
Eliminar#content {
margin: 0 0 0 440px;
}
#content .gap {
margin: 0 0 0 20px;
}
Y además tienes que mover todo lo que está entre las clases SIDE, apertura y cierre del DIV incluído:
(<div class='side'> LOQUESEA </div>)
...y ponerlo justo después de la línea
<div id='content' class='front'>
"Vista previa" antes de guardara para comprobar que todo está bien...
Muchas gracias Oleman, los post perfecto se colocaron a la derecha, pero los sidebar se fueron hacia abajo, si bien a la izquierda, pero ocupaban todo el ancho de la pantalla, es decir el texto a la izquierda, pero, los box ocupaban todo el ancho de la pantalla.
ResponderEliminarTe quise enviar como me quedo el codigo pero no me permite enviarte por este medio, me sale un mensaje "Su HTML no es aceptable: Etiqueta no permitida: DIV"
No se que hice mal.
Javier
Cambiando el margin-left del .side de -440px a 0 he conseguido que las columnas queden bien de tamaño pero, siempre aparece debajo de todos los posts a la izquierda, es decir a la izquierda del post queda una franja blanca sin nada.
ResponderEliminarJavier
Se me olvidó esa parte. Efectivamente hay que cambiar ese .side y dejarlo así:
Eliminar.side {
width: 440px;
margin-left: 0px;
float: left;
}
Pero lo que me extraña es que no te pite. En las pruebas que he hecho en caliente funciona bien ¿puede que no hayas cambiado bien de sitio la capa SIDE? La verdad es que se han complicado la vida al diseñar esa plantilla así...
Gracias Oloman, lo probaré y te comento.
ResponderEliminarJavier
No comprendo bien como es lo de cambiar de sitio la capa del side.
ResponderEliminarLa linea div class='side' no la tengo en mi codigo, la he creado, pero no se en donde colocarla, la he puesto arriba del #content y luego en el mismo lugar del side, pero sigue la columna de la izquierda debajo de todos los post y a la izquierda de los post queda una franja vertical blanca, al parecer el tamaño del ancho del post sigue con el ancho de toda la pantalla, pero el texto se va a la derecha y aparenta estar la columna del post a la derecha, por lo menos es lo que se ve al aplicar el firebug.
Javier
Buscando, ya que la plantilla esta en wordpress, encontre el codigo en el main index template, cuando te refieres a toda la clase side, es tambien para side1 y side2, entonces deben ir tres cierres de /div
ResponderEliminarJavier
Era todo lo que estuviera encerrado dentro de la clase SIDE. No me fijé lo que había dentro y si alguna de esas clases que nombras estaban allí. De todas formas veo que cambiaste de plantilla... :S
EliminarSi Oloman, al final la cambie y me ha tomado toda esta semana en implementarla, al parecer mi antecesor habia hecho demasiados parches en la plantilla anterior, opté por buscar otras plantillas y me quedé con esta última.
ResponderEliminarHasta el momento no ha dado problemas, salvo con el IE8, pero se arreglo con un sript y ya se ve bien en los principales navegadores.
Quedo muy agradecido por tus sabios consejos.
Gran abrazo
Javier
Hola, ahora estoy tambien por aqui, yo tambien estoy bastante perdida, he cambiado la resolucion de pantalla a 1024 y no se cual es el ancho ideal para mi blog, se me ha desconfigurado un monton de cosas pero no quiero empezar a arreglarlo hasta que tu me orientes, ¿que ancho tengo que darle? necesito tu ayuda, te agradeceria mucho que me dieras las medidas del ancho total, de la sidebar, de las entradas, en fin, de todo jajj, ademas no se si te comente en otro post que me sale abajo de la pantalla una barra de desplazamiento horizontal, con lo cual el blog se puede correr hacia la derecha y no se a que es debido,¿puede ser porque no tengo bien las medidas? porfa ayudame, estoy muy perdida y me queda horrible, todo descuadrado..
ResponderEliminarun saludo
Que yo sepa no hay unas medidas ideales. 1024px de ancho a mí me parecen bien. Tú tienes una plantilla de las del Nuevo Diseñador y esas son algo complicadas modificar desde la plantilla. Lo mejor es que vayas al diseñador y desde allí cambies esas medidas. Además esa utilidad te va mostrando una vista previa para que puedas comprobar como quedan los distintos elementos. Pero tengo que decirte que yo no aprecio tanto descuadre como a tí te parece.
EliminarEl descuadre del que te hablaba lo he ido arreglando poco a poco, le he puesto un ancho total de 980 y yo creo que esta bien ¿no? lo que no consigo arreglar porque no se a que puede ser debido es la barra de desplazmiento horizontal que me sale y me hace que quede a la derecha del blog mucho espacio negro, he buscado en todos los gadget que tengo pero me vuelve loca, la barra sigue ahi ¿tu sabes a que puede ser debido?
EliminarComo andas por varios frentes te he contestado por Google+
EliminarHola Oloman, Agradecería me pudieras ayudar. Tengo en el blog 2 columnas y desearía seguir teniendo 2 pero mas anchas las dos,el cuerpo principal y la sidebar, es posible ??? Y poner un fondo de los decorados ???? esto fondos están predeterminados a 2 o 3 colm. y no sé si son compatibles al ensanchar mis 2 colum. Muchas gracias, es un "rollo" no saber mas de todo esto siempre se necesita ayuda, y gracias a personas como tu es posible ir arreglando cosillas y aprender un poco mas cada día. GRACIAS de nuevo.
ResponderEliminarTendrías que cambiar los siguientes valores WIDTH, pero los fondos que tienes actualmente no te servirán. Prueba con Vista Previa tras los cambios para verlo. El motivo es que ese fondo tiene un ancho fijo y al ser una imagen no se puede cambiar con CSS. Tendrías que cambiar la imagen desde un editor de idem... o cambiar de fondo:
ResponderEliminar#outer-wrapper {
width: 960px;
margin: 0 auto;
...
#header-wrapper {
width: 960px;
margin: 0 auto 10px;
...
#main-wrapper {
width: 600px;
float: left;
...
#sidebar-wrapper {
width: 350px;
float: right;
...
Como puede aprovecharse el margen en las palntillas nuevas que no tienen Outer-wrapper?
ResponderEliminarPues esas son más complicadas, pero no veo que la tuya sea de las nuevas. ¿Te refieres a otro blog?
EliminarSi estoy montando una nueva version mas ordenada y menos sobre cargada jajajajaja estoy uando una plantilla nueva y tiene unos margenes laterales enormes mira...
ResponderEliminarhttp://lavozperiodisticadeportes.blogspot.com.es/
Sobre todo vista en una pantalla grande de sobremesa, en un netbook sin embargo queda "casi" perfectamente encajada....
ResponderEliminarAhora recordé que con las nuevas plantillas puedes cambiar los anchos de las columnas (posts - sidebar) desde el Diseñador de plantillas. De todas formas, cuando lo hagas entonces quizás quieras volverlos a dejar como estaban para que "encajen" en pantallas de menor resolución (netbook).
EliminarMuchas gracias, me has sacado de un gran apuro.
ResponderEliminar¡Excelente aporte!