Cómo escribir en dos o mas columnas en una entrada

Una de los inconvenientes que tenemos nosotros los usuarios de Blogger, es que el editor de entradas es muy limitado en cuanto a funcionalidades se refiere, por ejemplo, no contamos con la posibilidad de dividir texto en columnas de forma nativa, por lo que nos vemos en la necesidad de hacer uso de códigos externos para cumplir con ese cometido. ¿Cómo se hace? Es muy fácil y te lo explico ;-)

A continuación veremos dos maneras de hacerlo, toma en cuenta que si vas a un publicar un texto extenso, escribir en columnas es una muy buena opción para que el post no luzca demasiado largo y aburra al lector con simplemente verlo.

columnas entrada blogger

Texto en 2 columnas - Método I

Entra en modo HTML en la entrada y pega allí el siguiente código:
<div style="float: left; width: 45%;">
<div style="text-align: justify;">                        
TEXTO A LA IZQUIERDA                                          
</div>
</div>
<div style="float: right; width: 45%;">
<div style="text-align: justify;">
TEXTO A LA DERECHA
</div>
Donde está resaltado deberás escribir el texto para que se alinee a la izquierda y derecha respectivamente. Se verá como en el siguiente ejemplo:

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.
El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino. Tenía en su casa una ama que pasaba de los cuarenta, y una sobrina que no llegaba a los veinte, y un mozo de campo y plaza, que así ensillaba el rocín como tomaba la podadera.










Texto en 2 columnas - Método II

Haremos uso de tablas para que se vea más estilizado con bordes, como siempre entra en modo HTML en la entrada y pega allí el siguiente código:
<table width="100%" border="0" cellspacing="10" cellpadding="10">
  <tr>
    <td><div align="justify">PRIMERA COLUMNA</div></td>
    <td><div align="justify">SEGUNDA COLUMNA</div></td>
  </tr>
</table>
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.
El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino. Tenía en su casa una ama que pasaba de los cuarenta, y una sobrina que no llegaba a los veinte, y un mozo de campo y plaza, que así ensillaba el rocín como tomaba la podadera.

Texto en 3 columnas o más

Si lo que necesitas es colocar varias columnas de texto, usando el anterior código de las tablas podrás hacerlo fácilmente siguiendo el siguiente ejemplo:
<table width="100%" border="0" cellspacing="10" cellpadding="10">
  <tr>
    <td><div align="justify">PRIMERA COLUMNA</div></td>
    <td><div align="justify">SEGUNDA COLUMNA</div></td>
    <td><div align="justify">TERCERA COLUMNA</div></td>
  </tr>
</table>
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.
El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino. Tenía en su casa una ama que pasaba de los cuarenta, y una sobrina que no llegaba a los veinte, y un mozo de campo y plaza, que así ensillaba el rocín como tomaba la podadera.
Frisaba la edad de nuestro hidalgo con los cincuenta años; era de complexión recia, seco de carnes, enjuto de rostro, gran madrugador y amigo de la caza. Quieren decir que tenía el sobrenombre de Quijada, o Quesada, que en esto hay alguna diferencia en los autores que deste caso escriben; aunque, por conjeturas verosímiles, se deja entender que se llamaba Quejana.
Agrega la línea <td><div align="justify">AQUI EL TEXTO</div></td> para la cantidad de columnas que quieras y ésta deberá estar antes del cierre </tr>.

¿Es muy fácil cierto? Si te resultó útil no dudes en regalarme un +1, me gusta, compartir o tuit =)

