Blogger. Ancho de columnas. | Oloblogger Cuando he intentado ir cambiando COSAS en este blog, me he encontrado por todas partes con instrucciones deficientes o incorrectas sobre com...

28 de enero de 2007

Blogger. Ancho de columnas.

Cuando he intentado ir cambiando COSAS en este blog, me he encontrado por todas partes con instrucciones deficientes o incorrectas sobre como modificar el código fuente. Para mi propia memoria y para otros que necesiten de esta información, iré publicando cómo hacer determinados "arreglillos" para dejar un blog Blogger a nuestro gusto.

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 */
}


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.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

215 comentarios :

  1. 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ó.
    No 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.

    ResponderEliminar
  2. 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é!!!

    ResponderEliminar
  3. Saludos.

    He 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

    ResponderEliminar
  4. Para lo del ancho de las columnas, la solución está en Blogger. Ancho de columnas.

    Para 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?

    ResponderEliminar
  5. 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

    ResponderEliminar
  6. a i no e podido encontrar como colocar 3 columnas. gracias

    ResponderEliminar
  7. Ya he visto que no has podido esperar y has puesto directamente una nueva plantilla con tres columnas, solucionando los dos problemas de una tacada.

    Comprueba el gráfico de factores de las armas, porque tiene más ancho que el cuerpo de las entradas y se ve regular.

    ResponderEliminar
  8. 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

    ResponderEliminar
  9. Hola 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.
    Personas como tu se valoran,porque aportan sus conocimientos sin egoismos.

    ResponderEliminar
  10. 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???.
    Los 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!!!

    ResponderEliminar
  11. Hay que cambiar las 3 medidas y las 2 imágenes que están marcadas en negrita.
    Probado 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;
    }

    ResponderEliminar
  12. Hola Oloman....

    Me 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!!!

    ResponderEliminar
  13. ....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.
    Me pongo con lo de Berlín ;)

    Saludos!

    ResponderEliminar
  14. 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.

    Hay 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,

    ResponderEliminar
  15. ¿cómo se llama la barra de abajo?....no la encuentro en el html...

    Ya he visto que utilizas es Imageshack....está muy bien.

    Gracias again...

    ResponderEliminar
  16. El pie está realmente formado por dos imágenes. Las de negrita :-) Esas son las que tendrías que agrandar.

    #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;
    }

    ResponderEliminar
  17. 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.

    AYÚDAME POR FAVOR ;)

    ResponderEliminar
  18. 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".

    Cambia 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,

    ResponderEliminar
  19. estoy mirando y aprendiendo gracias,GRACIAS EL RESUCITADO TE BENDIGA

    ResponderEliminar
  20. hola 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

    ResponderEliminar
  21. Guau! Lo de la perdida de espacio me tenía enferma. Mil gracias... increíble que fuera tan tan fácil.
    Aú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.

    ResponderEliminar
  22. Emile, como tú tienes esto...
    /* Header
    -----------------------------------------------
    */
    #header-wrapper {
    width:660px;
    margin:0 auto 10px;
    border:1px solid #940f04;
    }

    ...en tu plantilla, simplemente sustituye un número por otro.
    ;)

    ResponderEliminar
  23. Juaz... que vergüenza, de haber sabido que era tan fácil...
    Muchas gracias por la pronta respuesta -llegué en el día indicado :D-

    ResponderEliminar
  24. Hola antes de nada decir que muy bueno el blog da muchos consejos muy utiles=D

    mi 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

    ResponderEliminar
  25. 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.

    Ya me dirás...

    ResponderEliminar
  26. 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.

    Gracias
    Un saludo

    ResponderEliminar
  27. Miguel, esta es la parte que tienes que cambiar...

    #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

    ResponderEliminar
  28. Anónimo8/1/09, 1:26

    Hola

    Es 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

    ResponderEliminar
  29. 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.

    Esta última tiene a su vez dos sub-barras: #sidebar1 y #sidebar2

    ResponderEliminar
  30. Hola Oloman,
    Yo 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

    ResponderEliminar
  31. Hola Sidhhe.

    .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.

    ResponderEliminar
  32. Gracias Oloman.
    Mejor 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.

    ResponderEliminar
  33. 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.

    Si eres novatill@, Vista previa antes de Guardar nada. No puede pasar nada malo si no guardas los cambios.

    ResponderEliminar
  34. Hola,

    Quisiera 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/

    ResponderEliminar
  35. Hola Eri, puedes añadir una segunda sidebar si amplias el espacio total del blog o reduces el de la columna del centro.

    Aquí tienes los detalles sobre cómo hacerlo.

    ResponderEliminar
  36. Que tal Oloman:

    Que 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

    ResponderEliminar
  37. 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.

    Lo 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.

    ResponderEliminar
  38. Gracias por el santo, eso ayuda mucho para jugar con las proporciones imagen-texto.


    Pura Vida

    ResponderEliminar
  39. Buenas Oloman,

    Tengo 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/

    ResponderEliminar
  40. 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@.

    http://oloblogger.blogspot.com/2009/05/plantilla-blogger-crear-secciones.html

    ResponderEliminar
  41. O soy un inutil o no me aclaro. En principio el problema deberia estar en esta parte del codigo html de mi blog:

    /* 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

    ResponderEliminar
  42. 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).

    Supongo 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.

    ResponderEliminar
  43. Por cierto, eso que pones es la parte CSS

    http://oloblogger.blogspot.com/2008/05/blogger-para-torpes-html-y-css.html

    ResponderEliminar
  44. 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

    ResponderEliminar
  45. Chucky... mira tu correo.

    ResponderEliminar
  46. GRACIASSSSSS, OLOMAN ERES MUY GRANDE. Gracias por solucionarme el problema, estaba ya desesperado,eres un fenomeno tio.

    ResponderEliminar
  47. Yo 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?

    ResponderEliminar
  48. No se te queda corta Blas de Otero. Lo que ocurre es que las barras laterales se ajustan en altura al contenido.

    Un 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.

    ResponderEliminar
  49. sos un groso!
    garcias por ayudarme!
    todo me funcionó barbaro.

    ResponderEliminar
  50. Supongo Guadi, que lo de groso será algo bueno ¿no? :)

    ResponderEliminar
  51. Buen 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

    ResponderEliminar
  52. Mil gracias por todo. Está muy clarito, y es una ayuda inestimable para bloggers neófitos.

    ResponderEliminar
  53. muchas gracias! encerio... mi blog: http://lamafiasintecho.blogspot.com

    ResponderEliminar
  54. Hola!
    Muchas 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!

    ResponderEliminar
  55. En tu blog se llaman de otra forma, Julia, pero evidentemente, también tienes configuradas tus columnas:

    #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 */ }

    ResponderEliminar
  56. Genial!!!!

    Gracias x el dato =)

    ResponderEliminar
  57. muchas gracias por la información me funciono de maravilla máster oloman ya cambie el espacio de mi blog

    ResponderEliminar
  58. nu me funsiono =(
    puse 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

    ResponderEliminar
  59. Claudita Ki, las tres clases que tienes que tocar en tu caso son:
    #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.

    ResponderEliminar
  60. Como siempre, una vez más, tus consejos solucionaron mi problema. GRACIAS!!

    ResponderEliminar
  61. Hola!!! 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!!

    pero 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!

    ResponderEliminar
  62. Hola Luzzia*.

    En 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.

    ResponderEliminar
  63. 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.

    ResponderEliminar
  64. HOLA:
    Es 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

    ResponderEliminar
  65. Si te refieres al contador en sí, en esta entrada se presentan varios gratuitos.
    Si 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.

    ResponderEliminar
  66. Gracias me a servido de mucho.
    http://themetaljaggers.blogspot.com/

    ResponderEliminar
  67. Hola, primero felicitar por este estupendo blog

    Mi 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

    ResponderEliminar
  68. 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.

    Para 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.

    ResponderEliminar
  69. Hola:

    La 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

    ResponderEliminar
  70. Me olvidaba. La plantilla es esta .

    En la página ser puede ver todo el código directamente sin necesidad de descargarlo.

    ResponderEliminar
  71. Blues, en el enlace que me pasas no veo la plantilla completa, pero afortunadamente he podido ver directamente tu código fuente :D

    Me 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.

    ResponderEliminar
  72. Hola, Oloman

    He 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.

    ResponderEliminar
  73. 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.

    Realmente, 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.

    ResponderEliminar
  74. Muchas gracias por las indicaciones, Oloman :D

    Finalmente, 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.

    ResponderEliminar
  75. ¡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 :)

    ResponderEliminar
  76. Hola 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:

    /* 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

    ResponderEliminar
  77. 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.

    ResponderEliminar
  78. Se me olvidó comentar que es posible que tengas que redimensionar el fondo que forma el cuaderno.

    ResponderEliminar
  79. Gracias 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
  80. ¿Puede que cambie en función del navegador y no del ordenador? ;)

    ResponderEliminar
  81. DIME POR FAVOR COMO AGREGAR UNA NUEVA SIDEBAR!!!!!

    lo 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

    ResponderEliminar
  82. 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.
    http://oloblogger.blogspot.com/2008/06/crear-bloques-de-informacin.html

    ResponderEliminar
  83. Y en este otro, algo basado en lo mismo:
    http://oloblogger.blogspot.com/2009/05/plantilla-blogger-crear-secciones-iii.html

    ResponderEliminar
  84. Hola Oloman,
    tu ayuda realmente es de envidiar,soy nuevo en esto ,apenas estoy puliendo mi blog, he colocado algunos gadgets pero no me gusta como se ven(por ejemplo el reloj!)no sé cómo hacer para q cualquier gadget q yo utilice, quede completo y no q se vea cortado y ademas quitarle esas barritas de desplazamiento.
    Cualquier ayuda tuya es importante para mí,
    Gracias de nuevo..!
    http://suertedineroymas.blogspot.com

    ResponderEliminar
  85. 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.

    Por 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.

    ResponderEliminar
  86. Me puede decir donde tengo que cambiarla numeracion pues lo intento y no me sale gracias

    body {
    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;
    }

    ResponderEliminar
  87. En los WIDTH de #outer-wrapper y #content-wrapper. En ambos tiene que ir la misma cantidad de pixels (px)

    Lo 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?

    ResponderEliminar
  88. 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

    ResponderEliminar
  89. Esta imagen tiene la culpa:
    http://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.

    ResponderEliminar
  90. 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.

    Como 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

    ResponderEliminar
  91. 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í.
    Luego 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.

    ResponderEliminar
  92. Muchas gracias por la informacion solucionado el problema, cuando se entiende de las cosas todo es facil, hoy clase ha sido productiva.

    Saludos y hasta la proxima consulta

    ResponderEliminar
  93. Bueno olaman aqui me tiene otra vez quidiera hacer la consulta sobre:
    Quiere 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

    ResponderEliminar
  94. A ver si es algo como esto lo que quieres:
    http://oloblogger.blogspot.com/2010/01/fondo-de-entradas-transparente.html

    ResponderEliminar
  95. 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.
    T e agradeceria enormemente si pudieras ayudarme...
    Y tambien te invito a que lo visites

    http://vivefelizyenarmonia.blogspot.com/

    Desde ya muchisimas gracias!!

    ResponderEliminar
  96. Hola Matilde.
    Ahora 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

    ResponderEliminar
  97. 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.
    este 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

    ResponderEliminar
  98. Hola Myvoice.

    En 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.

    ResponderEliminar
  99. Gracias Oloman por ayudarme!!!

    Me 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

    ResponderEliminar
  100. 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:

    http://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.

    ResponderEliminar
  101. Nuevamente muchas gracias Oloman!!

    Estaré 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.

    ResponderEliminar
  102. 1) A ver cómo se te queda con estas modificaciones. Líneas completas:
    #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.

    ResponderEliminar
  103. 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
    Aunque 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é.

    ResponderEliminar
  104. Hola Alma

    Estas 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.

    ResponderEliminar
  105. Hola Oloman,
    Muchas 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

    ResponderEliminar
  106. 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.

    Una 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.

    ResponderEliminar
  107. Hola Oloman te queria preguntar como hacer para agregarle margen a mis columnas y al contenido de mi blog.
    te 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);
    }

    ResponderEliminar
  108. 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.

    ResponderEliminar
  109. si 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.
    Me entiendes? Ademas no quiero que mi blog sea mas ancho que 926px.
    Y me gustaria tener todos los contenidos centrados

    ResponderEliminar
  110. 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.

    Tengo 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.

    ResponderEliminar
  111. hola oloman. En primer lugar gracias de antemano.
    Mi 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

    ResponderEliminar
  112. oigan necesito ayuda por favor un experto envienme un email nilmarys_princess26@hotmail.com

    ResponderEliminar
  113. Jose, 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:
    http://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

    ResponderEliminar
  114. 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.
    Saludos.

    ResponderEliminar
  115. En el código HTML editar plantilla no está eso de Outer-wraper, y por lo tanto no pude hacer nada...alguien me ayuda???

    ResponderEliminar
  116. Angel, 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)

    ResponderEliminar
  117. Hola 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
    Muchisimas gracias

    ResponderEliminar
  118. 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.

    Lo 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.

    ResponderEliminar
  119. 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

    ResponderEliminar
  120. Me 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.

    De todas formas, a veces, cuando nos atrancamos, es mejor empezar de nuevo con otra idea :)

    ResponderEliminar
  121. 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.
    http://detodounpocoimas.blogspot.com

    ResponderEliminar
  122. creo que ya lo solucionaré con esto
    http://oloblogger.blogspot.com/2008/12/imagenes-con-ancho-variable.html

    ¿no?
    gracias

    ResponderEliminar
  123. 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.

    ResponderEliminar
  124. Anónimo9/9/10, 3:48

    Me 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.

    Mi blog es;
    http://traducciones-visual-kei.blogspot.com/

    Por favor... ayuda!!! u.u

    ResponderEliminar
  125. 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

    ResponderEliminar
  126. Né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.

    Oranblu: 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.

    ResponderEliminar
  127. 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.

    ResponderEliminar
  128. Ya veo que lo que querías hacer no era lo que yo entendía. Bueno, una cosa hecha. :D

    ResponderEliminar
  129. Hola olano.Bueno aqui me tienes nuevamente .Quiere hacerte la siguiente pregunta.
    Tengo 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

    ResponderEliminar
  130. 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).

    Se 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

    ResponderEliminar
  131. Hola 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.

    ResponderEliminar
  132. Hola Pepa. Bienvenida por aquí.

    Actualmente 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.

    ResponderEliminar
  133. 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.

    ResponderEliminar
  134. Aunque un poco tarde y por problemas tecnico en el ordenado te quiero dar las gracias por tu contestacion
    Un saludo

    ResponderEliminar
  135. 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.

    ResponderEliminar
  136. Ok 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.

    Si tienes alguna pregunta concreta más, no dudes en plantearla. Saludos.

    ResponderEliminar
  137. 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.

    ResponderEliminar
  138. QUE CHEVERE QUE HAYA ESTA CLASSE DE AYUDA CONCRETA. MUCHAS GRACIAS

    ResponderEliminar
  139. mi 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
    gracias

    ResponderEliminar
  140. Max tienes que localizar esta línea en tu plantilla (con artilugios expandidos):
    <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.

    ResponderEliminar
  141. 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.

    ResponderEliminar
  142. Hola 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
  143. "Eres bueno tío!"

    Acabo de arreglarlo, muchas gracias y me paseo por aquí para aprender más cositas que mejoren mi rincón.
    Un abrazo.

    ResponderEliminar
  144. Gracias me sirvio de mucho saludos y sigan conmpartiendo mas informacion los felicito

    ResponderEliminar
  145. Hola!!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.
    http://baulextremenio.blogspot.com/

    ResponderEliminar
  146. 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).

    ResponderEliminar
  147. Uff gracias oloman!!!me estaba volviendo loca, tonces ahora si yo quiero cambiar algo en html no lo puedo hacer???

    ResponderEliminar
  148. Sí 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'

    ResponderEliminar
  149. Pues a mi lo de Outer-wrapper y todo esto no me sale en mi plantilla! porque??

    ResponderEliminar
  150. SayQueen, 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".

    ResponderEliminar
  151. Hola en mi blog no aparece ese código, solo esto

    /* 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;
    }

    ResponderEliminar
  152. Javier, también "Nuevo diseñador". Lo mismo que en el comentario #155

    ResponderEliminar
  153. Muchas gracias! Me a ayudado mucho!

    ResponderEliminar
  154. Hola 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.

    ResponderEliminar
  155. Hay 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.

    ResponderEliminar
  156. hola!!
    mi 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

    ResponderEliminar
  157. 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.

    Prueba a insertar esto antes del cierre del SKIN:

    .widget img {width:150px; margin:0px auto;}

    ResponderEliminar
  158. Hola!
    oye no entiendo mucho todo esto~ D:
    en donde dice "edicion de HTML" se supone que pego eso verdad?
    pero en donde?

    ResponderEliminar
  159. 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.

    De 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.

    ResponderEliminar
  160. 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.

    Estoy 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

    ResponderEliminar
    Respuestas
    1. 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.

      Eliminar
    2. clubdeluchascandelaria.blogspot.com

      Eliminar
    3. No sé de dónde sacaste esa plantilla, pero está mal estructurada.

      Se 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.

      Eliminar
  161. 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

    ResponderEliminar
    Respuestas
    1. Busca estos selectores y los cambias por los que te pongo. Tendrás que ir buscando porque no creo que vayan juntos:

      #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;}

      Eliminar
  162. Muchas gracias crack, funcionó perfectamente.
    ¡Un abrazo, y hasta la próxima... que visto lo visto, será más pronto que tarde jajaja!

    ResponderEliminar
  163. 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 .

    /* 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.

    ResponderEliminar
    Respuestas
    1. No, no está por ahí. Es esto y 590px me parece que es la medida que necesitas:
      .post-body {
      width: 590px;
      margin: 7px 0 0 0;
      float: right;
      }

      ;)

      Eliminar
  164. Pues como dices ahora si que ya esta todo en su sitio estaba obcecado en esas
    lineas y no había manera.

    Muchas gracias

    ResponderEliminar
  165. Hola Oloman, felicidades por tu blog, ayudas a la gente y eso hay que agradecerlo. Muchas gracias.
    Me 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.

    ResponderEliminar
    Respuestas
    1. Supongo que lo arreglaste, porque ahora mismo las tres columnas empiezan a la misma altura.

      Eliminar
  166. Hi! 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.
    Sabeis que puede ser?

    ResponderEliminar
    Respuestas
    1. 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.

      Eliminar
  167. Hola 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:

    #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

    ResponderEliminar
    Respuestas
    1. 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.

      Eliminar
  168. el blog es http://vidaok.com

    Reiteradas gracias

    ResponderEliminar
    Respuestas
    1. Tienes que cambiar el contenido de estas ID para que queden así:
      #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...

      Eliminar
  169. 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.

    Te 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

    ResponderEliminar
  170. 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.

    Javier

    ResponderEliminar
    Respuestas
    1. Se me olvidó esa parte. Efectivamente hay que cambiar ese .side y dejarlo así:
      .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í...

      Eliminar
  171. Gracias Oloman, lo probaré y te comento.

    Javier

    ResponderEliminar
  172. No comprendo bien como es lo de cambiar de sitio la capa del side.

    La 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

    ResponderEliminar
  173. 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

    Javier

    ResponderEliminar
    Respuestas
    1. 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

      Eliminar
  174. Si 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.

    Hasta 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

    ResponderEliminar
  175. 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..

    un saludo

    ResponderEliminar
    Respuestas
    1. 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.

      Eliminar
    2. El 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?

      Eliminar
    3. Como andas por varios frentes te he contestado por Google+

      Eliminar
  176. Hola 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.

    ResponderEliminar
  177. Tendrí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:
    #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;
    ...

    ResponderEliminar
  178. Como puede aprovecharse el margen en las palntillas nuevas que no tienen Outer-wrapper?

    ResponderEliminar
    Respuestas
    1. Pues esas son más complicadas, pero no veo que la tuya sea de las nuevas. ¿Te refieres a otro blog?

      Eliminar
  179. Si estoy montando una nueva version mas ordenada y menos sobre cargada jajajajaja estoy uando una plantilla nueva y tiene unos margenes laterales enormes mira...

    http://lavozperiodisticadeportes.blogspot.com.es/

    ResponderEliminar
  180. Sobre todo vista en una pantalla grande de sobremesa, en un netbook sin embargo queda "casi" perfectamente encajada....

    ResponderEliminar
    Respuestas
    1. Ahora 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).

      Eliminar