Plantilla simple para Blogger con diseño adaptable (Minima RWD) | Oloblogger No voy a explicar mucho porque el título en esta ocasión, a diferencia de otras entradas en las que me cuesta más, creo que lo dice todo. Ho...

20 de abril de 2014

Plantilla simple para Blogger con diseño adaptable (Minima RWD)

No voy a explicar mucho porque el título en esta ocasión, a diferencia de otras entradas en las que me cuesta más, creo que lo dice todo. Hoy encontraréis aquí una plantilla para Blogger pero con diseño adaptable (Responsive Web Design).

Lo único a destacar es que es una plantilla basada en la llamada Minima, una de las más simples que incluía Blogger hasta hace no mucho en su catálogo, justo hasta que sacó las del Nuevo Diseñador y las Dinámicas.

¡Ah! y también que la imagen que usé para la cabecera es una de Thomas Subtil, uno de esos genios de la foto-manipulación que andan por ahí.




Aunque se podría usar tal cual, la idea no es daros una plantilla terminada, sino una base completa con formato adaptable y con el mínimo código posible para no complicar su interpretación.

A partir de ahí podéis personalizarla como queráis, pero ya contando con la ventaja de su flexibilidad para cualquier ancho de pantalla. Tiene casi todos los colores y fuentes accesibles desde el Diseñador, así que más fácil imposible.


Cosas a tener en cuenta


* La plantilla móvil tiene que estar inhabilitada y así se cargará para este tipo de dispositivos la misma plantilla que veis en web.

* El ancho de la barra lateral se controla cambiando los valores de la siguiente parte que he marcado en verde y negrita:

#main-wrapper {
width: 100%;
max-width: 1200px;
margin-right: -320px;
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 */
background: $bgmain;
}
.main {
margin-right: 320px;
padding: 10px;
}
#sidebar-wrapper {
width: 300px;
float: right;
padding: 10px 10px 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 */
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
background: $bgside;
}

Si queréis aumentarla o reducirla, el ancho se indica en el selector #sidebar-wrapper, teniendo que incluir en #main-wrapper y .main el mismo valor incrementado en 20px (por el padding lateral), uno negativo y otro positivo.

Y ya está. No hay ninguna otra cosa especial que tener en cuenta para poder trastearla al gusto.

¿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

