ener 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.
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.
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:
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:
<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:
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.
<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.
Wow bro...Excelente truco!!!
ResponderEliminarLa 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!!!!!!
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í.
ResponderEliminarLa verdad es que a los blogs de noticias este truco les viene de maravilla.
Gracias por pasar bro.
Un abrazo.
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
EliminarEs necesario que siempre que algo no te salga dejes la dirección de tu blog, sólo así puedo ver qué sucede ;)
Eliminarpotro porque la letra capital me desplaza la columna a la derecha, que debo hacer, gracias
ResponderEliminarPosiblemente necesites ajustar el espacio entre esos elementos. Modifica donde dice padding: 10px y cámbialo a 5px para ver si se arregla.
ResponderEliminarSaludos.
Hola, si después de escribir a dos columnas quieres seguir con la escritura normal que debo hacer, gracias.
ResponderEliminar<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>>
Eliminar<div style="clear: both"></div>
Sólo sigues escribiendo tu entrada normalmente, fuera del código de las columnas.
ResponderEliminarSaludos.
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.
ResponderEliminarMuchas gracias por tus comentarios, son muy alentadores para seguir compartiendo con ustedes.
ResponderEliminarSaludos!
Espectacular compadre..
ResponderEliminarLo 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 ;)
Seguro que irás mejorando mucho más :)
ResponderEliminarPotro 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
ResponderEliminarQuizá te convenga más usar una tabla en lugar de este código; el que podrías usar en su lugar sería este:
ResponderEliminar<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?
Ups, omite esta primera parte:
ResponderEliminar<div style="width:450px;">
Esa no va.
jaja no! Potro nada no me contstaste :P, gracias por este dato!
ResponderEliminarYa 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.
ResponderEliminarTe 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.
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:
ResponderEliminarDiscografica: 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.
Se me olvidaba, se le puede poner modificar el tamaño al texto?
ResponderEliminarAmigo Potro ya lo consegui !! justo lo que queria, muchas gracias amigo por tu ayuda, saludos.
ResponderEliminarQué bueno que lo has resuelto :)
ResponderEliminarHola Potro y gracias por compartir tus saberes.
ResponderEliminarEstaba 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.
Tal vez la imagen no es lo suficiente ancha. ¿Me puedes mostrar la entrada donde lo has hecho?
EliminarHola. Gracias por la info, pero y si lo quisiera en 3 columnas qué debo hacer? Gracias, excelente blog.
ResponderEliminarHola Christian, usa este código:
Eliminar<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>
Eres fantástico, Potro.
ResponderEliminarNadie como tú para hacer lo complicado, sencillísimo
Desde España... ¡gracias!!