Crea columnas responsive en Blogger

5.5.16

Tablas columnas responsive Blogger


Este tutorial hará las delicias de quien desea mostrar sus servicios en un blog de Blogger de manera clara y sintética. Siguiendo unos sencillos pasos podrás crear filas de dos o tres columnas adaptables a todos los dispositivos.


Hoy en día nos movemos en un mundo sobresaturado de información, accedemos a Internet en cualquier lugar y momento desde nuestro móvil o tablet. Nos hemos acostumbrados a escanear con velocidad las páginas, y no dudamos en saltar de un enlace a otro si el contenido no nos muestra a la primera aquello que nos interesa. Observa como funcionan últimamente las páginas más modernas: eliminan toda información secundaria y exponen su contenido progresivamente haciendo uso del scroll. Los párrafos son muy cortos y se ilustran con fotografías o iconos.

En páginas estratégicas como las de venta la disposición del contenido en columnas es muy recurrente. Permiten mostrar los productos, los valores, los procesos de compra...de manera rápida y sintética. Para los que tenemos un blog de Blogger conseguir este efecto no es nada fácil. En el editor de entradas de esta plataforma no existe ninguna herramienta para crearlos, y a diferencia de Wordpress.org no tenemos plugins milagrosos que nos añadan estas funcionalidades. Pero crearlas no es imposible...si recurrimos a código.

Puede que ya hayas probado uno de los muchos tutoriales que permiten esta disposición editando el contenido en HTML. La gran mayoría hace uso de tablas, etiqueta <table> y celdas <td>, con anchos y altos definidos en píxeles. En el ordenador se ven perfectas pero el problema aparece en otros dispositivos, cuando el contenido se ve cortado al no adaptarse al nuevo ancho de pantalla. Esto hace inoperante cualquier mensaje y la visita abandonará la página al instante.

En esta entrada te propongo un método para Blogger que te permitirá crear filas con contenidos de dos o tres columnas que se adaptaran a cualquier ancho de pantalla. El contenido puede ser texto y/o  imágenes.  Te puede servir para propósitos muy diversos. Un ejemplo de uso los puedes ver aplicados en los blogs diseñados por mi : en la página de venta de Mon petit Crochet (que podeís ver en la fota de portada de esta entrada) y en la de Proceso de encargo de Pa Monísima:Yo.

Funciona bien en casi cualquier plantilla de Blogger, incluidas las nativas. Puedes ver su comportamiento y funcionalidad básica en la plantilla simple de Blogger.




Instalación paso a paso


1. Añade el código CSS

Si deseas utilizar columnas responsives en varias entradas o páginas lo más adecuado será instalar este código en la plantilla  de tu blog. Son apenas unas líneas, no retardaran la carga del blog.  Antes de editar la plantilla HTML recuerda hacer una copia de seguridad. Te indico como hacerlo paso a paso en el punto 1 y 2 del este tutorial.

En la misma opción Plantilla del panel de administración de Blogger clica en el botón Editar HTML. Ahora pegaremos el siguiente código justo antes de la etiqueta </head>. Para encontrarla clica dentro de las líneas de código y saca el buscador clicando a la vez CTRL+F. Escribe </head>.

