Cómo crear dos columnas de posts en Blogger

Blogger, Tutoriales Publicado por Claudia en agosto 22, 2009

Este mini-tutorial nace a partir de una pregunta vía e-mail. No se trata de dividir un post en dos columnas, sino de mostrar dos columnas de posts en vez de una. Puede ser muy útil para cambiar la forma en que se muestran los posts en la página principal y, en especial, para crear la base de una plantilla tipo Magazine como Turnoutmag.

posts-blogger

Empecemos con el experimento:

1. Lo primero, es añadir el script “leer más con thumnails” y guardar los cambios. Como siempre, es recomendable descargar y realojar el archivo summary-post-v20-test.js. Si no, podría dejar de funcionar en cualquier momento.

2. Configura las opciones del script del siguiente modo: summary_noimg = 300; summary_img = 230; img_thumb_height = 60; y img_thumb_width = 60. En realidad, puedes elegir las proporciones que quieras pero, para este experimento, yo elegí éstas.

3. Amplía los contenedores de tu blog: el #main-wrapper debe tener al menos 580 píxeles de ancho, y el #outer-wrapper debe tener como ancho mínimo la suma del ancho del #main-wrapper con la del #sidebar-wrapper. Seguramente, también vas a tener que ampliar los contenedores #header-wrapper y #footer-wrapper para que sigan en concordancia con el diseño.

4. Ahora, busca la siguiente sección en tu plantilla:

]]></b:skin>

Justo debajo, añade:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
 
.post {
border:1px solid #BFBFBF;
float:left;
height:300px;
width:260px;
margin:7px;
padding:0px 5px 5px 5px;
overflow:hidden;
}
 
</style>
</b:if></b:if>

Lo anterior corresponde a estilos condicionales para la página de inicio. Se trata simplemente de especificar el alto y el ancho de los posts. En esta sección, también puedes añadir más estilos condicionales para el home (puedes ayudarte de la chuleta que creó Francisco). Así, por ejemplo, puedes cambiar el color del título de los posts o modificar el tamaño del texto en las entradas.

5. Detalles adicionales

a) Seguramente, vas a necesitar limpiar la flotación de los links de navegación:

#blog-pager {
clear: both;
}

b) Puedes adornar con CSS el enlace “Leer más”:

.rmlink {
background: #CA8398;
padding: 2px 5px;
}
.rmlink a:link, .rmlink a:hover, .rmlink a:visited{
color: #FFF;
}

c) En Formato, necesitas cambiar el número de entradas a mostrar a un número par (idealmente 8, 10 ó 12).

Consideraciones finales:

Es una técnica muy sencilla, que puedes adaptar a tus necesidades y “adornar” con un poco de CSS y HTML:

  • Puedes modificar los metadatos (fecha, autor, enlace de los comentarios), cambiándolos de lugar, añadiendo o quitando texto, o utilizando íconos para destacarlos.
  • Seguramente, notarás que la fecha queda flotando arriba de uno o varios posts, por lo cual puede ser algo molesto y poco estético. Opta por ocultarla desde la sección Elementos de la Página, y usa en su lugar el fomato de la hora. También puedes moverla manualmente desde la edición de HTML, aunque puede ser más complejo si no estás familiarizado con la estructura de una plantilla Blogger.
  • Si amplías más los contenedores de la plantilla, y reduces el tamaño de los posts en la página principal, puedes crear tres o más columnas de posts sin necesidad de retocar nada más. Inclusive, puedes llegar a crear galerías de imágenes modificando las propiedades del script.
  • Si antes del contenedor #main-wrapper añades un plugin jQuery para crear slideshows, y complementas la técnica poniendo columnas en el footer y arreglando tu sidebar con widgets y más columnas, puedes tener una perfecta plantilla tipo magazine. Todo está en entreverse a jugar y experimentar un poco.
Compártelo!
  • Pingback: Bitacoras.com()

  • Muy práctico el tutorial y se puede combinar perfecto con el condicional para el primer post.

  • Hola, tengo una pregunta totalmente aparte, quería saber si me podrías decir como poder poner ese botón para compartir mis entradas. me encantaría saber..

  • Claudia

    Catalina:
    Busca el post que escribí sobre los botones de Wikio. Ingresa “Wikio” en el buscador de arriba 😉

    Saludos!

  • Gracias chicablogger , valio la pena la espera , ahora mismo lo voy a probar

  • Claudia:
    Creo que se nos hizo dificil comunicarnos bien por el msn ayer, pues a esa hora se nos acumulan muchas tareas.
    Este tipo de columnas son las que quiero modificar o crear en el theme de studiopress. Lo intenté y no funciona, He probado mucho de todo ¿crees que el error podría estar en las variables de contenedores wraper?

  • Claudia

    Las variables no tienen nada que ver, y tampoco hay errores. Puede ser que el CSS sea un poco distinto, pero sólo eso.

  • Morelia Cancino Sáez

    Y si el main wrapper tiene menos de 580? Es decir 500 como hago para que ancajen dos columnas ahí?

  • Morelia Cancino Sáez

    ¿A qué te refieres con : “es recomendable descargar y realojar el archivo summary-post-v20-test.js…” ???

  • Claudia

    Disminuyendo el ancho de los posts que se muestran en la página principal, o ampliando el main-wrapper 😉
    “Descargar y realojar el archivo” tiene que ver con que si quieres usar javascript en Blogger, tienes que alojar los archivos en algún hosting. Siempre es mejor que lo hagas en tu propia cuenta, tu propio hosting de archivos, porque el mío o el de otra persona podría fallar o sobrecargarse.

  • Morelia Cancino Sáez

    Gracias, lo intentaré… a propósito, te tengo en mis páginas favoritas ;-)… este es el único lugar donde he podido encontrar explicación para esto.

    Saludos

  • Morelia Cancino Sáez

    De nuevo yo, en varias plantillas, tipo las de magassine aparece arriba una cosa que dice featured content con imágenes y textos que van cambiando,

    ¿Qué es eso? Y como lo hace uno para poner sus propias fotos y textos? O en última instancia como eliminarlo?

  • Hola, pasé antes por acá y dejame decirte que es un blog genial y das una ayuda incalculable.
    Verás para este post yo tengo una duda más bien concreta, este es el blog en cuestion http://todaslasventanas.blogspot.com y el tema es que lo que quiero lograr es dejar sobre el cuerpo de entradas, un cartel o cuadro un poco mas pequeño, a modo de rincón de sugerencias y proposiciones, dado que es un blog en conjunto y de tmaticas variadas, me parecia una idea interesante converger con los lectores. Dejar este cartel en cuestión y que en el se puedan dejar comentarios, sin que haga falta comentar en los posteos que no tengan que ver. Lo más fácil me pareció crear un nuevo main, no?? o existe otra manera más práctica, me podrías dar direcciones, estoy entrando a tientas en este mundo del html y se me complica un poco a veces. Desde ya mil gracias!!!!! Un abrazo!

  • Claudia

    Morelia:
    Muchas gracias por añadirme a tus favoritos! 😀
    Quitar la sección “featured” de algunas plantillas depende del código que traiga (varía de plantilla en plantilla), pero es algo que puede afectar al diseño. A veces sólo es cosa de remover una pieza de código; otras, también hay que “retocar” alguna imagen con photoshop y volver a subirla.
    Ahora, añadir “featured posts” es parte de otro tutorial 😉

    León: Fíjate si tu pantilla tiene la sección “crosscol-wrapper” (vi que usas Mínima). Si no:

    1. Añade una sección extra sobre las entradas (mira este archivo de texto):

    crosscol.txt

    2. Ahora que puedes poner gadgets ahí, justo sobre las entradas ;). Agrega un gadget de HTML/Javascript, y pon ahí una imagen con un link a otro post donde quieras que comenten, o agrega CBox (http://www.cbox.ws).

    Saludos! 🙂

  • bueno, voy a implementarlo!!! muchisimas gracias!!!

  • Tengo 2 dudas:

    1.- como puedo abrir una etiqueta o seccion de adultos que al ingresar te pida una contraseña otorgada por mi a mis visitantes o por lo menos te saque un aviso de que el contenido de esa secciòn es de adultos?

    2.- como puedo utilizar el lado izquierdo de mi blog sin tener que cambiar la plantilla. Lo que pasa es que todo el lado izquierdo esta desperdiciado y si cambio la plantilla hay que hacer un trabajo de edicion muy tardado

    Gracias de antemano por su ayuda

  • Maria

    Gracias por el post. La verdad es que es de las webs mças interesantes sobre blogger.

    Queria preguntarte unas dudas. ¿Como hago para poner mas de dos columnas? ¿Podria utilizar este metodo para hacer un scroll en horizontal (esto es algo por lo que estoy muy interesado y he estado buscando pero no he encontrado nada de nada)?
    Con esto del scrol me refiero a que la publicacion de las entradas fuese en horizontal en lugar de en vertical.

    Todas las dudas estan referidas a un blog de blogger.
    Muchas Gracias

  • Claudia

    María:
    Para poner poner más columnas, simplemente amplía el ancho de los contenedores. Si el ancho del contenedor principal ‘outer-wrapper’ es mayor que tu resolución de pantalla, deberías ver el scroll automáticamente al final de la plantilla.

    Saludos!

  • Maria

    Muy agradecida por tu respuesta. Tenías razón, era cuestión de dar más width al outter-wrapper,al content y al main.

    Una última pregunta, que sé que no viene a la cuestión de la entrada pero agradecería mucho si pudieses resolverme o redireccionarme a algún sitio donde ya se haya contestado (como te digo no soy capaz de encontrar información para blogger). Bueno, la cuestión es cómo conseguir que al hacer scroll con la rueda del ratón (si la altura entra en pantalla) ésta se desplace en horizontal y no en vertical. Pongo algunas webs que muestran lo que digo:

    http://www.thehorizontalway.com/
    http://www.vanityclaire.com/
    http://deanoakley.com/
    http://www.sursly.com/

    Desconozco si es cuestión de flash únicamente o puede conseguirse para un blog de blogspot.

    Muchas gracias.

  • hola…
    tengo un problema en la ubicacion de los post, me sale uno mas arriba que el otro
    ¿¿¿como puedo ubicarlos a la misma altura???

    dos-visiones.blogspot.com
    este es el que estoy creando

  • Gracias.

  • Hola, he hecho los cambios en mi plantilla, pero no solo me aparecen las 2 columnas en la pagina de inicio, tambien lo hacen en las paginas de etiquetas. ¿como puedo solucionarlo para que solo lo haga en las paginas de inicio?

  • archivo summary-post-v20-test.js.
    summary_noimg = 300; summary_img = 230; img_thumb_height = 60; y img_thumb_width = 60.
    el #main-wrapper ?????????? dios por qe soi tan estúpida, loco no entiendo nadaaaaaaa!!! plis, necesito que me ayudes :s, conosco a alguien q tiene un blog perfecto tiene iconos gestuales, textos qe se mueven fotos q se mueven yo quiero saber!! ino se q es url ,SCRIPT ?? Qe es eso, porfa les re agradeceria un montÓnaZo!!! mi msn es

    lucianna_maktub@hotmail.com

    PORFiiiiiiiiiiiiiiiiiiii!!!!!!!!!!!!!!!

  • Hola Claudia, una duda, que puedo hacer para que las primeras 2 o 3 entradas tengan el el tamaño normal (580) y las siguientes divididas en columnas como lo presentas?

  • Buenas, ¿Sabes si se puede organizar las columnas por categorías, y que dependiendo de la categoría que pongas al post se publique en esa columna?

    Estoy buscando respuestas, y no lo veo x ningún sitio. ¿Pido demasiado para blogger?

    Gracias!!!

  • Hola quisiera saber como puedo hacer para que la imagen sea el link al post completo.
    +
    saludos

  • Jesus

    Buenas tardes.
    Gracias Claudia por compartir tu trabajo y conocimiento.
    Tengo una pregunta para quien me pueda colaborar: ¿Como hago para que las dos columnas apliquen solo a la pagina inicial y no a las otras paginas adicionales?

  • oye muchas gracias fue de gran ayuda

  • 🙁 No me sale… estoy usando la plantilla minima lefty del blogger… ya hasta aloje el script pero no funka… 🙁 help me please…

  • Perdon, el blog que estoy intentando armar es http://www.kysflowers.blogspot.com

  • Hola, estoy probando el truco en una plantilla minima de blogger y no me funciona, que cree q pueda ser? HAGO LOS PASOS NECESARIOS Y TENGO UN POCO DE CONOCIMIENTO EN CSS, pero no se que pasa.

  • Pingback: Cambiar la forma de las entradas()

  • pulgatomika

    Gracias Claudia por este tutoríal.
    Te quería comentar que tengo un problema haciendo lo de las columnas, lo hice tal como lo explicas tes pero en vez de dos columnas,pues tres columnas.
    Y hay va mi problema al hacer lo de las columnas me sale lo de las entradas antiguas y recientes en la parte derecha,donde acaba la tercera columna y salen recortadas,ya que para que se vean enteros los de enlaces,tengo que hacer mas grande el blog y las entradas se ven inmensamente anchas y no queda para nada bien.
    Claudia que hay alguna manera de poner las entradas antiguas y recientes en vez que salgan en la derecha que salgan abajo como salen siempre.
    Espero a ver explicado bien el problema que tengo.
    Gracias de antemano y saludos desde Lleida.

  • ale

    Muchas gracias por el tuto! Explica de forma muy simple como tener ese estilo magazine que siempre quise(y hasta ahora no me había salido. Ahora manos a la obra, voy a probar a ver como queda 🙂

  • Va perfecto y queda genial en mi blog pero, me aparta las entradas antiguas y recientes (paginación nativa) a la derecha y casi no se ve. ¿Hay alguna solución? Gracias

  • Lo siento no leei el post entero y ya lo he resuelto, gracias, con esto mi blog queda mucho mas profesional.

  • Hola Chica! tengo una duda sobre esto. Lo probé y me funciona de maravillas, pero me gustaría ajustar algunas cosas que me quisiera saber si son posibles.
    Estoy rediseñando mi blog de haikus, que como sabras son muy pequeños y siempre pense que en pequeños rectangulos tipo magazine se verian bien, y de hecho lo hacen. La cuestion es esta, te dejo acá la foto para que veas de lo que te hablo http://dl.dropbox.com/u/13749125/haikus.JPG
    Se podría eliminar el leer mas??? y que me queden los haikus completos y no de corrido (ya que son tres versos y me los pone todos como si fueran una sola oracion) basicamente solo querría que las dos columnas de posts fueran solo eso, dos columnas de posts en ese tamaño sin leer más ni nada por el estilo, y que se vean como entradas comunes, y no con el texto de corrido. Espero haber sido claro :S
    Muchas gracias desde ya 🙂

  • Andres

    Mira tengo la misma pregunta de Isaac y Jesús, yo lleve a cabo el procedimiento, y lamentablemente también aplica para las static pages de el blog. Me gustaría saber cómo puedo hacer que sólo se ejecute el código que tu das en la página principal, más no en las otras páginas. Mil gracias. Estoy atento.

  • Claudia

    Andrés: Hace un tiempo modifiqué el código a incluir para instalar el script “leer más con thumbnails”, me modo que incluya condicionales para que el script no se ejecute en las páginas estáticas. Por lo tanto, si usas el código de ese post al que enlazo más arriba, no deberías tener problemas.

  • Muy bien, he conseguido ponerlo perfectamente. Además lo he conseguido personalizar a los colores de mi blog.

    Creo que deberias mejorar un poco la explicacion de lo del CSS, proque no todo el mundo creo que sepa como y donde añadir el CSS.

    Muchas gracias.

  • Me referia al de leer más, me he confundido de pestaña jajajaja.

  • Pablo

    Muy buen tutorial, te felicito. Mi idea es mostar los 3 ultimos posts.
    Me gustaria saber si hay posibilidad de que en la columna de la izquierda se vea el ultimo post y en el de la derecha se muestren los dos anteriores.

    Saludos )

  • Hola Chica Blogger , hay alguna forma q no sean 2 columnas, si no 4 columnas de post ?

  • Luis

    Como puedo hacer para que salgan iguales. Una columna esta mas arriba que la otra.

  • Llevo tres días intentándolo, pero siempre terminan apareciendo las entradas en la columna izquierda, quedando las fechas en la derecha. Además el main-wrapper dividido en trozos aparece encima de algunas y desaparece en otras, de tal manera que todo está desorganizado y no se puede leer nada, así que he vuelto a mi plantilla de siempre. ¿Alguna idea de qué he podido hacer mal? Gracias

  • Claudia

    Nesosnikes: Tanto este post como el de referencia han sido actualizados. Saludos!

  • David

    ola gracias
    lo que pasa es que ahora las entradas solo salen 4 aunque los cambie en formato sigue siendo 4
    atuda 🙁

  • Hola Claudia, tengo aproximadamente 4 meses que me aferre a aprender el mundo web, ya tengo mi fan page, blog, etc., me encanta…. curiosamente hay siempre por ahi cosillas que he aprendido a prueba y error, bueno mas errores al principio, curiosamente siepre aparece por ahi la chica blogger con una solucion, gracias he aprendido mucho de tu blog, ahora el siguiente paso es posicionarme en los motores de busqueda!!!

  • Paola

    Hola Claudia,

    A mí me gustaría que mi blog tuviera dos columnas de posts pero sin partirlos, o sea, sin el leer más. Que salieran los posts enteros en dos columnas.
    ¿Cómo podría hacerlo? Gracias

  • Hola claudia una pregunta si te fijas mi pagina es de deportes y lo quiero dividir pero lo ajusto al tamaño que quiero y no sale un poco de texto y tampoco leer mas mi cosa era dejarlo parecido a esta pagina http://www.riverplate.com

    bueno desde ya muchas gracias