Post con estilo "periódico" : El Escaparate de Rosa

Estás en: Inicio » Trucos Texto » Post con estilo "periódico"

Post con estilo "periódico"

El Escaparate 15-4-2007

¿Te gustaría escribir las entradas de tu blog de esta manera tan chula,a dos columnas, que podríamos llamar por ejemplo, "estilo periódico?. A mi me parece una original forma de presentar cualquier texto, sobretodo en los post queda genial, o al menos, original ¿no os parece?.

El texto va dentro de una "tabla" (table) y después lleva los valores añadidos que conforman el estilo de letra, el tamaño y los márgenes. Todos esos valores se pueden modificar en el código a nuestro gusto. Y como veis se pueden incluir las imágenes subidas a Blogger como hacemos normalmente en nuestras entradas.

Os dejo el código para que os divirtáis "jugando" con él.

<table><td style="width:40%;margin-top:0px;padding:15px;"><p style="text-align:justify;">AQUI EL TEXTO DE LA PRIMERA<br />COLUMNA DEL POST</p> <td style="width:40%;margin-top:0px;padding:15px;"><p style="text-align:justify;">AQUI EL TEXTO DE LA SEGUNDA COLUMNA DEL POST</p> </table>

Visto en : Mandarin Desingn

Otra forma de hacer esto mismo mediante divs

<div style="width: 45%; float: left;">Aqui lo que vaya en la columna izquierda</div><div style="width: 45%; float: right;">Aqui lo que vaya en la columna derecha</div>
<div style="clear: both;"></div>

Entradas Relacionadas:

27 comentarios:

Silvia: Hola Rosa, Me ha encantado lo del texto a dos columnas, lo he puesto en mi blog. De todas formas una preguntita, me queda el texto muy bien pero bastante separado del título de la entrada. Sabes como hacer para quitar esos espacios???
Te dejo la dirección del blog por si le quieres echar un vistazo.
http://blogparatorpes.blogspot.com

Un besazo y gracias por tu ayuda.

Silvia; 16/4/07
Anónimo: ¡Hola Silvia! Bienvenida, como habrás observado a mi me pasa igual, supongo que porque va dentro de "table" normalmente se varia el margin-top, pero en el código ya está a cero, osea, que no se puede reducir más...
Trata de jugar un poco con:
width:40%;padding:15px;

el texto no "sube" pero si cambia algo ópticamente.

Me ha gustado tu blog, podrías inscribirlo en la "comunidad de ayuda para tu blog" puedes acceder desde el botón de enlace del Escaparate. ;); 16/4/07
JM Bouthemy: Gracias, Rosa. Todavía no lo he implementado, pero hace tiempo que buscaba un blog como el tuyo, con posts como este. Saludos.; 19/4/07
Kolbus: Hola.

Le sobran todos los tags "br" que se incluyen en el código.

Sí ponéis un border="1" en el tag table, veréis a lo que me refiero.

Un saludo.; 3/6/07
Anónimo: Hola Rosa ¡¡
Como siempre enhorabuena por este maravillo sitio de encuentro y aprendizaje.

Yo lo que busco es algo que haga lo mismo pero en una sola columna. Es decir , que todas las lineas terminen en el mismo lugar. El programa deberia añadir espacios al igual que el Word.

Saludos; 20/9/07
Anónimo: Hola de nuevo¡¡

Pues ya lo he encontrado , solo tenia que poner si " Mostrar el modo de composición para todos sus blogs? y ya esta.

gracias; 20/9/07
editorial: hola rosa ,un gran post sobretodo para un pardillo como yo,tengo un tres periodicos y no me aclaro,me gasto un dineral en dissenyo de algunos y el ultimo lo hago sobre un blog ,y lo voy arrglando poco a poco,gracias de corazon; 26/11/07
Anónimo: Isidro,con paciencia podrás conseguir muchas cosas...
¡Suerte!; 27/11/07
jejo: Rosa .... primero un abrazo por el nuevo año, luego un gracias por haber votado mi logo para Uniblog ( una pena que todo quedara inconcluso pero al menos sirvió para descubrir gente genial que comparte sus conocimientos y sus ideas ) y por último decirte que he aplicado este tutorial en mi último post de Pir@T@ ( barco ) y te estoy agradecido por que el efecto logrado es el que esperaba.

Un saludo grande y un gracias del mismo tamaño !; 6/1/08
Anónimo: Jejo, no has de darme las gracias por nada, y menos aún por el voto, estaba claro que era el tuyo o el de eboch, los demás no cumplían con los requisitos, según mi opinión, claro está.

Ahora mismo paso a ver como te ha quedado.
Un abrazo!; 6/1/08
Anónimo: Jejo, quedó muy bien y la historia del "orejudo"...ja,ja,ja. Pero no tienes activados los comentarios en esa entrada...; 6/1/08
yoseloquetegusta: Hola Rosa. En primer lugar gracias, buscando en esta página estoy consiguiendo dejar mi blog justo como quiero, y eso que pensaba que era imposible, ya he apliado un montón de tus consejos para conseguir un formato de Webcómic.

