Crear 2 columnas de texto con letra capital

12 de junio de 2009 27 comentarios ,
letra capitalener dos columnas de texto dentro de una entrada da cierta formalidad al contenido del blog.
Quizá es porque estamos acostumbrados a leer los periódicos y los libros a dos columnas y regularmente estos tienden a ser informativos y veraces. Pero no sólo eso, la letra capital le da más estilo al contenido y más aun cuando la letra capital tiene ornamentas como los libros antiguos.
Vamos entonces a ver cómo crear dos columnas dentro de una entrada sin necesidad de tocar la plantilla; lo que significa que podrás adaptar las columnas cuando quieras y esto no afectará a tus demás post.
Lo mismo con la letra capital, aunque ya se explicó antes cómo poner la letra capital en Blogger, ahora veremos cómo hacerlo sin editar nada, sólo usando unas imágenes dentro del post. La idea es hacerlo sencillo para no tener que alterar la plantilla.



Para usar la doble columna sólo debes poner el siguiente código dentro del post y escribir tu texto donde se indica:
<div style="padding: 10px; float: left; width: 45%; text-align: justify;">Texto de la columna (lado izquierdo)</div><div style="padding: 10px; float: right; width: 45%; text-align: justify;">Texto de la columna (lado derecho)</div>

Ahora sólo falta la letra capital; esta la puedes poner como se explica en este artículo. O bien puedes usar una imagen como yo lo he hecho. Sólo debes poner después del primer <div style="padding: 10px; float: left; width: 45%; text-align: justify;"> esta línea:
<img style="margin: 0px; float: left;" src="URL de la imagen" alt="letra capital" border="0" />

Sólo cambia la URL de la imagen por la dirección donde esté alojada la imagen de la letra. El código completo sería este:
<div style="padding: 10px; float: left; width: 45%; text-align: justify;"><img style="margin: 0px; float: left;" src="URL de la imagen" alt="letra capital" border="0" />Texto de la columna (lado izquierdo)</div><div style="padding: 10px; float: right; width: 45%; text-align: justify;">Texto de la columna (lado derecho)</div>

Yo he tomado unas fuentes y las he convertido a imagen para que puedas usarlas. Sólo descarga la carpeta con los archivos y súbelos a un servidor. Puedes dercargárlas aquí.
Y así de simple puedes darle más estilo a tus entradas del blog.


27 comentarios en:

