Cómo crear dos columnas de posts en Blogger
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.
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 != "item"'>
<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>
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.
Posts relacionados
Wikio
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.
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 != "item"'>
<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>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.
34 Comentarios
Información Bitacoras.com…
Valora en Bitacoras.com: 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…..
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..
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?
Las variables no tienen nada que ver, y tampoco hay errores. Puede ser que el CSS sea un poco distinto, pero sólo eso.
Y si el main wrapper tiene menos de 580? Es decir 500 como hago para que ancajen dos columnas ahí?
¿A qué te refieres con : “es recomendable descargar y realojar el archivo summary-post-v20-test.js…” ???
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.
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
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!
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
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
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!
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
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
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.
[...] [...]
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.
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