Copia el siguiente código y pégalo justo antes de </head>
<style> 
/* columnas responsive de minervaurora.blogspot.com */
 .fila, .col-2, .col-3, img{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.fila {
  margin-right: -15px;
  margin-left: -15px;
}
.fila::after {
  clear: both;
}
.fila:before,
.fila:after{
  display: table;
  content: " ";
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.col-2, .col-3  {
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: left;
  margin-top:15px;
  margin-bottom:15px;
}
.col-2 {
  width: 50%;
}
.col-3 {
  width: 33.33333333%;
}
.fila img{
  max-width:100%;
}
@media only screen and (min-width: 768px) and (max-width: 960px) {
.col-3 {
width: 50%;
}
}
@media only screen and (max-width: 767px) {
.col-2, .col-3{
width: 100%;
}
}
/* fin de columnas responsive */
</style>


2. Crea las filas y columnas en HTML 

Una vez el código CSS instalado en tu plantilla podrás crear columnas tanto en entradas como en páginas de tu blog, Pero será necesario editarlas en modo HTML. Para probarlo por primera vez puedes abrir una nueva página estática. Clica en el botón HTML del editor de entradas (está al lado del de redactar).

Coloca el cursor tras el texto donde quieras añadir la fila de columnas. Copia el siguiente código y pégalo en tu entrada:
<div class="fila">

  <div class="col-2">TU CONTENIDO</div>

  <div class="col-2">TU CONTENIDO</div>

</div>


Si deseas crear una fila de tres columnas usa el siguiente código:
<div class="fila">

  <div class="col-3">TU CONTENIDO</div>

  <div class="col-3">TU CONTENIDO</div>

  <div class="col-3">TU CONTENIDO</div>

</div>


Sustituye las palabras TU CONTENIDO por aquello que quieres encerrar en cada columna. Es importante que no modifiques ni borres nada del resto.

Si necesitas crear más filas no es necesario que vuelvas a copiar la primera y la última línea de código. Por ejemplo si deseas crear dos filas de tres columnas lo escribiríamos así:

<div class="fila">

  <div class="col-3">TU CONTENIDO</div>

  <div class="col-3">TU CONTENIDO</div>

  <div class="col-3">TU CONTENIDO</div>

  <div class="col-3">TU CONTENIDO</div>

  <div class="col-3">TU CONTENIDO</div>

  <div class="col-3">TU CONTENIDO</div> 

</div>

No es necesario que el contenido que encierres en columnas sea múltiplo de tres. Es decir que puedes encerrar entre las dos primeras líneas de código el numero de líneas que desees.

Antes de publicar puedes comprovar cual será el resultado en la vista previa. Para ver como actua en diferentes dispositivos estrecha la ventana de tu navegador. En el caso que tengas habilitada la vista móvil de Blogger solo podrás ver su funcionamiento una vez publicada.  Entonces puedes activar en tu navegador la vista móvil añadiendo al final de la URL ?m=1.

Observa que las columnas en el móvil se colocan una detrás de otras adaptándose al ancho que tu plantilla  inponga en la vista móvil.


3. Añade imágenes en las columnas

Blogger gestiona las imágenes de manera bastante peculiar. Para que se alineen bien dentro de las columnas te aconsejo que las añadas desde el editor en modo HTML y observes las opciones que te da.



Si deseas que la imagen siempre llene el ancho de la columna deberás subirla a un tamaño generoso, como mínimo 640px. Escoje tamaño original o hazla más pequeña seleccionando el tamaño extra grande). Elige en Alineación de la imagen la opción Ninguna para que Blogger no añada los molestos márgenes que de manera tan corriente  la desplazan. Si las imágenes que quieres colocar  son suficientemente pequeñas puedes hacer uso de las otras opciones de alineación. Permitiran el flujo de texto alrededor de ellas como ocurre cuando se aplican en modo Redactar.



Epero que este tutorial sea claro y te sirva de ayuda. Con un poco de paciencia tu Blogger puede mostrar unas entradas con contenido bien maquetado y lo mejor, totalmente adaptable a los diferentes dispositivos.

Me gusta ser muy franca, y si en el anterior tutorial para crear un menú responsive en Blogger mencioné la fuente de donde lo extraje esta vez confieso que el código ha sido posible crearlo gracias a mis estudios y dedicación. Por esto mismo te ruego que lo difundas compartiéndolo en tus redes y pueda llegar a más bloggers interesadas, ya que no lo encontraran en otros blogs.

Y por supuesto, si tienes dudas, o simplemente deseas comentar, "criticar" o sugerir mejoras en este tutorial, anímate a comentar aquí abajo. Seguro que nos será de utilidad a todos los usuarios de Blogger ;)




Entradas relacionadas

