22 de mayo de 2016

Tutoriales: Escribir un post con dos o más columnas

¿Para que me sirven las columnas?
Para que las entradas no luzcan demasiadas 
extensas y no aburran al lector...
El editor de entrada tiene muchas cosas interesantes que podemos utilizar para configurar o personalizar nuestras entradas/post pero lo que si no posee (Aún) es una herramienta que nos permita dividir nuestro texto en columnas, pero si estas interesada@ en que tus entradas tengan esta distinción solo es cuestión de aplicar un sencillo código...

Aplicar:

Ve al modo HTML en el editor entrada y pega allí el siguiente código:



Dos columnas:

<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>
  • Resultado/Ejemplo:
Érase una vez un hombre bueno que tuvo la desgracia de quedar viudo al poco tiempo de haberse casado. Años después conoció a una mujer muy mala y arrogante, pero que pese a eso, logró enamorarle.
Érase una vez un hombre bueno que tuvo la desgracia de quedar viudo al poco tiempo de haberse casado. Años después conoció a una mujer muy mala y arrogante, pero que pese a eso, logró enamorarle.








Con bordes:

<table width="100%" border="1" cellspacing="10" cellpadding="10">
<tr>
<td><div align="justify">PRIMERA COLUMNA</div></td>
<td><div align="justify">SEGUNDA COLUMNA</div></td>
</tr>
</table>
  • Resultado/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.

Tres columnas o más:

<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>
   Érase una vez un hombre bueno que tuvo la desgracia de quedar viudo al poco tiempo de haberse casado. Años después conoció a una mujer muy mala y arrogante, pero que pese a eso, logró enamorarle. 
Érase una vez un hombre bueno que tuvo la desgracia de quedar viudo al poco tiempo de haberse casado. Años después conoció a una mujer muy mala y arrogante, pero que pese a eso, logró enamorarle.   
Érase una vez un hombre bueno que tuvo la desgracia de quedar viudo al poco tiempo de haberse casado. Años después conoció a una mujer muy mala y arrogante, pero que pese a eso, logró enamorarle.
  • Si quieres tenga bordes cambia: border="0" por border="1"
  • Agrega la línea <td><div align="justify">AQUI EL TEXTO</div></td> para agregar otra columna antes del cierre </tr>.
  • Si quieres que los bordes tenga un color diferente solo agrega: bordercolor="nombre del color" DESPUÉS de <table 
*Nombres de los colores*

Una vez terminada tu entrada guarda todo y listo...

5 comentarios:

  1. Que hermoso blog, cuanto conocimiento sobre Html. En mi caso uso wordpress no se si se aplicara, pero bueno desde ya te sigo y me encanta lo que haces. Besote

    ResponderEliminar
    Respuestas
    1. No utilizo Wordpress a si que no se si los esto códigos funcionan...
      De todas maneras creo que hay varios blog con tutos para Wordpress.. así que puedes visitarlos!! xDD

      Eliminar
  2. ¡ME ENCANTÓ! Creo que lo usaré en mi próxima entrada, muchas gracias guapísima.

    Besitos dulces.

    ResponderEliminar
  3. Hola!!
    Ainsss, siempre buscaba algo así y no lo encontraba, así que me lo dejo todo guardadito :D
    Gracias por el tuto!!
    Besos <33

    ResponderEliminar