Crea columnas responsive en 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.

Ver demo columnas responsives

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 ;)

SUSCRÍBETE A MI NEWSLETTER Y RECIBE GRATIS:
guía para escoger y usar tipografías
catálogo de las mejores familias tipográficas de Google Font