53 comentarios

  1. ¡Qué maravilla! Queda muy impactante y me encanta. Tengo que usarlo en algún post de recomendaciones literarias infantiles, seguro que agrada mucho a la vista jajaja... (aunque tengo que confesar que soy un poquito torpe cuando se trata de códigos jajaja).

    Gracias por compartirlo con nosotras. ¡Un muackiles!

    ResponderEliminar
    Respuestas
    1. ¡De nada! Estará encantada de ver esas monuras.
      Un beso y gracias por compartir!

      Eliminar
  2. Gracias por compartirlo, lo voy a poner en práctica en mi próximo post de resumen del #BurtonChallenge y te cuento como sale. Besos y bendiciones.

    ResponderEliminar
  3. Gracias mil por este trabajo Minerva, lo he usado para actualizar una página donde comparto los PDF de una madre panameña cuya hija fue víctima de envenenamiento siendo apenas una bebé, por negligencia en el Seguro Social. Para ella es una manera terapeutica de expresar todo lo que lleva dentro y me complace ser uno de sus portales y con este tutorial tiene un diseño más agradable que sólo poner una lista y ya.

    ResponderEliminar
    Respuestas
    1. Qué bien! La verdad que es un truquillo que se puede aplicar para un montón de finalidades, y si son loables mejor que mejor.
      Muchas gracias por pasarte por aquí!

      Eliminar
  4. Hola, mi comentario no está del todo relacionado con este post, la pregunta es si sabes decirme como poner la línea imaginaria que tú misma tienes bajo la cabecera y que ocupa el ancho total del blog, además de esto si sabes como bajar una imagen que he puesto como gadged html, no el propio de blogger que te permite incluirla un poco hacia abajo. Un saludo y gracias por tu tiempo.

    ResponderEliminar
    Respuestas
    1. Hola Ike, no sé si he entendido muy bien tus preguntas, pero intentaré reponderlas, aunque el que lo puedas aplicar a tus blogs dependerá sobretodo de los conocimientos HTML/CSS que tengas. Sobre la primera tienes diferentes métodos, pero todos comienzan por investigar como construye tu plantilla los diferentes elementos del blog. En mi caso se trata de una imagen que se repite como background en uno de los contenedores de mi cabecera. Hay que preparar la imagen e introducirla como CSS en la plantilla mediante la propiedad background-image. En la segunda pregunta creo que te refieres a cómo dejar más espacio en una gadget de imagen concreto en el sidebar. En este caso puedes aplicar un método que es bastante independiente de la plantilla. Blogger encierra cada gadget en un elemento div al que nombra mediante un identificador. Busca ese nombre mediante el inspector de elementos de tu navegador para poder operar mediante CSS sobre él. Las separaciones puedes controlarlas mediante la propiedad margin-top (margen superior)o margin-bottom (margen inferior). Puedes usar valores negativos.
      Espero haber contestado bien a tus preguntas y gracias por pasarte por mi blog, un saludo!!

      Eliminar
    2. Gracias por contestar, he resuelto en 2 minutos lo que no conseguí con decenas de tutos, me refiero a desplazar la imagen html.

      Lo de la línea imaginaria que como comentas en el caso de este blog es realmente una imagen no sabría hacerlo... incluir el css necesario... si puedes pasarte por mi blog de pruebas y darme la idea http://pruebasike.blogspot.com.es

      Por otro lado le he incluido un menú rwd, cierto que no el que propones en este blog, en su momento lo proble y no conseguí implementarlo, ya he visto que desde entonces has actualizado el mismo. El problema que tengo con el incluido es que el menú hamburguesa hereda un color verde que no consigo cambiarle, lo quisiera en blanco, además cuando lo expandes en móvil este no aparece ocupando el cuerpo entero del mismo, se desplaza ligeramente a la derecha, me refiero al submenú cuando presionas el menú hamburguesa y queda además con una separación de la barra superior que no consigo salvar con ningún código css

      Desconozco si tantas preguntas son procedentes, de no serlo no dudes en decírmelo.

      Gracias por tú tiempo. Un saludo.

      Eliminar
    3. Hola, el color verde se debe seguramente a que hereda el color de la etiqueta a. Sobre el desplazamiento del menú debería revisar todo el código original. Sobre la línea imaginaria...no creo que a nivel de diseño la necesites!
      Un saludo

      Eliminar
    4. Gracias Minerva, solucioné lo del menú, ensancharlo, no así localizar de donde hereda el color. La línea la puse, pero no conseguí que en el móvil y PC quedarán igual de altura, imagino que por las medias @... en cualquier caso gracias, y estaré atento a tú web para extraer ideas. Un saludo

      Eliminar
    5. Gracias Minerva, solucioné lo del menú, ensancharlo, no así localizar de donde hereda el color. La línea la puse, pero no conseguí que en el móvil y PC quedarán igual de altura, imagino que por las medias @... en cualquier caso gracias, y estaré atento a tú web para extraer ideas. Un saludo

      Eliminar
  5. Hola Minerva, cuando dices "Copia el siguiente código y pégalo justo antes de "head" ¿Quiere decir:

    "head"
    "AQUÍ CÓDIGO"

    O

    "AQUÍ CÓDIGO"
    "head"

    La verdad, me pierdo mucho con si es comenzando desde arriba de la plantilla o bien comenzando desde abajo. Un saludo y gracias.

    ResponderEliminar
    Respuestas
    1. Hola, el segundo ejemplo es el válido. El código se lee según la escritura occidental: de arriba a abajo y de izquierda a derecha;) por tanto encima de /head

      Eliminar
    2. Gracias Minerva, una gran ayuda.

      Otra duda que no soy capaz de resolver:
      Compruebo que tú BLOG tiene el texto y las imágenes con el mismo ancho, independientemente de que la justifiques, en mi plantilla simple no he conseguido un efecto igual, en mi caso las imágenes son ligeramente menores que el texto de los post, independientemente de3l tamaño que suba, ahora las incluyo de 1000px y de que luego en html les ponga "s000" la duda es ¿Cómo podría cambiar el margen de los textos en los post?

      Probe con:
      .post-body {
      margin:0 0 .75em;
      line-height:1.6em;
      }
      (Modificando el segundo valor de 0 a .5em sin que suceda nada, tampoco incluyendole algún pading)
      También probé:
      .post div {
      margin: 0 .5em .75em;
      }
      (Añadiendolo a la plantilla, en este caso si consigo reducir algo los margenes, pero también el superior se desplaza abajo)

      ¿Alguna idea?

      Eliminar
    3. Vaya, curioso. La solución del problema la apunto de manera muy velada en este post ;P El problema de los márgenes de las imágenes viene porque Blogger añade por defecto a las imágens un margen en un valor relativo a la tipografía escogida. Esto va genial cuando la imagen está flotando en un lado o otro del texto pero no cuando se desea que ocupe todo el ancho. Lo más normal es que desborde hacia un lado si la imagen es del mismo ancho que el post. Para evitar que lo añada sube las imágenes en modo html como comento en el post...o borra el margen añadido. Espero haberte ayudado, creo que es más sencillo esto que variar los márgenes del texto.

      Eliminar
    4. Gracias Minerva, e cierto, casualmente lo indicas es este post, de hecho lo había leído pero no asocie una cosa con otra... no obstante tambien me gustaria poder variar los márgenes del texto, si bien no encuentro cuales son las opciones...

      Eliminar
    5. Hola, no sé muy bien en que sentido deseas variar los márgenes del texto. A lo mejor será más fácil variar el ancho de la columna central. En la plantilla simple puedes hacerlo utilizando la propiedad margin o padding del elemento: .main-inner .column-center-inner { margin: 0 15px;}. Espero haber resuelto el problema!

      Eliminar
    6. Gracias Minerva, todo bien con tú ayuda... un saludo!!!

      Eliminar
  6. Yo le saco provecho cada vez más a tu código Minerva, aunque te comentó esto que he notado hoy: cuando intento meter imágenes desde Vista HTML no aparece nada. Ya hasta cambié de plantilla a las de Blogger y aún así no logré hacerlo... Te ha pasado últimamente? Porque la última vez que lo hice (cuando salió tu tutorial) no hubo problema alguno...

    ResponderEliminar
  7. Hola minerva! Estoy intentando hacer las tablas responsive, pero por alguna razón no me aparecen como en la foto, si no que se me colocan una debajo de la otra :( No se que estoy haciendo mal...

    ResponderEliminar
  8. Hola minerva! Estoy intentando hacer las tablas responsive, pero por alguna razón no me aparecen como en la foto, si no que se me colocan una debajo de la otra :( No se que estoy haciendo mal...

    ResponderEliminar
  9. Hola Minerva!!
    Genial, hace tiempo que buscaba algo así y como muy bien dices no lo encontraba en ningún blog. Lo he instalado en mi blog de pruebas y sale todo a la perfección, así que es un tutorial que me viene genial :D
    Muchas gracias por él!!!
    Besos :33

    ResponderEliminar
  10. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  11. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  12. Hola Minerva, entendí todo y me salio bien. Ahora mi única duda seria si es posible cambiar el máximo de columnas a 4 ps segun veo esta configurado para 3, intente cambiarlo por mi cuenta pero esta medio difícil. Un saludo :)

    ResponderEliminar
  13. Lo logre ! :D luego de estudiar bien el codigo consegui sacar 4 y completamente responsive, gracias Minerva. Buen día.

    ResponderEliminar
  14. Muchas gracias por este tutorial y por el codigo!! Acabo de usarlo y aunque al principio me dio un poco de dolores de cabeza (parecia que no me daba resultados, pero era que no se veia en la parte de escribir, sino, solo en la vista previa) me ha encantado el resultado.

    Un abrazote!!!

    Y muchas gracias otra vez

    ResponderEliminar
    Respuestas
    1. ¡Qué bien! A lo mejor sí que es verdad que no maticé ese aspecto, lo actualizaré. Gracias por comentarlo!

      Eliminar
  15. Hola Minerva, yo sabia que aquí podría encontrar la forma de resolver esta inquietud que tenía para hacer el menú de recetas de mi blog, así me quedará mas bonito y organizado. He empezado a maquetarlo y espero tenerlo listo para el fin de semana.
    Muchas gracias!!

    ResponderEliminar
  16. ¡Hola! Gracias por compartir estos códigos, esto muy contentan pues era lo que justamente buscaba. Pero tengo un problema.
    Soy nueva en este asunto de personalizar la página web y cuando quería ingresar aplicar tu código junto con las imágenes, me quede en cero. Estuve investigando como agregar la imagen por medio de html, pero nada me resultó bien.
    Me gustaría que me iluminaras con esto último, por favor...

    ResponderEliminar
  17. Hola, Minerva,
    Y si sólo se quiere usar en una página, ¿cuáles serían los pasos para no tenerlo que poner en html/css de todo el blog?
    Muchas gracias,
    Saludos!

    ResponderEliminar
  18. Este es uno de mis articulos favoritos del mundo mundial!! Siempre regreso y regreso a el. Muchas gracias minerva!!

    ResponderEliminar
    Respuestas
    1. De nada! Para eso está,para ayudarnos en nuestra inmensa tarea de llevar un blog!

      Eliminar
  19. Hola Minerva, he conseguido hacer las columnas pero no logro poner la imagen. Puedes indicarme cómo hacerlo. Gracias.

    Un saludo

    ResponderEliminar
    Respuestas
    1. Hola, pásame el link a la página y veo a ver que está pasando.

      Eliminar
  20. Hola Minerva, mil gracias por tu post, está muy bien explicado, Dios te dé mucha vida para que disfrutes lo que haces.

    ResponderEliminar
  21. En el movil las imágenes se ven intercaladas, las de la derecha aparecen primero y las de la izquierda después: http://www.khuskatravel.com/2018/07/peru-tour-ano-nuevo.html

    ResponderEliminar
    Respuestas
    1. Hola, veo que ya arreglaste el problema con otro código. Tengo en mente sacar una actualización de este código más sencilla y fiable. Un saludo

      Eliminar
  22. ¡Hola! ¿Es lo que hiciste con tu portafolio? Me pregunto si es así... Quiero hacer uno también. ¡Se ve maravilloso!

    ResponderEliminar
    Respuestas
    1. Hola, ojalá hubiera sido así de sencillo. El portfolio tiene mucho más código.

      Eliminar
  23. hola, ¿se puede modificar para tener 4 o mas columnas por fila? GRACIAS

    ResponderEliminar
    Respuestas
    1. Por supuesto. Deseo actualizar este código para que funciona para cualquier número de columnas. Espero no tardar mucho en publicarlo. Un saludo.

      Eliminar
  24. Hola Minerva!
    Me encanta tu blog, y llegue a el gracias a Monica Lemos! Añadi las columnas al blog, pero me salieron en vertical en vez de horizontal. Como podria cambiarlo?

    ResponderEliminar
    Respuestas
    1. Hola, necesitaría tener un link a esa página para inspeccionar qué está sucediendo.

      Eliminar
  25. Hola! gracias! me funciono al ponerle en el código de style un ancho del 40%, si no cambiaba esto no me hacia el responsive y ademas en la versión de ordenador me ponía uno debajo del otro y no uno al lado del otro

    gracias y saludos!!

    ResponderEliminar
  26. una consulta, yo quiero que ciertas entradas o paginas tengan esas columnas, si yo coloco eso, sera para todos los post?

    ResponderEliminar
    Respuestas
    1. Creo que la pregunta es un poco ambigua, así que responderé de manera amplia. Si copias el código CSS dentro del "html" de tu plantilla podrás usar esas clases en cualquier entrada o página, pero para que se muestren debes añadir el código html tal y como explico. Si solo deseas que se muestren en una o dos páginas, tal vez será mejor que pegues el código CSS dentro de la misma entrada/página en editar html, y por supuesto encerrado dentro de la etiqueta style.

      Eliminar
  27. Hola! Una pregunta, hay alguna forma que pueda hacer que cuando coloque en una entrada o página dos columnas, sean de diferentes anchos? Por ejemplo la de la izquierda 65% y la derecha 30%??

    ResponderEliminar
  28. ¡Hola, Minerva!

    Tu tutorial de menú responsive y este son increíbles. Los apliqué en mi blog y te di créditos en la sección correspondiente. Muchísimas gracias.

    Un beso.

    ResponderEliminar
  29. ¡Hola, Minerva!

    Tengo inconvenientes con mi blog al agregar columnas. Tengo demasiados espacios en blanco, por favro puedes revisarlo: https://elblogdedemili.blogspot.com. Gracias

    ResponderEliminar
  30. Super ayuda esta... por lo menos para mi que ando mas perdida que el hijo de Limberg...... Super agradecida y que Dios te lo pague con Bendiciones de Salud y alegrias!!! yo de conseguir esta ayuda ya Dios me pago jajajajjajajaja Graaaaciassss!!!!

    ResponderEliminar