Cómo poner dos columnas de texto en tus posts

14.12.14

¿Has pensado nunca en poner dos columnas de texto a tus posts?

¿O una columna de texto y una foto al lado, sin volverte loco?

La verdad es que si lo intentas hacer arrastrando las fotos de un lado para otro, seguramente has terminado estirándote de los pelos más de una vez.

Te enseño cómo hacerlo en un momento y sin ningún tipo de complicación.


Dos columnas HTML


Te voy a contar cómo puedes poner dos columnas como las siguientes.

Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer erumque eu per. In usu latine equidem.
Quo no falli viris intellegam, ut fugit veritus placerat per. Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam 


O texto y una imagen


Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer erumque eu per. In usu latine equidem. Quo no falli viris intellegam, ut fugit veritus placerat per. Ius id vidit volumus mandamus, vide veritus democritum, ei eos debet libris consulatus.




















Para hacer dos columnas fijas en un post, tienes que escribir el trozo de las columnas en formato HTML.

Cuando quieras poner dos columnas, sigue los siguientes pasos:


  1. Edita el post en el formato HTML.
  2. Copia el código siguiente

     
      <div style="float: left; width: 45%"> 
        TU Texto de la columna izquerda
      </div>

      <div style="float: right; width: 45%">
        TU texto de la columna derecha
      </div>

      <div style="clear: both"></div>

  3. Sustituye el texto en negrita del código anterior por lo que tu quieras poner.  Ten en cuenta que a parte de texto también puedes poner una foto.

    Para hacer lo de la foto te recomiendo que la subas al post en formato "Redactar" y que una vez en el HTML copies el código de la foto que has subido antes.

    Así de fácil.

No dejes que el formato de todos tus posts sea el mismo. Innova, prueba, añade columnas, fotos y sé creativo!


Laura

¿Te ha gustado lo que has leído?
Muchas gracias por compartirlo en tus redes sociales!
Tus contactos y yo te lo agradeceremos! :-)

¿Quieres contenido exclusivo para mejorar tu blog?
Suscríbete y recibirás AHORA la guía para dominar Blogger HOY!
Tu blog no pasará inadvertido.
Dejará huella.