14 Comentarios en "Cómo escribir en dos o mas columnas en una entrada"

  1. Buenas estoy intentando escribir un texto en dos columnas con el método 1, poner una imagen y después continuar con más texto en dos columnas, otra imagen y así..., pero se me descoloca todo. ¿Me podrías ayudar?

    ResponderBorrar
    Respuestas
    1. ¡Buenas Cristina! podrías hacerlo todo desde la pestaña HTML, caso contrario usar este código y modificarlo según lo que precises, colocando tantos saltos de líneas <br> que creas conveniente:

      <center><img style="margin: 0px;" src="URLDEIMAGEN" title="TITULO DE LA IMAGEN" alt="ALT DE LA IMAGEN” border="0" /></center><br>
      <div style="float: left; width: 45%;">
      <div style="text-align: justify;">
      TEXTO DE LA PRIMERA COLUMNA
      </div>
      </div>
      <div style="float: right; width: 45%;">
      <div style="text-align: justify;">
      TEXTO DE LA SEGUNDA COLUMNA
      </div></div><br><br>
      <center><img style="margin: 0px;" src="URLDEIMAGEN" title="TITULO DE LA IMAGEN" alt="ALT DE LA IMAGEN” border="0" /></center><br>
      <div style="float: left; width: 45%;">
      <div style="text-align: justify;">
      TEXTO DE LA PRIMERA COLUMNA
      </div>
      </div>
      <div style="float: right; width: 45%;">
      <div style="text-align: justify;">
      TEXTO DE LA SEGUNDA COLUMNA
      </div></div><br><br>

      Espero haberme explicado bien y que se entienda jeje a veces me complico tratando de ser claro xD


      Saludos =)

      Borrar
    2. Voy a probarlo y te digo que tal porque el código html y yo no nos llevamos muy bien. ¡Gracias!

      Borrar
  2. Hola, disculpa, todo sirve perfectamente pero salen unas lineas de separación color NEGRO y mi fondo de entrada es de otro color, ¿cómo hago para cambiar el color de esas lineas?

    ResponderBorrar
    Respuestas
    1. Hola Alhelí, si lo hiciste con el primer método no tendrían que salir ningunas líneas, más con el segundo método sí porque se hace uso de tablas. Únicamente tienes que agregar lo siguiente que está en negritas:

      <table width="100%" border="0" bordercolor="#FFFFFF" cellspacing="10" cellpadding="10">

      Y modificar esos valores (#FFFFFF) que corresponden a colores en hexadecimal, para elegir un color puedes utilizar esta herramienta: http://www.vicioblogger.com/p/selector-de-colores.html

      ¡Saludos!

      Borrar
  3. Que tal amigo Marcelo, buscando info parecida a esta me encontré con tu blog, el cual lo califico de muy interesante y detallado. Me gustó la forma de explicarlo y te doy mis más sinceras felicitaciones por tu tutorial. Sin embargo, estaba buscando colocar una imagen del lado izquierdo o derecho y código de un formulario del otro lado. Me podrías ayudar? Saludos

    ResponderBorrar
    Respuestas
    1. Hola Juan C. Reyes, muchísimas gracias por tus palabras y apoyo a este humilde servidor :) Respecto a tu duda, ¿esto es lo que necesitas? http://i.imgur.com/QRYd3Z5.png

      De ser así, te dejo el código en PasteBin: http://pastebin.com/gjDKmea2
      sólo cambia la URL de la imagen, sus atributos ALT y TITLE, width, height y el formulario <FORM por el que deseas colocar.

      Saludos, espero haberte ayudado =)

      Borrar
  4. Hola, quiero poner una imagen X grande antes de las dos columnas, sería; Imagen XL seguida por texto y después una imagen a la izq tamaño medio para que las dos columnas entren en la pagina.
    gracias :3

    ResponderBorrar
    Respuestas
    1. Hola Vanila Project, perdona si no entendí :) ¿Este es el resultado que necesitas?: http://goo.gl/yo4eiw

      Es una entrada de ejemplo, me avisas.
      ¡Saludos!

      Borrar
  5. otra pregunta :3, después de haber escrito en dos columnas cómo puedo escribir en una sola de nuevo? gracias :3

    ResponderBorrar
    Respuestas
    1. ¡Hola Vanila! Ya que el código para insertar las columnas se coloca en 'Modo HTML', para volver a escribir simplemente vuelves al modo de la pestaña 'Redactar' y escribes como siempre =)

      Borrar
  6. Hola, trato de hacer los pasos indicados, lamentablemente a la hora de actualizar se me descomoda todo el blog?¡, eso tiene algo que ver con el porcentaje ahí?

    ResponderBorrar
    Respuestas
    1. Hola Sofia, disculpa la demora en responder. Dependiendo del método que utilices, prueba cambiando los valores que van dentro de las etiquetas del <div style o del <table, así se ajustarán en tus entradas.

      ¡Saludos!

      Borrar
  7. ¡Hola, Marcelo! Mil gracias, el método 2 me va muy bien. Quería preguntarte, ¿cómo podría hacer para que el espacio entre las dos columnas fuera mayor? ¡Gracias!

    ResponderBorrar

¿Comentarios? ¿Dudas? Estaré encantado de responderte (a veces demoro) ツ