95 comentarios :

  1. Me gusta por sencilla y clara. Va al fondo de reserva para futuros proyectos.
    El toqueteo de código (que a los cobardes no atemoriza) para cambiar el ancho supongo que lo das porque no se puede hacer desde el diseñador ¿cierto?

    ResponderEliminar
    Respuestas
    1. Así es Jesús. Podría haberlo hecho ajustable desde el diseñador, pero suponiendo que el que se metiera a cambiar otras cosas sabría hacer también eso, preferí explicarlo.

      Eliminar
  2. Pues a mi no me sale cambiar el blog, pásate por el y dame instrucciones por favor! mi blog es este: http://missisdolly.blogspot.com.es/ Quizá me puedas ayudar a cambiar todo el formato y a sambullirme en el htlm ese de los cojones jejeje. Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Celia. Simplemente tienes que descargar la plantilla a tu disco duro (será un fichero .xml), luego entrar al escritorio de Blogger, sección Plantilla y arriba a la derecha verás un botón que pone algo así como "Restablecer copia de seguridad". Si le pinchas se abre una ventana para poder subir el anterior fichero descargado (el .xml) y con eso ya tendrás esta plantilla en tu sitio.

      Eliminar
  3. Bueno es una plantilla con muchas posibilidades, también para su rediseño. Creo que empezaré a probar con esta, si salgo airoso (no parece que se vaya a complicar pues parece fácil), seras el primero en verla y gracias por las anteriores también por supuesto!

    ResponderEliminar
  4. Hola Olo... No se si te pasa lo mismo, pero desde hace 3 días no puedo escribir en el blog... me dice que es un error bX-fp1o55 y he visto que a otras personas les sucede lo mismo. ¿Tiene solución?

    Te agradeceré una orientación.

    ResponderEliminar
    Respuestas
    1. No, no sé nada porque esos errores no son muy explícitos. Sin embargo he leído que sólo pasa si se usa Safari. Prueba con otro navegador por si fuera eso.

      Eliminar
  5. Es cierto, uso el Safari.

    Muchas gracias!

    Recomiéndame un navegador para Mac...

    ResponderEliminar
    Respuestas
    1. En mi vida he tenido un Mac, Mer... y pienso que nunca lo voy a tener :)

      Eliminar
    2. Para Mac con Chrome está bien ;D

      Eliminar
  6. Buenísimo el theme amigo Oloman, diseño limpio y ordenado siempre gana ;) lo probaré con un proyecto durante la semana, cuando este andando te muestro el resultado, un abrazo y gracias!

    ResponderEliminar
  7. Oloman he detectado un problema, la plantilla no se ve responsive en móvil, por lo menos en iPhone no se ve bien, te dejo una captura, a ver si puedes pillar el problema http://cl.ly/VhwF

    ResponderEliminar
    Respuestas
    1. Me auto-contesto, faltó agregar el meta viewport en el template Oloman, adjunto código http://cl.ly/ViSl

      Eliminar
    2. Estupendo. Se me escapó eso. Ya lo actualizo en la plantilla... y muchas gracias Ignacio

      Eliminar
  8. Ya lo he conseguido.Muchas gracias

    ResponderEliminar
    Respuestas
    1. Bien. Ya me di cuenta, porque entré directamente a tu comentario desde mi correo y vi tu sitio antes de poder comprobar que habías eliminado los otros comentarios. Venía a decirte que no veía esa publi... ;)

      Eliminar
    2. Y de nada... evidentemente

      Eliminar
  9. Hola Oloman!

    Una plantilla adaptativa, limpia y gratuita... tu blog no deja de sorprenderme, muchas joyas por aquí dentro

    Muchas gracias por compartir y enhorabuena, que estas cosas llevan mucho curro!

    ResponderEliminar
    Respuestas
    1. Gracias Fran. A veces lo que no cuesta pasta no se valora ;)

      Eliminar
  10. Hola Oloman, muy buena plantilla, la estoy usando en mi blog, muchas gracias!!!
    Una sola consulta, como quito el cuadro negro, el borde que aparecen en las imagenes?
    Gracias
    Mi blog: www.artebreve.com

    ResponderEliminar
    Respuestas
    1. Hola. Simplemente quita este trozo... o mejor aún, pasa los valores 4px y 1px a 0px. Así si algún día quieres volver a ese estilo u otro similar, sólo tendrás que volver a modificar esos valores.

      .post img, table.tr-caption-container {
      padding: 4px;
      border: 1px solid #cccccc;
      }

      Eliminar
    2. Muchisimas gracias Oloman, me funciono de maravilla, ahora si quedo perfecta.
      Saludos.

      Eliminar
  11. Hola estimado Oloman, un 'revival' a este tema,hay un problema con la inserción de videos de Youtube / Vimeo / otros y es que no aparecen en responsive, habrá alguna forma de reparar esto?, saludos!

    ResponderEliminar
    Respuestas
    1. Sí, claro que sí Ignacio. Y es la única posible.

      Mete el código completo que te da YouTube en dos DIV anidados con estas clases:

      <div class="video-wrapper"><div class="video-container">
      CODIGO YOUTUBE
      </div></div>

      La plantilla ya incorpora el CSS necesario que hace la magia ;)

      Eliminar
    2. Te pasas Oloman!, muchísimas gracias, funciona perfecto, eres un total genio jaja, un abrazo!

      Eliminar
    3. otra opcion para volver los videos y google maps responsive en cambiar el widht por 100% y el height por auto, así siempre irán al margen del contenedor donde quieras ubicarlos.
      Saludos Oloman

      Eliminar
  12. Hola Oloman mme gustaría saber como hago que mi blog tenga adapatación RESPONSIVE sin tener que cambiar la plantilla ya que no quiero hacer eso Mil gracias si puedieras hacer un POST

    ResponderEliminar
    Respuestas
    1. Lo siento Andrés, pero no se puede dar un código concreto para hacer adaptable de forma general cada tipo de plantilla. Cada una necesita sus propios "trucos". Por eso nunca he hecho un post sobre ello. Se podrían dar unas pautas, pero si no se conocen los entresijos del HTML y sobre todo, del CSS, esas pautas no sirven de nada.

      Eliminar
  13. Hola,
    imposible descargar la plantilla. ¿Parece que han baneado tu cuenta de Dropbox?

    ResponderEliminar
  14. Gracias Maeve por el aviso. Sí, tuve unos problemas con DropBox, pero creo que ya está solucionado ¿me lo puedes confirmar? Si es que sigue sin funcionar ya te paso otro enlace.

    ResponderEliminar
  15. Gracias por este aporte tan valioso. Me gustaría que el menú de paginas en celular saliera tipo desplegable o más reducido ya que ocupa bastante espacio en mi caso que tengo siete títulos pero estoy conociendo apenas el lenguaje html y no se como modificarlo. De todas formas si tienes alguna sugerencia, gracias.

    ResponderEliminar
    Respuestas
    1. Eso de que a partir de un ancho el menú se muestre plegado es algo que estoy viendo, pero todavía no he montado ningún tutorial... pero no sé cuando lo podré hacer, así que paciencia.

      Eliminar
  16. Gracias por la plantilla Oloman, me ha venido de perlas para mi web, aunque quizás la modifiqué un poquillo..... www.abelvazquez.es

    ResponderEliminar
  17. Hola Oloman, dos preguntas:

    1. ¿Por qué has puesto doble coma en el padding de #sidebar-wrapper: padding: 10px 10px 0;;?

    2. No seria mas fácil poner (en vez de ese margin-right negativo) esto:

    #main-wrapper {
    width: 65%;
    float: left;
    ........
    }

    #sidebar-wrapper {
    width: 30%;
    float: right;
    ......
    }


    @media (max-width:768px) {
    #main-wrapper {
    width: 100%;
    float: none;
    margin: 0 auto;
    }

    #sidebar-wrapper {
    width: 100%;
    float: none;
    margin: 0 auto;
    }
    }

    Lo he probado asi y funciona bien...¿o hay algo que se me escapa?

    ResponderEliminar
  18. Hola. Como dicen los famosos... "Me encanta que me hagas esa pregunta". Bueno, más bien me gusta que os preguntéis cosas.

    Lo primero es simplemente un error tipográfico y por el sitio dónde está no afecta en nada.

    Lo segundo tiene su explicación y es que si haces la barra lateral del 30% no tendrá un ancho fijo y podría darse el caso de que en ciertos tamaños de pantalla ese 30% fuera insuficiente para algunos de los gadgets que pudiera tener.

    La caja principal tiene un margen grande para dejar un hueco y ahí es dónde coloco la barra lateral de un ancho fijo. Con ese margin-right negativo que viste, lo que se hace es compensar el anterior para dejar todo en su sitio de nuevo.

    En resoluciones de 768px o menos ya lo que hago es quitar el float y hacer que ocupen todo el ancho, de manera que una cosa quedará encima de la otra.

    ResponderEliminar
    Respuestas
    1. A ok, ya veo, pero si lo que pongo dentro del sidebar también lo hago responsive, puedo usar el 30% sin necesidad del margen negativo que confunde un poco.

      Dos preguntas mas:

      1. Veo que después del outer-wrapper pones un div que contiene todo y lo llamas "wrap2", pero ¿para qué? no lo veo necesario ni tampoco tiene reglas de CSS... ¿o es necesario para algo que no me he dado cuenta?

      2. Siempre quise saber para que sirve esta parte:





      Gracias!!

      Eliminar
    2. No salió el código, me refiero a la parte que está rotulada bajo el título "skip links for text browsers" y tiene dos links: uno dice "skip to main" y el otro 'skip to sidebar"... no le encuentro la finalidad, gracias!

      Eliminar
    3. La caja wrap2 efectivamente no suele tener utilidad, pero la llevan todas las plantillas anteriores a las del "Nuevo diseñador" (esta está hecha a partir de la Mínima) y como en alguna ocasión la he tenido que utilizar para alguna cosa especial pues siempre la dejo.

      Con respecto al "skip to main" y el otro, realmente no lo sé, porque en principio tendrían que ser un marcadores para poder ir con un click a esos elementos, pero al aparecer ocultos no sirven en realidad para eso.

      Eliminar
  19. Saliendo de una misión casi imposible, he hecho todo lo que he podido por mis medios, pero me está tomando el pelo el gadget de entradas populares el titulo del post se monta en la imagen miniatura, traté de quitar la imagen en miniatura y aun así se monta en el post. que será? la alineación? espera.... ya la encontré! text-indent:-15px; la pasé a 0px y solucionado. jajajajja el menú "pagelist" tuve que probar con menú prediseñado que fui modificando al gusto, no fui capaz de modificar el que venia por defecto. pásate por mi blog, ya habrá algo que me puedas aconsejar. :D SONIDOS&NOTAS

    ResponderEliminar
    Respuestas
    1. Lo único que no pita bien es precisamente el menú, pero supongo que no tardarás en encontrar uno que sea adaptable ;)

      Eliminar
  20. Gracias por compartir,me gusta mucho la plantilla ( aunque la de descarga no es igual que la de la imagen y por más que pruebo para darle ese aspecto y cambiar los valores para hacer más ancha la barra lateral no hay manera.
    No se qué haré mal...

    ResponderEliminar
    Respuestas
    1. Sigo trasteando con la plantilla,y veo leyendo de nuevo,que la plantilla que se ve es para móvil...puff esto se me hace grande a pesar lo que claro que lo explicas todo.Gracias de nuevo.

      Eliminar
    2. Hola. Tendrías que decirme dónde la pusiste y qué es exactamente lo que quieres cambiar

      Eliminar
  21. Hola!
    Gracias por la plantilla, gracias a ella puedo poner al día el diseño de mi página. Te quería pedir ayuda porque algo he tenido que tocar recientemente en el código y ahora el contenido de las páginas estáticas no son adaptables. Antes recuerdo que la galería destinada a fotos se recolocaba perfectamente al disminuir la pantalla, sin embargo ahora no hay forma. He intentado buscar el error, pero no soy una experta y me está dando más de un quebradero de cabeza. Podrías echarle un vistazo o aconsejarme que puedo hacer? Un saludo

    ResponderEliminar
    Respuestas
    1. Se me olvidaba, mi página es ésta: http://lauradelgadocv.blogspot.fr/

      Eliminar
    2. Me respondo a mí misma porque acabo de encontrar el error. Desesperada te escribo porque no consigo averiguar que pasa y casualidades de la vida, poco después topo con el problema. De todos modos gracias, porque gracias a blogs como el tuyo y el de otros compañeros otros estamos aprendiendo un montón y nos dais la posibilidad de hacer cosas que de otro modo no hubieran sido posibles.

      Eliminar
    3. Suele pasar... eso de creer que todo está perdido y justo en ese momento, al tomarse una pausa (para escribir el comentario, por ejemplo), seguir investigando y dar enseguida con el fallo.
      De nada ;)

      Eliminar
  22. Tengo publicado un blog estructurado básicamente en dos columnas: a la izquierda aparecen las entradas y en la derecha una barra lateral: http://blogdediscos.blogspot.com.es/
    En la barra lateral, no consigo disminuir el margen derecho para que quepan más caracteres (sin tener que aumentar el tamaño de la columna, que eso ya lo se hacer). No se mucho de html pero ya he probado de modificar decenas de parámetros de la plantilla sin obtener resultados positivos. Me podéis ayudar, ¿cómo se reducen los márgenes interiores de la barra lateral de una plantilla de blogger? Saludos.

    ResponderEliminar
  23. Lo tienes aquí:
    .section {
    margin: 0 15px;
    }
    Prueba a modificar ese 15px. Si sólo quieres modificar el margen derecho entonces tendrías que añadir dos valores más > margin: 0 15px 0 0;

    ResponderEliminar
    Respuestas
    1. Muchas gracias Oloman, he incluido la sección que mencionas, toda a ceros, y funciona.
      En mi plantilla solo habia esta section:
      .main-inner .column-center-inner .section {

      Eliminar
  24. Oloman, muchas gracias por esta plantilla. La he implementado en mi blog y tengo un problema; la imagen de la header se ve muy grande. Mucho más grande de lo que la original es. Cómo puedo solucionarlo?
    Saludos

    ResponderEliminar
    Respuestas
    1. Adriana, lo suyo sería que hicieras la imagen original más ancha para que no te saliera distorsionada, porque no sé si te gustará como queda más pequeña que el ancho.
      No obstante, si quieres modificar eso, simplemente busca esta parte en tu plantilla, y quita ese width: 100% !important; que verás:

      #header-inner {
      width: 100% !important;
      height: auto;
      min-height: 0 !important;
      background-position: center !important;
      margin-left: auto;
      margin-right: auto;
      etc.

      Eliminar
  25. Gracias Oloman. Lo pondré en práctica.
    Saludos

    ResponderEliminar
  26. Hola Oloman, intento implementarla, pero la quiero entera en blanco, fondo, sidebar etc pero no he conseguido cambiar una barra que aparece en la cabecera ¿Puedes decirme como quitarla? http://pruebasike.blogspot.com.es/
    (Arriba del todo, donde pone pruebas, en marrón oscuro) Gracias

    ResponderEliminar
    Respuestas
    1. Eso es el gadget de páginas. Si vas a Diseño y lo eliminas, ya no te saldrá.

      Eliminar
    2. Eso pensaba, pero al quitarla sigue apareciendo, es mas arriba, en realidad es parte del Header, te deja cambiar a cualquier color menos blanco o trasparente, la he dejado de color azul a propósito para que lo veas

      Eliminar
    3. Aquí, en esta parte del CSS de la plantilla, tienes tu fondo azul. Yo creo que no lo puse...
      #header-wrapper {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      background: #2a77aa;
      }

      Eliminar
    4. Perdón, ese debe ser el que añadiste. Es este otro:
      #header .description {
      margin: 0;
      padding: 15px 20px;
      text-transform: uppercase;
      letter-spacing: .2em;
      line-height: 1.4em;
      font: normal normal 78% Arial, Tahoma, Helvetica, FreeSans, sans-serif;
      color: #ffffff;
      background: rgba(0,0,0,.3);
      text-shadow: 0 1px 2px black;
      }

      Eliminar
    5. Algo debe fallar, el primer código que me diste es correcto, solo que no cambia al blanco o trasparente, se pone el gris que ves:
      #header-wrapper {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      background: #ffffff;
      }

      Eliminar
    6. El segundo es el que te permitirá cambiar ese color gris. En concreto esta línea:
      background: rgba(0,0,0,.3);

      Eliminar
    7. Gracias Oloman... has dado en el clavo!!!

      Eliminar
  27. Hola Oloman, Me gusta la Plantilla, y quería Implementarla en un Blog relacionado con un canal de Astronomía que estoy iniciando en youtube https://www.youtube.com/channel/UCIFEOQMg5cqIIJNunht_syg
    Pero no he tenido éxito con la columna lateral derecha. Ya Que Aunque en el diseñador de Blogger me aparece todo los gadget que coloco en ella sencillamente aparecen al final de la entrada del Blog. Me gusta mucho porque ocupa toda la cabecera, cosa que no he podido encontrar en ninguna plantilla que e probado, pero el problema este me tiene muy confundido. Si me puedes dar un consejo sencillo se agradecerá, no tengo mucha idea de HTML. Saludos Jorge Diaz (Argentina)

    ResponderEliminar
    Respuestas
    1. Dime cual es la dirección de tu blog, JD. Si no lo veo no puedo adivinar dónde está el problema.

      Eliminar
  28. Ok, Aquí el Link Oloman http://universo-asombroso.blogspot.com.ar , Si miras me pone Adsense al final y quiero que aparesaca en una columna Lateral derecha. Gracias por tu Interes

    ResponderEliminar
    Respuestas
    1. JD, por lo que yo veo los gadgets te salen bien, todos en la barra lateral. Lo que ocurre es que precisamente por tratarse de una plantilla adaptable, cuando lo ves desde pantallas de menos de 1024px de ancho, automáticamente la barra lateral y todo su contenido se pasa debajo de las entradas. Si lo ves en una pantalla mayor verás que se ve correctamente.

      Eso sí, he visto otro fallo y es que la imagen que pusiste de cabecera la pusiste como gadget HTML/JavaScript. y además dentro de una tabla. En lugar de eso añádela en el gadget "Cabecera" y verás que cuadra mejor.

      Eliminar
    2. Ok, estimado Muchas Gracias, no me percate de la resolución de mi pantalla. Conoces alguna Plantilla simple, Con una Columna lateral, Y Que además Ocupe el total de la Pagina y Como ejemplo doy Tu Blog que Ocupa El 100 % de la pantalla. No Como las Ofrecidas por Blogger Que Parecen tener una Especie de Espacios tanto Lateralmente como en la parte Superior que No Puedes cambiar de ninguna manera aunque toques el ancho de las columnas

      Eliminar
    3. Si te gustó esta, la puedes adaptar. Sólo tienes que editar tu plantilla y buscar max-width: 1200px;

      Te debe aparecer en cuatro sitios distintos. Cambia en los cuatro ese 1200px por un 100% y ya lo tienes.

      Personalmente pondría un tope, quizás 1600px o así si no te gusta el 1200px, pero ya haces pruebas y lo pones como quieras ;)

      Eliminar
    4. Y yo me creía que tardaba mucho en contestar los comentarios XD

      Eliminar
  29. Yo buscaba una plantilla responsive pero al momento de adaptarse no me agradaron muchas entonces como soy un seguidor tuyo que busca cosas que adaptar ala web encontré esta y la tengo en mi web ya llevo bastante tiempo con ella :)

    ResponderEliminar
  30. Me ha venido genial esta plantilla para reconstruir la mía. Ya estaba cansado de la versión móvil. Desde hoy mismo la estreno oficialmente.

    He aprovechado para tunear el aviso por defecto de las cookies, tal como explicaste en otra entrada más reciente.

    Gracias por compartirla y por dejar que la destrocemos xD

    ResponderEliminar
    Respuestas
    1. De nada José. Vi un aviso tuyo en G+ y también visité el blog. Pensé en comentar pero se ve que al final, procrastinando, salté a algún otro sitio y no te lo llegué a dejar.
      Un cambio -casi- necesario ;)

      Eliminar
    2. Como voy a usar la misma plantilla en varios blogs, estoy haciendo un poco de limpieza y optimización en la hoja de estilos, además de otros cambios, para facilitar el mantenimiento. Así que todavía no he terminado con ella... De hecho, estoy ahora mismo trabajando en ella xD

      Eliminar
  31. Hola.

    ¿Sabes cómo dejar un formulario como éste?

    http://minima9.blogspot.in/p/contact-form.html

    No parece que esté puesto en una entrada normal.
    Otra cosa, ¿tienes alguna entrada en la que se explique cómo convertir una plantilla en responsive?
    Gracias.

    ResponderEliminar
  32. Siguiendo las instrucciones de este post podrás configurar un formulario Blogger como quieras. Ese que me muestras sólo tiene de particular que usa FontAwesome para los iconos.

    Con respecto a la explicación para convertir en adaptable una plantilla la respuesta es que no tengo nada publicado. Es casi imposible dar instrucciones genéricas para tantas plantillas que existen distintas, así que por eso decidí hacer esta. A partir de ella puedes modificar lo que gustes.

    ResponderEliminar
  33. Me encantó!!!! Es justo lo que andaba necesitando!!!! Mil gracias por el aporte!!!

    ResponderEliminar
  34. Hola Oloman,
    Estoy trasreando en esta plantilla en un blog que tengo de pruebas con resultados bastante buenos, en fin... que me gusta, para ponerla en mi blog y como en algún comentario dices que el menu de páginas no "pita" he intentado modificarlo y aunque le he cambiado el aspecto sigue sin "pitar", sutitucion: hace unos años encontré en Dynamicdrive un triple menú que con unos pocos cambios lo puse a mi gusto y lo coloque en el blog, el horizontal de arriba para las páginas, ahora hurgando el el archivo JS pincipal pude ver que controlaba un cuarto menú y hice una clonacion del horizontal en una tira desplegable y con la regla "media queries" se comuta uno por otro, funciona algo asi como el de las vistas dinámicas, de momento vale.
    Y ahora tengo una duda: en las páginas de mi blog habia algunas cajas que no se re dimensionaban y le hice un apaño.¿Cuando cárge la nueva plantilla no me desaparecerán cosas?

    Saludos y gracias. Aceliano

    ResponderEliminar
    Respuestas
    1. Hola Villalisaceliano

      El que no "pitaba" era el menú de otro usuario que puso uno personalizado. El de Páginas funciona bien en esta plantilla. Otra cosa es que quieras añadir uno desplegable.

      El menú de Páginas de Blogger se genera automáticamente según creas nuevas páginas, pero sólo tiene un nivel. Para montar cualquier otro menú que sea desplegable ya tienes que contruirlo a mano, añadiendo el CSS y HTML que corresponda (según el formato que elijas), tal y como hiciste.

      Sobra la duda concreta del cambio de plantilla, cuando la cambias los contenidos se mantienen (entradas, páginas y gadgets Blogger), pero todo aquello que hayas personalizado desaparecerá. Dicho de otra forma, al cambiar la plantilla verás lo mismo que ves ahroa en tu blog de pruebas pero con los artículos (o publicaciones) del original.

      El menú que dices que creaste si lo estás viendo en pruebas lo verás en original, pero si no lo ves en pruebas, desaparecerá del original cuando cambies. La solución es obvia: incorporar el código que pusiste en tu blog para crear ese menú, también en el de pruebas.

      Eliminar
  35. Hola Oloman, intento ocultar la sidebar en las páginas estáticas, lo consigo, pero no desplazar y centrar luego el blog, sigue quedando el margen de la sidebar aunque no esta, el codigo que incluyo es este:


    style type='text/css'>
    #sidebar-wrapper {
    width: 0px;
    display:none;
    visibility:hidden;
    }
    #main-wrapper {
    width: 100%;
    }
    style


    (he quitado partes de código, ya que si no me da fallo de envío)

    ResponderEliminar
    Respuestas
    1. La parte de #sidebar-wrapper está bien, pero para el resto tendrás que aplicar lo siguiente:

      #main-wrapper {
      margin-right: 0;
      }
      #main {
      margin-right: 0;
      }

      Eliminar
    2. Perfecto Oloman, horas, literal, de intentos se traducen en unos segundos tuyos que han resuelto lo que me parecía ya imposible. MIL GRACIAS!!!

      Eliminar
    3. Hola Oloman, hacía tiempo que no realizaba ninguna pregunta, además como compruebo que tu tiempo es escaso intento evitarlas ¿Como se puede quitar la sidebar siempre, que no aparezca en el blog en ningún momento?

      Eliminar
    4. Hola Ike. Para "eliminar" la barra lateral de la plantilla (en todos los casos), los valores que tienes que modificar son los siguientes, en esos tres selectores que indico:
      #main-wrapper {margin-right: auto;}
      .main {margin-right: auto;}
      #sidebar-wrapper {display:none;}

      Si quieres puedes añadir directamente lo anterior al final de tu CSS y así si quieres volver a poner alguna vez la sidebar, sólo será cuestión de quitarlo. Pon un comentario en ese caso para acordarte.

      Eliminar
    5. Gracias Oloman, como siempre tus respuestas aclaran y resuelven nuestras dudas.

      Eliminar
  36. buenas, una pregunta preguntona y digamos que si quiero cambiar de imagen al momento de que la resolución es de 640px uhmm como seria :D saludos

    ResponderEliminar
    Respuestas
    1. Hola .Sm4c.
      Esta plantilla es SIMPLE, así que no tiene previsto eso ni otras cosas.

      De todas formas, la forma más sencilla sería haciendo una segunda cabecera y con CSS ocultarla (display:none;). Luego mediante una @media para ese ancho o el que quieras, ocultar la cabecera principal y mostrar la segunda.

      Eliminar
    2. Gracias por la pronta respuesta :D saludos.
      lo pondré en practica.

      Eliminar
  37. Gracias Oloman. Estaba buscando algo así, que fuera simple y clásico, pero preparado para los nuevos dispositivos. No me gustaba mucho nada de lo que estaba viendo y aunque he intentado bajar y modificar alguna de autor, la verdad es que me he liado hasta la desesperación. Espero tener mucha más suerte con esta y me encanta que nos animes a trastear con ella, no puedo esperar... Gracias por tu increíble web y tu gran trabajo. Un saludo.

    ResponderEliminar
    Respuestas
    1. De nada.

      Si no te gusta lo que encuentras entonces creo que has tomado la mejor decisión, que es crearte tu blog a tu gusto. Lo que yo facilito es el esqueleto. Ahora a completarlo :)

      Eliminar
  38. Y si por ejemplo quisiera hacer desaparecer la columna lateral, que debería borrar?

    ResponderEliminar