Plantilla Blogger. Crear secciones I. Estructura. | Oloblogger Vamos a abundar un poco en el tema de los contenedores en Blogger, explicando cómo funcionan las secciones, cómo se pueden configurar y por...

11 de mayo de 2009

Plantilla Blogger. Crear secciones I. Estructura.

Vamos a abundar un poco en el tema de los contenedores en Blogger, explicando cómo funcionan las secciones, cómo se pueden configurar y por último, ofreciendo un ejemplo de cómo crear columnas en la plantilla mediante secciones.

Aunque se intentará explicar cómo hacerlo para todas las plantillas, como muestra vamos a utilizar una plantilla Blogger Mínima. Empezamos viendo la estructura de nuestra página desde Elementos de página y nos encontramos esto:


Cada uno de los bloques que podeis ver (cabecera, entradas, sidebar y pie), son tratados por Blogger como secciones (SECTION). En realidad, se pueden crear libremente redactando en la parte HTML el código (sin utilizar secciones) y serían igualmente visibles. Lo que ocurre es que resulta más práctico usar secciones, porque así el esquema general de la página será perfectamente visible desde Elementos de Página. El uso de secciones también nos va a facilitar añadir gadgets desde ese apartado y moverlos fácilmente dentro o a otros bloques.

En primer lugar, vamos a acceder a Edición HTML y vamos a localizar las distintas secciones. No expandimos artilugios para verlos mejor y a partir del <BODY>, veremos la misma estructura pero en versión código HTML - dialecto Blogger :)

<div id='outer-wrapper'> ABRE DIV OUTER
<div id='wrap2'> ABRE DIV WRAP2

CODIGO

<div id='header-wrapper'> ABRE DIV CABECERA
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> ABRE SECCION CABECERA
<b:widget id='Header1' locked='true' title='Blog (cabecera)' type='Header'/> WIDGET
</b:section> CIERRA SECCION CABECERA
</div> CIERRA DIV CABECERA

<div id='content-wrapper'> ABRE DIV CONTENIDO PRINCIPAL

<div id='crosscol-wrapper' style='text-align:center'> ABRE DIV ENCIMA DE LAS ENTRADAS
<b:section class='crosscol' id='crosscol' showaddelement='no'/> SECCION ENCIMA DE LAS ENTRADAS (NO VISIBLE)
</div> CIERRA DIV ENCIMA DE LAS ENTRADAS

<div id='main-wrapper'> ABRE DIV ENTRADAS
<b:section class='main' id='main' showaddelement='no'> ABRE SECCION PRINCIPAL
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/> WIDGET QUE CONTROLA LAS ENTRADAS
</b:section> CIERRA SECCION PRINCIPAL
</div> CIERRA DIV ENTRADAS

<div id='sidebar-wrapper'> ABRE DIV SIDEBAR
<b:section class='sidebar' id='sidebar' preferred='yes'> ABRE SECCION SIDEBAR
WIDGETS BARRA LATERAL
</b:section> CIERRA SECCION SIDEBAR
</div> CIERRA DIV SIDEBAR

<div class='clear'>&#160;</div> RESETEA ELEMENTOS FLOTANTES

</div> CIERRA CONTENIDO PRINCIPAL

<div id='footer-wrapper'> ABRE DIV PIE
<b:section class='footer' id='footer'/> SECCION PIE
</div> CIERRA DIV PIE

</div> CIERRA DIV WRAP2
</div> CIERRA DIV OUTER
Cada trozo de código del mismo color identifica cada bloque. En este dibujo podeis ver gráficamente qué parte genera cada uno:

Habreis podido comprobar, que cada sección se engloba dentro de un DIV. Lo normal será que ahí se nombre un selector ID, que en la parte CSS se habrá definido previamente con los atributos necesarios.

