Cómo insertar COLUMNAS RESPONSIVE en BLOGGER

 

Las columnas en Blogger son esenciales para los redactores de contenido, permiten ordenar y hacer más atractiva la lectura para el usuario, además se suelen utilizar para agregar texto al lado de una imagen. 

Para generar este efecto en la plataforma de Blogger, la mayoría utilizaba un tabla de dos o tres columnas para ordenar su contenido, pero esto falló cuando llegaron las vistas en dispositivos más pequeños que un ordenador, ya que la tablas se ajustaban al ancho, esto significaba que su contenido se deformaba, viéndose muy pequeño, o estirado.

Por esto no recomiendo que utilices una tabla para esto, sino que el siguiente código para escribir en hasta 3 columnas responsive para Blogger. Te dejo una demo antes del tutorial: 

See the Pen Columnas para blogger by DiegoPresol (@DiegoPresol) on CodePen.

Agregar columnas Responsive en BLOGGER

1. Agregar el CSS

En la Edición HTML de tu plantilla busca ]]></b:skin> y pega antes de esa línea el siguiente código:

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

Guarda los cambios.

Insertando columnas en las entradas

Para llamar a las columnas se utiliza HTML, este código se agrega cuando estas en la 'Vista HTML' de una entrada. 

Si quieres insertar 2 columnas agrega el siguiente código: 

<div class="fila">

  <div class="col-2">Texto columna 1</div>

  <div class="col-2">Texto columna 2</div>

</div>

Para insertar 3 columnas:

<div class="fila">

  <div class="col-3">Texto columna 1</div>

  <div class="col-3">Texto columna 2</div>
  
  <div class="col-3">Texto columna 3</div>

</div>

Estas columnas son responsive, esto quiere decir que se adaptan al dispositivo en el que son visualizadas, si las ves desde un pc, verás una al lado de otra, pero si las observas desde una dispositivo móvil, verás que la primera columna queda sobre la posterior. 

Esto permite que el contenido sea visualizado correctamente por el lector. 

Espero el tutorial les sea de ayuda, y como siempre si tienen dudas dejen un comentario.