Ahora estoy teniendo algún problema con los post estilo periódico, puedo poner dos o tres columnas facilmente, lo malo es que quiero que el texto o elementos de las tres columnas queden a la misma altura, independiéntemente del contenido que tenga cada columna. ¿Sabrías hacer esto? Muchas gracias de antemano. Mi email es prpg@alu.ua.es, aunque si puedes responderme con un comentario en mi blog también lo leeré.; 4/7/08
Anónimo: Mandarina, esa entrada lo explica usando tablas, en el editor de entradas de Blogger es complicado adaptarlo.

Pero hay otra forma (usando div) que suele quedar bien y cada columna al mismo nivel:

<div style="width: 45%; float: left;">Aqui lo que vaya en la columna izquierda</div><div style="width: 45%; float: right;">Aqui lo que vaya en la columna derecha</div>
<div style="clear: both;"></div>; 4/7/08
yoseloquetegusta: Hola, muchísimas gracias por la respuesta. Era justo la respuesta que necesitaba,y por mucho que la busqué solo la pude obtener a través de este blog. No obstanteeeeeeee.... soy un poco ambicioso y quiero más jajajaj. En realidad yo quiero hacer tres columnas, así que al ver este nuevo código pensé que sería fácil toqueteándolo un poco. Pero por mucho que lo he intentando no he conseguido nada. ¿Alguna pista?; 9/7/08
Anónimo: Mandarina prueba así:

<div style="width: 25%; float: left;">Aqui lo que vaya en la columna izquierda</div><div style="width: 25%; float: left; padding-left:5px;">Aqui lo que vaya en la columna central</div><div style="width: 25%; float: left; padding-left:5px;">Aqui lo que vaya en la columna derecha</div>
<div style="clear: both;"></div>

En padding-left es donde controlas la separación entre las columnas, yo he puesto 5 pixeles y en width controlas el ancho de cada columna en porcentaje, o sea cadauna ocupael 25% del espacio donde lascoloques, tambien puedes variar ese valor.; 9/7/08
yoseloquetegusta: ¡¡¡Muchas gracias Rosa!!! Me parece muy fuerte, que después de todos los post geniales q haces te quede tiempo para contestarnos tan rápido. Esta vez me ha quedado justo como quería, y aplicaré estas dos formas de poner columnas en el futuro también. Así se ve ahora mi sección de enlaces: http://archivoestrellitaymandarina.blogspot.com/2008/07/enlaces.html

¡¡Gracias!!; 10/7/08
Anónimo: Mandarina, gracias, intento ser lo más rápida que puedo, aunque a veces se me complica un poco...; 10/7/08
DoN CeSaR: Buenas Rosa como siempre encuentro de todo aqui jejeje, como hago eso pero con imagenes ?? Quisiera poder 4 cubos asi bien ordenaditos; 26/8/08
DoN CeSaR: Olvidalo Rosa, lo Logre :D ... Gracias :); 26/8/08
Anónimo: DoN CeSaR que bien, je,je.; 26/8/08
Anónimo: Rosa me encanta este codigo lo guardo, ya lo pongo; 14/12/08
Paolo Blanco: Hola Rosa... en verdad gran blog el que tienes aquí, ya lo he visitado bastante y puedo decir que eres una blogger magistral.... me he paseado desde ya varios meses pero aún no he tenido argumento alguno para dejar un comentario... lo único que puedo decir es que GRAN TRABAJO el que haces aquí... no tengo consulta alguna que hacerte puesto... que todo lo que necesito casi que lo encuentro aquí... por todo un GRAN GRACIAS ROSA... y por cierto te voy a recomendar...; 8/7/09
Anónimo: Marco Di Calderon Muchísimas gracias por tan lindas palabras :D es un placer tenerte por aquí.; 8/7/09
Anónimo: Alvarito La imagen la pones donde quieras dentro del contenido.

El borde se añade en el style:

<div style="width: 45%; float: left; border=1px">; 2/10/09
Miguel: hola Rosa estoy intentando crear un blog de quejas,pero me he quedado un poco bloqueado
me pudes dar alguna idea o sugerencia gracias,
es un pueblecito muy pequeño se llama Ontigola,y el blog es http://elmurodeontigola.blogspot.com; 3/12/09
Anónimo: Miguel Pues no se... supongo que es un blog dirigido a tu localidad y ahí, la verdad, tampoco tengo mucho que decir...

Creo que aunque el blog sea para quejas, como dices, deberías incluir también algo de información sobre el lugar en el mismo, se me ocurre como teléfonos de interés, lugares que visitar... no se, algo que atraiga al mismo tiempo a visitas no de la localidad...

En cuanto a las quejas, tampoco sería creo yo, el quejarse por quejarse de cualquier cosa... deberías tratar de informarte de algo que sepas sea "polémico" y publicar tu opinión al respecto con toda sinceridad, eso atraerá defensores y detractores claro, con lo que podría crearse un debate interesante...

Perdona si no entendí bien... al releer el comentario he pensado que quizás tu consulta era sobre el diseño o la plantilla en concreto y no el contenido...:S

Ya me dices...; 3/12/09
Miguel: Hola Rosa,
muchas gracias,si me entendiste bien era sobre el contenido,alguna idea ya me as dado muchas gracias ya te contare.
gracias; 4/12/09

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.