" Crear 2 columnas de texto con letra capital "

  1. Wow bro...Excelente truco!!!

    La verdad que le veo mucha utilidad, es especial para los blog que diariamente nos informan con noticias.

    Y como si fuera poco te has tomado el trabajo de convertir las fuentes en imágenes!

    Sos un maestro!!!!!!

    ResponderEliminar
  2. No iba a hacerlo pero no encontré ni una letra capital en imagen en la red, y para no hacerles la vida complicada mejor las convertí.
    La verdad es que a los blogs de noticias este truco les viene de maravilla.
    Gracias por pasar bro.
    Un abrazo.

    ResponderEliminar
    Respuestas
    1. joliiiin a mi no me sale nada y nose que hago mal porque simplemente copio y pego y donde hay que poner la url pongo una y donde hay que escribir escribo pero no hay manera

      Eliminar
    2. Es necesario que siempre que algo no te salga dejes la dirección de tu blog, sólo así puedo ver qué sucede ;)

      Eliminar
  3. potro porque la letra capital me desplaza la columna a la derecha, que debo hacer, gracias

    ResponderEliminar
  4. Posiblemente necesites ajustar el espacio entre esos elementos. Modifica donde dice padding: 10px y cámbialo a 5px para ver si se arregla.

    Saludos.

    ResponderEliminar
  5. Hola, si después de escribir a dos columnas quieres seguir con la escritura normal que debo hacer, gracias.

    ResponderEliminar
    Respuestas
    1. <div style="padding: 10px; float: left; width: 45%; text-align: justify;">Texto de la columna (lado izquierdo)</div><div style="padding: 10px; float: right; width: 45%; text-align: justify;">Texto de la columna (lado derecho)</div>>
      <div style="clear: both"></div>

      Eliminar
  6. Sólo sigues escribiendo tu entrada normalmente, fuera del código de las columnas.
    Saludos.

    ResponderEliminar
  7. Definitivamente SOS EL MEJOR EN ESTO, he probado casi todo, te hablo de más del 90% de tus consejos y todos me han funcionado.

    ResponderEliminar
  8. Muchas gracias por tus comentarios, son muy alentadores para seguir compartiendo con ustedes.

    Saludos!

    ResponderEliminar
  9. Espectacular compadre..
    Lo seguí y funcionó al 100%

    Pd: No se nada pero nada de nada de HTML , y creo que voi bien , gracias a guías como las tuyas, he aprendido harto.

    Muchas gracias

    Saluos ;)

    ResponderEliminar
  10. Seguro que irás mejorando mucho más :)

    ResponderEliminar
  11. Potro tengo un problema con esto, deseo escribir depues de una parrafo de dos columnas! pero escribo normal y me sale centrado y se deforma todo me sake tabn en dos partes! que hago? gracias

    ResponderEliminar
  12. Quizá te convenga más usar una tabla en lugar de este código; el que podrías usar en su lugar sería este:

    <div style="width:450px;"><table><tbody>
    <tr><td style="padding-right:15px; margin-top:0px; padding-left:15px; padding-bottom:15px; width:45%;"><p style="text-align:justify;">Aquí va el contenido del lado izquierdo.</p>
    <td style="padding-right:15px; margin-top:0px; padding-left:15px; padding-bottom:15px; width:45%;"><p style="text-align:justify">Aquí va el contenido del lado derecho.</p></td></tr></tbody></table>
    Debajo escribe el resto del contenido.

    Ahí en negrita se indica en dónde va el contenido.

    P.D. Ya no recuerdo si te contesté la pregunta de cómo usar el inspector de elementos en Google Chrome ¿lo hice?

    ResponderEliminar
  13. Ups, omite esta primera parte:
    <div style="width:450px;">
    Esa no va.

    ResponderEliminar
  14. jaja no! Potro nada no me contstaste :P, gracias por este dato!

    ResponderEliminar
  15. Ya decía yo, y es que desde antier estoy tratando de recordar en qué entrada estaba esa pregunta, pero por más que quise encontrarla en los mails me fue imposible.
    Te digo rápido, si tienes Google Chrome sólo haces click con el botón derecho sobre el elemento de la página que quieres inspeccionar y seleccionas Inspeccionar elemento, se abrirá una ventanita con los datos del HTML del elemento que seleccionaste.
    Aquí la cuestión que me sucedió con tu plantilla es que otra opción de esa ventanita es la de analizar los scripts, y ahí fue cuando en modo automático empezó a hacer el análisis y detectó los errores.

    Saludos.

    ResponderEliminar
  16. Hola Potro, he probado con el codigo de abajo, el de la imagen, pero como podria hacer para poner el texto y el track list tal y como lo tengo en el blog, es decir, primero escribo una linea y debajo otra, etc.. de esta manero me refiero:

    Discografica: Island Records
    Catalogo: 12 IS 220
    Formato: Vinyl, 12", Maxi-Single, 45 RPM
    Pais: Yugoslavia
    Año: 1985
    Genero: Rock
    Estilo: Pop Rock

    Tambien me gustaria poner color a las letras, se podria hacer modificando el codigo?

    Gracias de antemano, saludos.

    ResponderEliminar
  17. Se me olvidaba, se le puede poner modificar el tamaño al texto?

    ResponderEliminar
  18. Amigo Potro ya lo consegui !! justo lo que queria, muchas gracias amigo por tu ayuda, saludos.

    ResponderEliminar
  19. Hola Potro y gracias por compartir tus saberes.
    Estaba intentando crear una entrada con dos columnas para poner una en castellano y la otra en inglés. El problema es que debajo quería que apareciera una imagen ocupando todo el espacio (las 2 columnas) y me la pone debajo de la columna de la derecha. ¿Se puede hacer? Gracias por tu ayuda.

    ResponderEliminar
    Respuestas
    1. Tal vez la imagen no es lo suficiente ancha. ¿Me puedes mostrar la entrada donde lo has hecho?

      Eliminar
  20. Hola. Gracias por la info, pero y si lo quisiera en 3 columnas qué debo hacer? Gracias, excelente blog.

    ResponderEliminar
    Respuestas
    1. Hola Christian, usa este código:

      <div style="padding: 10px; float: left; width: 31%; text-align: justify;">Texto de la columna (lado izquierdo)</div><div style="padding: 10px; float: left; width: 31%; text-align: justify;">Texto de la columna (lado medio)</div><div style="padding: 10px; float: right; width: 31%; text-align: justify;">Texto de la columna (lado derecho)</div>

      Eliminar
  21. Eres fantástico, Potro.
    Nadie como tú para hacer lo complicado, sencillísimo
    Desde España... ¡gracias!!

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger