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!
66 Comentarios en Cómo crear dos columnas de posts en Blogger
  1. Marcos dice:

    Me podrias responder porfiss es que estoy apurado!!

  2. Marcos dice:

    uuu no hay nadie que responda a mi pregunta!!!

  3. Claudia dice:

    Marcos: Creo que sólo cosa de ajustar las dimensiones del post: ancho y alto.

  4. Marcos dice:

    Pero yo tengo una plantilla nueva de blogger y no puedo editar el ancho

  5. Ayuda dice:

    Hola,

    Ya tengo las dos columnas de pots pero ¿Donde tengo que poner ese código para que Leer Más se ponga tal como lo tienes en la imagen?

    Espero respuesta. Gracias de antemano

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

  6. Claudia dice:

    Ponlo antes de
    ]]></b:skin>

  7. Sky Jass dice:

    Gracias por tu valioso aporte, estaba buscando esos códigos para poner varias columnas.
    Una vez mas mil GRACIAS.

  8. Chile de Fútbol dice:

    donde se pone
    #blog-pager {
    clear: both;
    }
    Gracias espero respuestas.

  9. Hola dice:

    tiene que ser una plantilla de blogger

  10. Albert dice:

    Buenas!

    Se que este post tiene ya bastantes años, pero he estado usando la doble columna de entradas para mi blog de pruebas y me he encontrado que en ciertos posts se crea un espacio enorme entre el post anterior y ese mismo, quería saber si conocéis la causa de este problema.

    Aquí os dejo el link, si vais bajando por las entradas veréis a lo que me refiero:

    http://thekopnoticias12.blogspot.com.es/

    Un saludo!

  11. Sam Fisher Show dice:

    No entiendo nada :))) Que es el archivo summary-post-v20-test.js. y donde se encuentra ? para que sirve ?

Deja tu comentario
Tu Comentario