Si hay dos bloques dentro a su vez de otro contenedor, ambos se engloban (anidan) dentro de un DIV más general. Ejemplo: crosscol, main y sidebar. Cada uno está dentro de un DIV distinto para generar su propio estilo, pero los tres están incluidos a su vez dentro de otro contenedor llamado CONTENT-WRAPPER, que tiene unas características generales y el tamaño suficiente para contener a los tres.

Estos son los bloques que se usan en la plantilla de ilustración (Blogger Mínima). Otras plantillas pueden usar otros nombres para el mismo tipo de plantilla y, por supuesto, otras estructuras. En cualquier caso, lo importante es ser capaces de distinguir la estructura de nuestra propia plantilla para luego poder modificarla sin problemas.

Ver también:

¿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

57 comentarios :

  1. Esta muy bueno el post bastante explicativo pero como hago para que poner dos secciones bajo la seccion del post si revisas la imagen que te envie, asi quisiera dejar mi template tengo todas las secciones menos las dos debajo del post

    ResponderEliminar
  2. Señor H
    Preguntando en todas partes a ver quien te contesta antes eh??

    ResponderEliminar
  3. No entiendo del todo la idea... ¿Podrias subir una captura de pantalla del blog con este truquillo activado?GraciaS!

    PD: Revisa mi blog... ¡bienvenido a mi lista de blogs recomendados! xD
    http://bloganzoo.blogspot.com

    ResponderEliminar
  4. Excelente explicación, Oloman, y ¡qué sincronicidad!, yo estaba haciendo este mismo esquema en un txt para poder entender mi plantilla, porque llega un punto en que uno con tanto chiche se pierde... :P
    Pero tengo una pregunta: qué diferencia al content-weapper del outer-wrapper!
    Sludos!

    ResponderEliminar
  5. Señor H, Bloganzo: Se me olvidó indicar que el post continuaría. Todavía no hemos llegado a cómo implementar las dos columnas, pero espero que cuando termine la serie, cualquiera pueda crear cualquier número de columnas en cualquier parte de su plantilla. Por eso un post tan largo.
    Acabo de publicar la segunda parte. Mañana la tercera.

    Anahi: el OUTER es un contenedor general que engloba a todos los demás. Viene sirviendo para el fondo del blog. Sería la zona gris del dibujo coloreado. Quizás no queda claro porque no me quedaban colores llamativos que permitieran la lectura ;)

    Dentro del OUTER, tienes en este ejemplo el HEADER, el FOOTER y el CONTENT. CONTENT a su vez, tiene dentro MAIN y SIDEBAR. ¿más claro ahora?

    ResponderEliminar
  6. Muy claro, Oloman.
    Lo de los colores, ni modo, yo en este momento tengo un monitor en estado "daltónico"... :P
    Gracias, y espero la III.

    ResponderEliminar
  7. en mi blog no aparecen los tamaños de letra no esta la pestaña T y si hago clik en la letra b salen signos raros¿ cómo lo arreglo ayuadame por favor?
    qué error cometí .chao

    ResponderEliminar
  8. Trini, quiero adivinar que te estás refiriendo a la pantalla que sale cuando creas un post. Hay dos sitios desde dónde crearlos una vez que entras en Crear (nueva entrada). Son las pestañas que están encima del recuadro dónde se escribe, a la derecha de los iconos con ciertas utilidades: Edición de HTML y Redactar. Pincha en redactar y te aparece la T y otras cosas.

    Si no controlas mucho utiliza esta última pestaña (redactar). Si controlas, perdón por suponer que tenías poca idea y explícame con más detalle que es lo que necesitas.

    ResponderEliminar
  9. Hola! que hallazgo ha sido este blog! realmente interesante y preciso.Tengo un problema.He puesto una plantilla, bien sobria y clásica.Me ha costado encontrar algo que me guste de verdad.Pero al mostrarme la página de elementos de la página no me muestra todas las secciones, por los cual se me hace imposible organizar los elementos arrastrandolos, ya que a partir del cuarto elemento del sidebar no me aparece.A que puede deberse esto?? GRACIAS!!! :)

    ResponderEliminar
  10. Ni idea :) Me resulta imposible ver algo sin saber cual es tu web. De todas formas, espero que no sea cuestión de utilizar las barras de desplazamiento del navegador ;)

    ResponderEliminar
  11. Acá va una pic del programa.Ojalá fuera la barra de desplazamientoo!! pero no :( MAnejo varios blogs y nunca me había pasado.

    LINK DIRECTO A LA IMAGEN de mi PROBLEMA:

    http://i240.photobucket.com/albums/ff150/melinatempe/sreenshotblog.jpg

    En el sidebar solo veo 4 elementos, pero hay más en mi bolg.

    GRACIAS! Ojalá me puedan ayudar :)

    ResponderEliminar
  12. Pufff, sigues sin dejarme tu enlace, pero lo he encontrado por mi cuenta.
    No veo nada extraño, aunque sería mejor disponer de la plantilla.
    Por que pruebes algo, en las clases BODY y HTML tienes un HEIGHT:100%; en cada una. No sé si alguno de ellos o incluso los dos, pueden ser los culpables de lo que te pasa. Puedes probar a ver porque no se pierde nada.

    ResponderEliminar
  13. Oloman, tienes razón, olvidé el link http://unfrescoabrazodeagua.blogspot.com/
    Probé lo que me dijiste, pero sigue igual.
    Es muy raro, tal vez sea la plantilla (http://btemplates.com/2008/12/19/emplode/)

    La cuestión es que el problema persiste.

    Disculpa que sea tan pesada.Gracias por tu tiempo. :)

    ResponderEliminar
  14. Hola olo soy (universitarios) oye he estao buscando que te buscando una solución para mi nuevo problema el SIDEBAR!!!!!! xan xan!! ¬¬ :( tiooo!! me está quitando ya las ganas y tó, es la plantilla esta que la pille de la city-tree tmb la hay con otro nombre (total esa es la plantilla en la que me apoyo) pero el menda que la exo, pues ... tiene sus cosas y tal, y ahora cada modificación que quiero hacerle es un infierno, pq no se si está bien ordenanda o tiene diferentes ''id'' o ni idea... total la sidebar esa es la que me trae de cabeza ahora, la eliminé por completo, la vuelto a poner pero en el 'elementos de la página' me sale debajo de las entradas :S aunque se vea a su derecha, nose si le ves solución, quisiera borrar la actual, y añadirle la sidebar de la rounder nada más pero por más que lo intento me es imposible! :( http://tostadoracreativa.blogspot.com/
    no puedo mássss!!!

    ResponderEliminar
  15. Tostadora, es complicado desde aquí descubrir fallos de estructura. De todas formas, empieza echando un vistazo por esto:

    <div id='menu'>
    <!-- begin sidebar1-wrap -->
    <div id='sidebar1-wrap'>
    <div class='widget Search' id='Serch1'>
    <h2 class='title'>Search</h2>

    <div class='widget-content'>
    <form action='/search' id='searchThis' method='get' style='display:inline;'>
    <input id='searchBox' name='q' type='text'/>
    <input id='searchButton' type='submit' value='Search'/>
    </form>
    </div>
    <div class='clear'></div>
    </div><!-- end Search1 -->
    <div class='clear'></div>
    <!-- sidebar1 section -->

    No lo veo nada claro, porque hay varios contenedores creados para SIDEBAR repartidos por el código, pero me extraña que esa supuesta barra lateral que te indico -no sé seguro si lo es- esté a su vez dentro de una capa llamada MENU, que flota a la izquierda.

    Creo que está claro que es un problema de ubicación de contenedores, por lo que, en cualquier caso, te sugiero lo siguiente. Añade a cada clase principal (MAIN, SIDEBAR, FOOTER, HEADER, MENU...) un borde (border:1px solid #000000;). Cada una de ellas con un color distinto que se diferencie bien. Luego grabas -o haces una Vista Previa si te da yuyu no acordarte después de las líneas que tienes que borrar- y podrás VER como está estructurada tu plantilla.

    A partir de ahí puedes empezar a deducir qué está funcionando bien y qué está funcionando mal. Cuando lo tengas arreglado tendrás que borrar todos los BORDER que pusiste.

    Suerte.

    ResponderEliminar
  16. Oye ya he probado ponerle los bordes y me va bien me voy ubicando en el blog mejor!, ahora el search widget este de donde me ha salido que no puedo borrarlo? es esto?!-- end Search1 -- en elementos me sale tal cual, no como un cuadro de gadget, o va unido al menu horizontal k tengo :S nose nose, bueno ahora a seguir a ver si consigo lo de crearle un diseño al sidebar, gracias por tus rápidas respuestas!!

    ResponderEliminar
  17. Tostadora, los bordes se supone que son provisionales hasta que arregles los problemas. Sólo para visualizar los bloques de información. Luego los borras. Ten en cuenta que si le pones un ancho muy grande, cuando los quites será como si adelgazaran los bloques y se desplazaran tanto como ocuparan las líneas.

    SEARCH debe ser el nombre del contenedor de la barra de búsqueda.

    ResponderEliminar
  18. Me estoy vovliendo loca tratando de cambiar la sidebar de sitio en mi blog (http://neverlanddesonia.blogspot.com/). Cambio el float de la sidebar y el del mail pero el problema está en que se me desplaza la sidebar y el main pero la imagen de fondo del sidebar no se cambia de lado. Mirando y experimentando me di cuenta que puede que sea porque en la imagen de cabecera aparece ya el comienzo de imagen de fondo de la sidebar (http://2.bp.blogspot.com/_hcF8ssiWKd4/SgPADLBwO2I/AAAAAAAAAoo/GQq4A9cqYVY/s1600/topo-tinker.gif). ¿Hay algún modo de conseguir que la Campanilla de la cabecera quede donde está pero cambiar la imagen de la sidebar al lado izquierdo?

    Gracias

    ResponderEliminar
  19. Tú misma lo has explicado Sonia. Puedes cambiar la sidebar, los datos, los bloques y cualquier cosa de sitio, pero el dibujo es un dibujo, una imagen que no se puede alterar mediante CSS o HTML. La única forma sería descargándote la imagen de cabecera (la que citas), editarla y sustituirla por la anterior una vez modificada. Es el mismo problema que tengo yo si quiero hacer algún cambio de ese tipo. Si estuviéramos hablando de moda, te diría que somos unas fashion-victims. :)

    ResponderEliminar
  20. Hola, me ha resultado muy interesante tu post, soy nuevo en esto del blog y estoy en proceso de formación de uno llamad Compases de Amargura, con la plantilla minima black, me ocurre que el sidebar me aparece correctamente si visualizo solamente una entrada, pero en la página principal, se me va justamente debajo de las dos entradas, y no se como puedo solucionar este problema, que antes no me había ocurrido. Gracias de antemano, un saludo.

    ResponderEliminar
  21. Luciano, como primera cosa a intentar, prueba a reducir el ancho de la sidebar aquí:

    #sidebar-wrapper {
    width: 300px;
    float: right;

    Coloca el valor de WIDTH en 200px. Si funciona, luego ya ajustas al máximo valor que no te de problemas.

    ResponderEliminar
  22. Muchas gracias, creo que el error puede estar en el nuevo editor de entradas, existe una opción, que da un boton de ...más información, si lo uso me da ese error y si no lo uso no. De todas maneras reduciré el ancho de la sidebar y seguiré haciendo pruebas, gracias de nuevo.

    ResponderEliminar
  23. Sí Luciano. Esa nueva utilidad da algún problema que otro. Por otra parte, acabo de ver que aparentemente lo has solucionado. Para que se distingan mejor las dos columnas (posts y sidebar), añádele un PADDING a ambas.
    Saludos

    ResponderEliminar
  24. hola, la verdad esque no entiendo del todo esto pero, espero me entiendas tengo una plantilla que tiene de cabezera un titulo PERO quiziera agregarle una cabezera mas que todo el contenido PARA que la plantilla + esa cabezera con titulo que te menciono baje toda y en la nueva cabezera pueda agregarle una imagen grande.

    UNA IMAGEN VALE MAS ....

    -->http://i180.photobucket.com/albums/x16/brian-tk/Dibujo.jpg

    ResponderEliminar
  25. olvide decir que seria grandioso que me ayudaras dandote yo el html y me digas donde agregarlo, no entiendo nada >.<

    ResponderEliminar
  26. Sería grandioso, pero ya verás como todavía lo es más que lo arregles tú mismo.

    Editando tu plantilla tienes que buscar un sección (SECTION) llamada HEADER. Cuando la encuentres, cambias los valores LOCKED, MAXWIDGETS y SHOWADDELEMENT a FALSE, 3 y YES, respectivamente. Guardas la plantilla y vas a Elementos de Página. Ahora verás que puedes añadir nuevos gadgets en esa sección sin problemas. Sólo tienes que hacerlo con el elemento que quieras: imagen, HTML, etc. y moverlo arriba o debajo de la cabecera.

    En esta entrada tienes esta misma información pero más ampliada.

    ResponderEliminar
  27. hola, kisiera saber como crear mi propio fondo, asi como el tuyo q es un cuaderno, y cambiar las letras, y la parte dond dice año fecha mes kiero escribir otra cosa y no vambia gracias

    ResponderEliminar
  28. Tu pregunta realmente son muuuchas preguntas. Hay muchas maneras de cambiar lo que quieres y en todos los casos se trata de modificar la plantilla.

    Una idea rápida de hacer sería la que expliqué en Fondos bloc para las entradas, pero no sé si quedará bien en tu plantilla actual. De todas formas puedes ver cómo queda y luego ir adaptando otras cosas.

    Para cambiar las letras, ya tendrías que ver cómo funciona FONT-FAMILY. Algo se explica en esta entrada. Y con lo de las fechas, no sé a qué te refieres porque en tu blog no veo ningunas.

    ResponderEliminar
  29. Como podría eliminar el borde inferior verde del content-wrapper,o sombra, no estoy seguro, que aparece en la plantilla de mi blog?. El problema me surge al no poder centrar el footer. Yo creo que es una sombra.

    Enhorabuena por tú trabajo Oloman.
    http://convoirunning.blogspot.com/

    ResponderEliminar
  30. Ofo1965, me parece que no es ni un borde ni una sombra. Creo que es el fondo del #outer-wrapper y que el content no llega a cubrirlo del todo y por eso se ve como una línea. Prueba a quitar el color de este ID (background:transparent;)

    #outer-wrapper {
    position:relative;
    top:4px;
    left:4px;
    background: #889977;

    ResponderEliminar
  31. Hola Oloman. Estoy renovando mi blog, pero en algún sitio metí la pata en el proceso porque la sidebar me desplaza hacia abajo el bloque de las entradas.
    Ya probé a cambiar las medidas tanto de la sidebar, como de los post... de todo. Como tengo la plantilla original fuí comprobando parte por parte a ver qué había cambiado para que hiciera eso, y no lo localizo.
    Sabes a qué puede deberse?
    Este es el blog provisional http://pruebasmoblelar.blogspot.com/

    ResponderEliminar
  32. Moblelar en IE8, FF y Chrome. La barra lateral está a la izquierda y sin problemas ¿Solucionado?

    ResponderEliminar
  33. No es el blog que tengo publicado. Los cambios los estoy haciendo en un blog provisional primero, para subirlos todos juntos luego. Te dí permisos para que pudieras verlo, es este

    http://pruebasmoblelar.blogspot.com/

    ResponderEliminar
  34. Y ahí es dónde lo vi correcto. Una barra lateral a la izquierda, cortita, con poco contenido. Creo que era sólo el enlace al perfil Moblelar

    ResponderEliminar
  35. Lo que se desplaza hacia abajo es el bloque de las entradas. Osea, cuanto más larga es el sidebar, más se bajan las entradas.
    Ahora añadí algo más, para que veas más pronunciado lo que pasa.
    Pero creo que el problema es con el Slider de imagenes que tengo encima, porque si lo quito, las entradas vuelven a su sitio. Aún así, por más vueltas que le doy no consigo arreglarlo :(
    Muchas gracias

    ResponderEliminar
  36. Creo que lo encontré Moblelar. Me parece que los culpables de tus males son un par de DIV con CLEAR que hay a continuación del widget que forma el slide y antes del widget BLOG. Prueba a quitarlos.

    ResponderEliminar
  37. Te refieres a los DIV de outer-wrapper , que se cierran justo antes de los créditos ?? probé a quitarlos, de todas las formas posibles, y nada :S
    Llevo varios días dándole vueltas y no hay manera.

    ResponderEliminar
  38. Creo que me rindo. Buscaré otra forma de incluir el slide en otro sitio, porque la plantilla solo vuelve a su sitio cuando lo elimino o lo cambio de sitio

    ResponderEliminar
  39. A ver Esther. Estoy prácticamente seguro de que es lo que te dije. Lo que ocurre es que yo veo el código interpretado y me resulta difícil precisar más.

    Tras el gadget del slide, he visto dos DIV con CLEAR seguidos. Esos DIV provocan que no pueda haber nada a derecha e izquierda de las entradas y por eso te lo manda para abajo. Dicho de otra manera, anulan el FLOAT que lleva el cuerpo de os posts.

    El primero, si no me equivoco, está al final del gadget HTML1, o entre el cierre de este y el de main-section. No soy capaz de contar bien los DIVs.

    Y el otro está a continuación, muy cerca en cuanto a capas.

    ResponderEliminar
  40. acabo de echar un ojo al código fuente de la página, tal y como lo ves tú, y veo los divs esos con clear, pero en el editor del código no me aparecen! ni expandiendo artilugios, ni en el código html del slide ni nada. que raro, no?

    ResponderEliminar
  41. Pues sí. Me alegro de que lo hayas visto porque ya empezaba a dudar.

    No sé qué decirte. Quizás es alguna clase o ID que genera ese CLEAR o incluso algún script que tienes por ahí, aunque lo más normal sería que lo tuvieras en la plantilla. Quizás por otra zona ¿?

    ResponderEliminar
  42. oloman no puedo ampliar la parte de entradas del blog, solo me salen 4 y he probado todas las configuraciones

    http://cristina-afterhours.blogspot.com/

    a ve si me dices algo y gracias anticipadas.
    Cristina

    ResponderEliminar
  43. Ampliar a lo largo, supongo... Afterhous. Si lo que quieres es que se vean más entradas por página, lo primero es acceder a Configuración > Formato > "Mostrar un máximo de"

    Y ahí es dónde seleccionas la cantidad de post a mostrar por página.

    De todas formas, si no salen tantos como pretendes, es porque Blogger recorta las páginas más pesadas, eliminando posts (ver segundo apartado de este post)

    ResponderEliminar
  44. hola! necesito de vuestra ayuda, mi plantilla no tiene footer, y no sé como crear uno, simplemente no cuenta con las palabras mágicas de id='footer-wrapper-container', no sé como hacer un footer y que tenga 2 o 3 columnas, please te pido que me orientes, ;) gracias de antemano ....

    ResponderEliminar
  45. Carolina, sigue leyendo los siguientes "capítulos" de este post. Están enlazados al final de la entrada. Precisamente en el III es dónde se explica eso que necesitas.

    ResponderEliminar
  46. Hola!he creado una nueva seccion en el footer sigiendo las indicaciones que das con el ultimo codigo de este tutorial y lo he coseguido,pero lo necesito mas arriba o sea que se hubique arriba de las tres columnas que tambien tengo en el footer se puede lograr esto y de que manera?
    muchas gracias!

    ResponderEliminar
    Respuestas
    1. Sólo tienes que mover el código que forma las secciones más arriba, encima precisamente del que te forma esas tres columnas que dices. Esa operación es infinitamente más fácil si NO expandes plantillas de artilugios.

      Eliminar
    2. Muchas gracias por el dato!

      Eliminar
  47. He estado dividiendo el footer para poder añadir ahí los gadgets de imágenes pequeñas en mi blog y así tenerlo más organizado. El problema es que no consigo que se me posicionen donde quiero...Me pisan la imagen de fondo y no están bien alineados.

    He seguido los pasos que se explican aqui: http://ciudadblogger.com/2011/05/dividir-el-footer-del-blog.html

    Te dejo mi blog para que veas a lo que me refiero: http://rubibeauty.blogspot.com

    Gracias!

    ResponderEliminar
    Respuestas
    1. No le diste ningún estilo a esas divisiones y de ahí el problema. Prueba añadiendo esto a tu CSS y luego ya aplicas las modificaciones que gustes:

      #foot1, #foot2, #foot2, #foot3 {
      margin: 0 auto;
      padding: 0 10px 10px;
      text-align: center;
      height: 200px;
      }

      Eliminar
  48. Para el estilo, según lo que entendí cuando lei las explicaciones de la web, he agregado el siguiente código:
    #footer-wrapper h2{
    background:#0B243B; /* Color de fondo de los títulos */
    color:#fff; /* Color del título */
    margin: 0.0em 0 .5em;
    padding: 4px 3px;
    text-align: center;
    font-size: 16px; /* Tamaño de la fuente del título */
    }
    .footer{
    background:#ccc; /* Color de fondo de los gadgets */
    }

    Modificando el fondo y el color del título para que sean iguales que en el resto de la plantilla. El código que tu me dices sustituye a este o es algo que tengo que añadir conjuntamente a este??

    Muchas gracias por responder tan rápido!

    ResponderEliminar
    Respuestas
    1. Lo que yo te dije es un añadido. Observa que las clases son distintas: #footer-wrapper, .footer, #foot1, #foot2, etc. Cada una controla el estilo de una zona distinta y las que te puse son precisamente para lo que me dijiste.

      Eliminar
  49. Hola. Estoy tratando de armar una plantilla para blogger, y aunque el layout se ve bien el blog, en la vista de diseño se muestran las secciones apiladas. Alguna de por que pueda ser esto?

    Gracias
    Saludos
    http://pruebas-blog-nico.blogspot.com.ar/

    ResponderEliminar
    Respuestas
    1. Hola Nicolás. Eso ocurre a veces (dependiendo del diseño de la estructura) cuando los bloques no son de ancho fijo y los haces adaptables. Hay que ser muy fino para que en Diseño se vea bien, pero siempre puedes ajustar el estilo de los bloques que se solapen allí viendo cuales son y añadiendo reglas del tipo:
      body#layout .main {width: 300px !important;}

      Las propiedades que escribas para cualquier selector al que le antepongas body#layout, sólo se aplicarán para la vista Diseño.

      Eliminar
  50. ¡Hola! Te agradecería que me ayudaras a mejorar mi blog. Me gustaría que la columna de la derecha (donde aparece la nube de etiquetas y enlaces a otras entradas) quedara siempre fija aunque nos desplacemos arriba y abajo. ¿Cómo puedo hacerlo? www.lasitakas.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola Katiana. Si la barra lateral arrancara desde arriba del todo te daría un sistema muy sencillo, pero tal como la tienes a partir de la cabecera, que por otra parte es la usual, dejarla fija requiere de unas modificaciones que no te puedo indicar fácilmente. Lo siento.

      Eliminar