Estilo revista (magazine) simplificado | Oloblogger El estilo revista o magazine es el que convierte vuestra página principal y todas aquellas distintas de los posts individuales, en un amplio...

5 de marzo de 2009

Estilo revista (magazine) simplificado

El estilo revista o magazine es el que convierte vuestra página principal y todas aquellas distintas de los posts individuales, en un amplio escaparate de vuestro blog. Básicamente se trata de mostrar el título de los posts y un breve resumen de ellos, a modo de sumario. Viene a ser como el truco de los posts comprimidos, pero con un aspecto más compacto. Esto permite visualizar de una tacada muchos más artículos. No confundir con el Leer Más.

La plantilla actual de Pizcos es un claro ejemplo en funcionamiento de este estilo. Si quereis confeccionar una buena plantilla con estilo revista, mejor os acercais a ver las explicaciones de Post resumidos de Pizcos o las de Jugando con los posts (Magazine) de J.Miur. Allí podreis encontrar unos muy buenos tutoriales para construir paso a paso una plantilla con el estilo en cuestión.


Sin embargo, puede que no quieras complicarte mucho y te conformes con algo más básico, pero casi igual de eficaz. El truco que se explica a continuación, sirve para no tener que modificar apenas nuestra plantilla.

Lo he probado con diversos modelos y funciona correctamente en todos, aunque probablemente algunas plantillas muy personalizadas y sobre todo, con muchos efectos gráficos, requerirán modificaciones adicionales. Pero bueno, si has sido capaz de hacer una plantilla de este último tipo, supongo que no será mayor problema arreglar lo que descuadre.

Advertencia: Esta es la típica chapuza de un servidor para trabajar poco. Si quieres un resultado más profesional, se recomienda acudir a los enlaces anteriormente citados.

TRES PASOS:

1. Expandir Plantillas de Artilugios y crear la clase .resumen. Para ello insertamos el siguiente código justo antes de ]]></b:skin>. El formato de esta clase, es en lo que se basa prácticamente todo el truco.

.resumen {
float:left;
display:block;
margin:0px 0px 5px 5px;
padding:0px 5px 5px 0px;
width:190px;
height:240px;
overflow:hidden;
font-size:12px;
font-style:italic;
text-align:center;
color:#000000;
background:url(http://i252.photobucket.com/albums/hh27/olomansan/fondomagazine.jpg);
}
.resumen img {
width:80%;
}

2. Insertar en el LOOP principal, una condición para que este estilo se utilice sólo en páginas distinas de posts individuales. Las líneas que hay que insertar, están en color verde:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>

<!-- <b:include data='top' name='status-message'/>-->
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='resumen'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:include data='post' name='post'/>
</div>
<b:else/>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:include data='post' name='post'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:if>
</b:loop>
<data:adEnd/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div style='clear: both;'/>
</b:if>

</div>

<!-- navigation -->
<b:include name='nextprev'/>
etc

3. Escoger en Configuración-->Formato-->Mostrar, un número de entradas que cuadre con las columnas que hayamos creado (según el width). Por ejemplo, para tres columnas escoger un múltiplo de tres: 9, 12, 15, etc...

¡Plantilla modificada! VISTA PREVIA y si te gusta GUARDAR


Los atributos de la clase .resumen, se pueden configurar al gusto para conseguir distintos resultados. También influye la plantilla base que, como comentábamos, no se toca para que los posts individuales sigan teniendo el diseño original. Algunos ejemplos:

Plantilla Tic-Tac cambiando width:140px; y el fondo con un color plano en lugar de la imagen, background:#eeeeee;...


Una Dots Dark con margin:30px 10px 0px 0px; padding:5px 5px 5px 5px; color:#71BEC2;
border:1px solid #71bec2; y sin background...


Black mínima ensanchada a 900px con el código tal y como aquí se indica...


Rounders con width:150px, sin ningún tipo de background...


Harbor: width:150px; height:300px; background:url(http://www1.blogblog.com/harbor/rocks_left.jpg) bottom center no-repeat;...


Plantilla 565: margin:10px 10px 0px 0px; padding:5px 5px 0px 60px; width:130px;color:#000000;background:url(http://i252.photobucket.com/albums/hh27/olomansan/blocsepia1200x35.gif) repeat-y left top;...


En este último ejemplo, se ha dejado la fecha fuera del fondo, cambiando un poco la primera parte del código nuevo insertado en el LOOP.

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='resumen'>
<b:include data='post' name='post'/>
</div>
<b:else/>
<b:include data='post' name='post'/>

Un buen fondo para los sumarios, es lo que más realza este estilo. Teniendo en cuenta los colores y formas de vuestro blog, podeis conseguir efectos muy chulos como el del ejemplo de la Black Minima.

Como siempre digo... echadle imaginación.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

148 comentarios :

  1. Excelente trabajo paisano, tus chapuzas son de lujo :)

    ResponderEliminar
  2. Creo que tienes razón y toqueteándo un poco la plantilla, el que sepa o se atreva, con tus consejos podemos mejorarla. Voy a probar ahora en uno de mis blogs. Gracias por las explicaciones.
    Saludos.

    ResponderEliminar
  3. Hola oloman, sabes como se crean cuadros de texto en una entrada?

    ResponderEliminar
  4. ¿A qué te refieres con "cuadros de texto"? Agradecería un ejemplo.

    ResponderEliminar
  5. Guau cómo has trabajado, excelente!!!, quedan bellísimas, abrazos!!!

    ResponderEliminar
  6. Por ejemplo, cuando me refiero a cuadros de texto me refiero principalmente en poner un cuadro de texto al rederor de una imagen i poner un pié de imagen.

    gracias

    ResponderEliminar
  7. Tienes que escribir el texto cómo normalmente lo haces y luego subir una imagen desde el editor, indicando que quieres ponerla a la izquierda o a la derecha. El código que te mete Blogger incluirá entonces un float:left o flat:right en el STYLE de la imagen. Ese es precisamente el codigo que tendrías que añadir tú si quisieras hacerlo a mano.

    Para un pie de imagen, simplemente lo escribes a continuación de dónde esté la imagen.

    Para lo inverso (un texto que flote), echa un vistazo a este artículo.

    ResponderEliminar
  8. Voy a probar a ver... Se ven muy bien la que hiciste... Saludos!

    ResponderEliminar
  9. tengo una plantilla que tiene este estilo como lo elimino .. porque se ve mal.. porfis me ayudas gracias

    ResponderEliminar
  10. Yo lo veo bien Cristian, pero si quieres cambiar eso, lo más fácil es que cambies la plantilla completa escogiendo otra.

    ResponderEliminar
  11. hola a todos por favor comunicarse al correo omega_tes@hotmail.com necesito preguntar algunas cosas...

    ResponderEliminar
  12. ooooOOOOhhh!!!! mis respetos pues sr.!

    ResponderEliminar
  13. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  14. Hola otra vez!
    ya encontre el articulo s/ leer mas y ya lo anadi con exito ...mil gracias , solo queda pendiente lo otro....

    gracias otra vez!

    ResponderEliminar
  15. Karla... ¿qué es lo otro? ¿lo del gancho cafe? No sé qué es...

    ResponderEliminar
  16. Gracias!
    No lo se, ya no aparece y creo es alguna de las opciones que se encuentran disponibles al editar las entradas la cual inhabilite,borre todo eso pero permiteme agregarlo de nuevo para que lo veas.

    ResponderEliminar
  17. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  18. Karla, me llevas un poco loco leyendo tus comentarios en distintos post. Realmente ya no sé sobre qué me preguntas exactamente. Además no tienes habilitado tu perfil y tu blog de pruebas es privado. De esa manera no puedo ver ninguno de tus blogs para averiguar cual es el problema y mucho menos, para solucionarlo...

    ResponderEliminar
  19. No hay de que sentirlo. No quería decir que preguntaras mucho. Eso no es problema. El problema es que preguntes lo mismo en distintos posts, que es lo hizo que perdiera el hilo de lo que necesitabas.

    ResponderEliminar
  20. Hola como te va? te queria comentar que me tira el siguiente error la planilla despues de colocar todos los pasas que indicas.

    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "b:if" must be terminated by the matching end-tag "".

    Probe el mismo en diferentes planillas pero siempre obtengo el mismo error.
    Gracias,
    Saludos, Fran

    ResponderEliminar
  21. Hola Fran, hola Romi. El error que os da es que algún IF no ha sido cerrado con su </b:if> correspondiente. Fijaros que sólo se han incluido tres IF (en verde) y que todos están cerrados. Uno de ellos incluye también un ELSE pero eso es irrelevante para el problema.

    Se conoce que al copiar y pegar os habeis comido alguna parte o que lo habeis insertado en un lugar que no corresponde.

    De todas formas, echad un vistazo también a este otro enlace por si os cuadrara mejor.

    Saludos,

    ResponderEliminar
  22. Anónimo9/7/09, 0:20

    Tengo un problema en mi blog. Al poner esta opción, los textos se me cortan en el momento que finaliza el bloque, al igual que el título del post, que sigue recto y se corta.

    Alguien puede ayudarme?

    Saludos y Gracias!

    ResponderEliminar
  23. "...se cortan en el momento que finaliza el bloque.." ¿Qué bloque Redacción2? ¿Puedes explicármelo con más detalle?

    ResponderEliminar
  24. Redacción 29/7/09, 19:47

    Pues es difícil de explicar, pero en primer lugar, agradecer tu rápida respuesta.

    Conseguí poner mi web con dos bloques de noticias, pero tanto el título como el texto, no quedan perfectamente encuadrados dentro de dicho cuadro, sino que el texto sigue todo recto, y cuando acaba el cuadro, no se ve lo que sigue.

    ResponderEliminar
  25. Antes de seguir averiguando... ¿Viste el post de Posts en forma de sumarios. Leer más en dos pasos.?
    Si te sigue interesando más este estilo, lo que tienes que hacer es crear una copia de seguridad de tu plantilla, crear un blog de prueba, instalar la plantilla guardada en el nuevo, hacer las modificaciones que probaste y avisarme aquí mismo para que vea qué es exactamente lo que ocurre.

    ResponderEliminar
  26. Estimado Olomán:

    Me gustaría saber si usted tiene conocimientos de Wordpress. Un grupo de amigos tenemos un proyecto en mente, y necesitamos usar como soporte wordpress, pero necesitamos a un diseñador y entendido del tema. Por supuesto, no será gratis el trabajo.

    Necesito la respuesta urgente.
    Saludos

    Póngase en contácto conmigo a través de ikeer1989@gmail.com pues necesitamos salir a la red ya.

    ResponderEliminar
  27. Je, je... para una vez que puedo cobrar algo por este tinglao y no entiendo de lo que me piden. Lo siento anónimo, pero mis conocimientos de Wordpress son tan limitados como que una página que dí de alta allí, me duró dos días. De todas formas, teneis muchos sitios de óonde sacar información concreta.

    En estos dos enlaces encontrarás muchos con conocimientos de Wordpress. Saludos.

    http://oloblogger.blogspot.com/2009/03/50-blogs-de-ayuda-en-castellano-1.html

    http://oloblogger.blogspot.com/2009/06/25-blogs-de-ayuda-en-castellano-mas.html

    ResponderEliminar
  28. Muchisimas gracias por este post, habia probado varias plantillas y/o codigos incrustados para tener las entradas en columnas y esta opcion es lejos la mejor que probe. Y eso que fui a lo mas simple, o sea que cuando dices que fue una chapuza para trabajar poco, yo te digo que fue ESA la opcion que me salvo. Un abrazo y nuevamente mis agradecimientos

    ResponderEliminar
  29. Bueno Emiliano, aunque no está exento de inconvenientes y actualmente hay otros sistemas más eficientes, me alegro de que esta idea te haya servido.

    ResponderEliminar
  30. Hola, yo otra vez. La solucion me sigue funcionando muy bien, salvo que encontre por ahi una manera de poner Leer mas... y cuando se clickea en "leer mas", el post resultante tiene fondo transparente y se confunde con el fondo. Eso tiene algo que ver con el sistema que adopte para poner las entradas en columnas o esta al margen de eso? En cuanto tengas unos minutos, te agradeceria si me puedes responder. Muchas gracias

    ResponderEliminar
  31. Emiliano, en este sistema hemos colocado un condicional que discrimina las entradas individuales del resto. Por tanto, cuando vas a un post concreto, el estilo "revista" no se ejecuta... bueno, siempre que la condición esté bien estructurada y construida.

    ResponderEliminar
  32. ola, estoy buscando entradas sobre menús... ¿me podrías indicar los links? gracias!!

    ResponderEliminar
  33. Lk, precisamente con esa palabra (menu) en el buscador de arriba, te salen varias entradas sobre el tema. La mejor para mi gusto es la que habla de un servicio online para generar menús.

    ResponderEliminar
  34. perdona olobblogger no había visto el buscador...lo estaba buscando...

    ResponderEliminar
  35. No problemo Lk. Más bien es señal de que quizás no debería estar dónde está.

    ResponderEliminar
  36. tu página es una maravilla solo que yo tengo presbicia!!!

    ResponderEliminar
  37. hola olomán, para http://wanttobuymywork.blogspot.com, me gustaría darle estilo web, con cuadratines como los que se ven aquí en algunos ejemplos, sin fondo de ningún tipo, y el título justificad0 del lado izquierdo. ¿cómo lo puedo hacer? (si es que se puede hacer en la mínima)

    ResponderEliminar
  38. Lk, quizás lo primero que debas hacer es cambiar el ancho de las dos columnas que tienes. La #main-wrapper parece que está infrautilizada y si pretendes hacer cuadraditos, me da la impresión de que ese espacio debería ser algo más ancho.

    Con respecto a la pregunta concreta, no acierto a ver la estructura de tu blog. No veo entradas al uso. De todas formas, con lo que se explica aquí y siempre que no tengas unas modificaciones demasiado raras, deberías poder hacer algo como lo que se ve en los ejemplos.

    ResponderEliminar
  39. sí, ya lo logré. gracias loman!!

    ResponderEliminar
  40. Lo he visto y parece que queda bastante bien. Saludos.

    ResponderEliminar
  41. hola oloman, he hecho el estilo magazine en http://wanttobuymywork.blogspot.com, pero no estoy satisfecha del todo. me gustaría que la cuadrícula fuera más pequeña para reducir el tamaño de las imágenes que aparecen, y que las entradas estén enmarcadas. ¿Cómo puedo hacer estos cambios, si se puede?

    ResponderEliminar
  42. Todo lo tienes que manejar desde la clase .resumen

    Cuadrícula: cambia el WIDTH y el HEIGHT. Si los haces más pequeños, incrementa el MARGIN a la derecha.
    Marcos: añade un BORDER
    Imágenes: .resumen img {width:50%;}

    ResponderEliminar
  43. hola olomásn, ya que NO lo sé hacer, te envío la parte deñl código para que tú hagas los cambios...

    .resumen {
    float:left;
    display:block;
    margin:0px 0px 5px 5px;
    padding:0px 5px 5px 0px;
    width:175px;
    height:175px;
    overflow:hidden;
    font-size:12px;
    font-style:italic;
    text-align:center;
    color:#000000;
    background:#FFFFFF;
    }
    .resumen img {
    width:80%;
    }

    zankiu adelantadas!

    ResponderEliminar
  44. Lk, yo te puedo decir dónde cambiar las cosas, pero desconozco el estilo que le quieres dar. Además, este es un truco para crear este efecto de manera fácil y rápida, por lo que tiene sus limitaciones.
    De todas formas, una primera aproximación más concreta:

    .resumen {
    float:left;
    display:block;
    margin:0px 10px 10px 5px;
    padding:0px 5px 5px 0px;
    width:165px;
    height:165px;
    overflow:hidden;
    font-size:12px;
    font-style:italic;
    text-align:center;
    color:#000000;
    background:#FFFFFF;
    border:4px groove #B74959;
    }
    .resumen img {
    margin:0px auto;
    width:155px;
    max-width:155px;
    }

    ResponderEliminar
  45. gracias, oloman, fantástico!!

    ResponderEliminar
  46. hola olomán, he hecho esto en http://wanttobuymywork.blogspot.com, pero aunque configuro para que entren 7 días de entradas, me salen solo tres filas y la última siempre incompleta, ¿sabes qué se puede hacer para que aparezcan más entradas? gracias
    liliana

    ResponderEliminar
  47. ya lo arreglé. bien!!

    ResponderEliminar
  48. Hola Lk. Los vídeos en los posts te descuadran el efecto en Firefox

    Prueba a añadir una nueva clase:
    .resumen object {
    display:none;
    }

    A ver si se soluciona.

    ResponderEliminar
  49. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  50. Bueno como ya saves.. lo que queria yo era muy dificil asi que accedi con la expliacion de pizcos jeje ^^.. pero bueno mi pregunta es la siguiente como lo puedo hacer para mostrar 3 entradas a lo largo asi como tal cual esta en la captura por que a mi se me ven dos... Saludos!! Muchas Gracias

    ResponderEliminar
  51. ¿Qué sistema has usado? ¿Qué captura?

    ResponderEliminar
  52. Use la explicacion de pizcos blog... y la captura me refiero a la que esta en este post al principio. ^^

    ResponderEliminar
  53. ¡Ah! Vale... ¡Magia! ;)

    ResponderEliminar
  54. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  55. Ok.. Muchas Gracias, jeje esta ultima pregunta como agrando mas la entrada..osea para que sean mas altas por que cuando le doy mas height en vez de que sea mas alta, se separan las entradas? :S te dejare la captura del vista previa con un height de 300px
    http://i45.tinypic.com/330v7ty.jpg

    saludos...de ante mano muchas gracias

    ResponderEliminar
  56. No puedes hacerlas más altas porque eso estropearía el diseño. La imagen de fondo que forma cada recuadro no estira más.

    ResponderEliminar
  57. hola amigo olo estoy probando armar un blog y quisiera poner la parte de los post en 2 columnas tipo magazien, http://magazinprueba.blogspot.com/ ese es el blog, si pudieras guiarme te agradeceria.
    saludos

    ResponderEliminar
  58. probe tal cual pusiste el codigo, y me tira este error "No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "b:if" must be terminated by the matching end-tag "". lo revise 10 veces y esta todo bien. gracias

    ResponderEliminar
  59. Empieza por copiar la parte CSS (el primer trozo mostrado en el post) y guárdalo. Eso no produce ningún cambio si luego no se utiliza la clase RESUMEN en ninguna parte.

    La parte HTML es la que te dará el error. Ese error es porque no todos los IF están bien cerrados o porque no se han anidado correctamente. Puede que tu código no sea exactamente como este, por lo que tendrás que fijarte en la estructura principal de esa parte en tu blog e insertar todo lo que aquí se ha marcado en verde siguiendo esa estructura.

    ResponderEliminar
  60. Puedo ayudarte pero no me gusta hacer las cosas aunque sea más fácil para mi.

    Empieza por colocar la parte CSS, que todavía no lo has hecho y guarda.

    ResponderEliminar
  61. Hola oloman de nuevo molestandote ,con una duda lo que pasa es que mi plantilla que estoy usando para mi blog de anime es como tipo maggazine,porque los post estan como en cuadritos y la verdad no me gusta ese diseño me gustaria saber como puedo cambiar esos post ,yo quierop ponerle como de esos post que dicen leer mas pero no en esos cuadros ,o como tus post pero ¿Como puedo cambiar ese parte del diseño ? saludos y espero que me puedas ayudar .Gracias

    Pd :si no se pudiese ,¿?habrria una manera de disminuir el tamaño de las letras y las captura del video para que se veo todo el post en el cudro?

    ResponderEliminar
  62. Orochimarusama, lo que propones es un cambio casi de plantilla entera, que es lo que te recomiendo si no te mueves bien por el mundo de los códigos.

    En un principio, tampoco veo que tengas ningún sistema parecido al estilo revista que se propone aquí y no sé si el "Read More" está puesto desde Blogger o desde otro sistema.

    Para esto último, lo único que conozco está en este enlace.

    Lo siento.

    ResponderEliminar
  63. jose, he borrado tu comentario porque no creo que esa sea forma de indicar que lo que hay en los links de la entrada no te gustan ;)

    ResponderEliminar
  64. Hola amigo, me sirvio pero una consulta yo modifique asi.

    http://www.peliculasonlinehoy.com.ar/

    Necesito que al clickear en la imagen ingrese a la entrada para asi poder quitar los titulos. Por que sino se me corre la imagen hacia abajo y queda mejor esteticamente sin los titulos. Sabes que codigo debo poner ? Gracias muy bueno

    ResponderEliminar
  65. Series, este post va sobre otra manera de hacer sumarios, distinta a la que tú usas.

    De todas maneras, para la tuya y para eso que dices en concreto, tienes este otro post:

    http://oloblogger.blogspot.com/2009/10/modificaciones-al-sistema-de-sumarios.html

    ResponderEliminar
  66. Oloman en principio te felicito por tu blog, no he aprendido de ningún lado tanto html y css como leyendote a ti.

    Tengo una idea que no se realmente como hacerla. En un blog que estoy preparando: http://andreasmauer.blogspot.com/ me gustaría incluir en la columna de la izquierda una serie de post a modo magazine. Pero para empezar debería crear algo que dividiese los post en dos tipos, uno para la columna de la izquierda (donde introduciré contenido diferente) y otro post, el general, en la columna central. Si tienes alguna recomendación muchas gracias.

    P.D: he buscado tb en inglés a través de google pero ni así.

    ResponderEliminar
  67. Andreas, no tengo nada por el estilo publicado, pero te puedo remitir a un post de Vagabundia con el cual quizás puedas conseguir lo que quieres: Agregando Miniposts

    ResponderEliminar
  68. Muchas gracias Oloman, conocía Vagabundia pero no sabía nada de este post

    ResponderEliminar
  69. Estimado. Coloque una plantilla de entradas estilo magazine en mi blog pero ya no me resulta con la idea que quiero hacer, el problema es que no se como eliminarla para colocar otra plantilla. Podrias ayudarme?
    mi blog es www.produccionesdiverso.blogspot.com gracias !

    ResponderEliminar
  70. Diverso Magazine, con que subas una plantilla nueva, la anterior ya se borra. La nueva anula la antigua.

    ResponderEliminar
  71. Oloman, antes de nada un saludo; tengo el blog por contenedores en la página principal, el caso es que solo me salen 5 cuando deberían de salirme 6, donde debo corregir la plantilla no encuentro donde está ese formato en la plantilla…gracias

    ResponderEliminar
  72. Hola Cristina. No es desde la plantilla. Eso lo puedes modificar desde el escritorio: Configuración -> Formato -> "Mostrar un máximo de...".

    Ahí puedes seleccionar el número de entradas para la página de inicio, aunque si son demasiadas Blogger -a su criterio- las recortará.

    ResponderEliminar
  73. Oloman, ya lo hechc, lo he puesto a 6 y a 9 y me quedan 5 entradas en la pagina pricipal. Ahora segun la ves está a 6

    ResponderEliminar
  74. Bueno Ana U. voy con mucho retraso contestando y no sé si tu comentario viene por otro anterior en otro post. Hoy hay más de 10 entradas en tu página de Inicio por lo que supongo que ya hiciste lo que querías.

    De todas formas, ya que estoy y si me permites la sugerencia, yo no metería tantos posts por página porque demora la carga. Si es cuestión de gusto, ahí ya no me meto ;)

    ResponderEliminar
  75. Buenas.

    ¿Cómo hago para modificar el título de las entradas con el formato revista?

    He probado a poner:

    .resumen h3 { ... }

    Pero no funciona....

    ¿Alguna idea?

    Gracias !!!

    ResponderEliminar
  76. Pacheta, si hablamos del blog Antropología UCM, en tu caso, prueba con:
    .resumen .post h3 {}

    ResponderEliminar
  77. una preunta para que el codigo no hafecte las paguinas

    ResponderEliminar
    Respuestas
    1. En el punto dos, en la primera línea en verde, cambia item por index.

      Eliminar
  78. Otto, te voy a molestar de nuevo xD perdona.
    ¿Cómo se hace para que en las páginas estáticas no se muestre el estilo magazine sino el individual?
    http://estudioantropologia.blogspot.com.es/p/grupos.html

    Es que no hay manera de que aparezca normal....

    Gracias !!

    ResponderEliminar
    Respuestas
    1. Este post lo publiqué antes de que aparecieran las páginas. Para que no salga en ellas hay que añadir algo más a las condiciones. El primer trozo marcado en verde lo sustituyes por esto otro:
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

      <div class='resumen'>
      <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>
      </b:if>
      <b:include data='post' name='post'/>
      </div>
      <b:else/>

      Eliminar
  79. hola tengo un problema al hacer esto se quedan las entradas arriba y la barra lateral abajo como puedo solucionarlo?

    ResponderEliminar
    Respuestas
    1. No debería pero por si acaso, quítale un poco de anchura a la barra lateral.

      Eliminar
  80. la tengo a 250 si la quito mas pasa lo mismo

    ResponderEliminar
    Respuestas
    1. ¿Me pasas una dirección dónde pueda ver cómo queda la cosa?

      Eliminar
  81. oloman gracias por tu interés pero lo e solucionado poniendo otra plantilla directamente y poniendo el fondo que tenia yo en mi bloger

    ResponderEliminar
  82. Eso es porque alguna línea de las que hay que añadir (en verde) o no está en su sitio, o está de más, o está de menos... pero desde este lado no se puede ver cómo lo hiciste pues se muestra ya interpretado.

    ResponderEliminar
  83. una pregunta oloman para modificar el texto que fuera debajo de la imagen como una peque descripcion de una linea

    ResponderEliminar
    Respuestas
    1. ¿Puedes explicar la idea con algo más de detalle? Es que no se si lo que quieres es un sistema de sumarios. Si es así prueba con esa palabra en el buscador de la izquierda.

      Eliminar
  84. tengo un problema con el estilo magazine cencillo no me esta mostrando los post cuando le doy clic al titulo y lo de la descricion seria titulo del post abajo la imagen y debajo de ella seria almo mas o menos dar clic en la imagen para ver el post

    ResponderEliminar
  85. en esta paguina animemundo2012.blogspot.com lo estoy usando y me el problema que cuando das clic en el titulo para ver el post completo la publicacion desaparece

    ResponderEliminar
    Respuestas
    1. Hola. Eso es porque alguna condición está mal y cuando estás en una entrada (blog.page.type=item) no muestra el contenido (data:post.body).

      Repasa el código que pusiste con respecto al de esta entrada.

      Eliminar
    2. cunado puse el primer codigo para efecto magazine no paso nada pero cuando use el otro para quitar el efecto magazine a las paguinas estaticas despues fue que aparecio ese inconveniente y otra cosas cuando ponia el codigo me daba error y el problema que movie algunos codigos para que funcionara y cuando se aplico creo que ahi surgio el problema

      Eliminar
    3. este error me da cuando pongo el codigo

      No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML
      se han cerrado correctamente.
      Mensaje de error de XML: The element type "div" must be terminated
      by the matching end-tag "div".

      Error 500

      Eliminar
    4. disculpa por preguntar tanto y para poder ocultar algunos detalles como texto de manera autoamtica como podria hacer

      Eliminar
    5. Cronos, insisto en que tiene que ser tema de las condiciones, pero el problema para mí es que desde aquí el código se ve ya interpretado (desviado según la condición) y no puedo concretarte más la solución.

      Por otra parte, no sólo desaparece el contenido del post, sino que también salta publicidad y esa pantalla de entrada que pusiste. Creo que deberías pegar un repaso muy profundo a tu plantilla y a lo mejor te merece la pena instalar otra nueva. Sólo es una sugerencia.

      Eliminar
  86. hola estoy modificando mi plantilla pero al guardarla me da este error
    Error al analizar XML, línea 1649, columna 3: The element type "div" must be terminated by the matching end-tag "".

    ResponderEliminar
  87. solo remplazo el primer codigo que si funciona por uno que pusistes a peticion de pacheta para excluir las paguinaas estatias del estilo resumido y me da el error antes mensionado

    ResponderEliminar
  88. abria otra forma de excluir las paguinas estaticas fuera del efecto resume

    ResponderEliminar
    Respuestas
    1. Hola. La forma más sencilla es con un condicional. Si te da ese error es porque la estructura no queda bien formada. Puede que no sustituyeras bien lo que se indica. Lo que puse en la contestación a Pacheta es para cambiar SÓLO por la parte marcada en verde. Ni una línea más, ni una línea menos.

      Eliminar
    2. una cosa estube jugando con el codigo y al poner el de cierre de la condicional al final de la primera parte del codigo verde ahi si me muestra el contenido de la entrada pero oculta el contenido de las paguinas estaticas y al mover el al final y ponerlo junto al que pide para cerrar el fianl pasa lo contrario se oculta el contenido de la entrada pero se ve las paguinas

      Eliminar
    3. Prueba algo más fácil, que estoy algo atontado últimamente.

      Deja las cosas tal cual las publiqué inicialmente y sólo cambia las dos líneas <b:if cond='data:blog.pageType != "item"'> que aparecen en verde por otras tantas como esta:
      <b:if cond='data:blog.pageType == "index"'>

      Eliminar
    4. Muchas realmente me funciono

      Eliminar
  89. Hola amigo me gusto mucho tu pots, pero llevo tiempo buscando algun articulo que hable sobre una forma de entrada que me gusta mucho: es una entrada parecida a esta pero en vez de letra y resumen aparecen resumida en imagenes. por fa si sabes podrias ayudarme con esto... gracias.

    ResponderEliminar
    Respuestas
    1. Eso es media plantilla. Sé cómo hacerlo de un par de formas distintas, pero no puedo explicarlo aquí brevemente. Intentaré hacerlo en un post pero no es fácil. Como dije al principio hay que cambiar bastantes cosas en la plantilla. Si quieres prueba este sistema que es fácil y que publicó Karla

      Eliminar
  90. una pregunta para ocultar la fecha en la caja y no en las entradas individuales como deberia estructurar el codigo

    ResponderEliminar
  91. y otra pregunta para ocultar otros elementos que aparescan debajo de la imagen principal como texto o imagenses como se deberia estructurar el codigo y de ante mano muchas gracias

    ResponderEliminar
  92. hola buenas disculpa tanto preguntar pero como podria hacer para que la imagen que se refleja en resumen img al dar clic sobre ella te redirecciones a su publicacion correspondiente como lo hace el titulo para cada una pero de modo automatico se podria en blogger de ante mano muchas gracias

    ResponderEliminar
    Respuestas
    1. Este post es antiguo. Creo que te interesarán estos otros más recientes:
      http://www.oloblogger.com/2010/10/sumarios-automaticos-casi-definitivo.html
      http://www.oloblogger.com/2011/03/sumarios-automaticos-sin-javascript.html
      http://www.oloblogger.com/2013/03/sumarios-rapidos-blogger-resumenes.html

      Eliminar
  93. se ven bien pero mi idea es que la imagen que se muestra en el sumaario funciones como si fuera read more

    ResponderEliminar
  94. hola estoy modificando el codigo con ayuda de este http://www.oloblogger.com/2011/03/sumarios-automaticos-sin-javascript.html para incluir en red more en el actual pero se podria que en ves que se viera read more su efecto se aplique en la img que se ve en la caja

    ResponderEliminar
    Respuestas
    1. Claro. Ese mismo código te sirve, pero dónde veas...
      <img expr:src='data:post.thumbnailUrl'/>

      ...sustituye todo eso por...
      <a expr:href='data:post.url' expr:title='data:post.title'><img expr:src='data:post.thumbnailUrl'/></a>

      Eliminar
  95. hola disculap tanto preguntar me funciona bien el truco pero yo lo quiero adactar al codigo de esta entradaa http://www.oloblogger.com/2009/03/estilo-revista-magazine-simplificado.html pero cuando lo introdusco las imagenes se alargan aunque se incorpora la url pero se deforman se podria adactar a la clase resumen o se inplementa otro esque elcodigo de http://www.oloblogger.com/2011/03/sumarios-automaticos-sin-javascript.html me da mas rollo a la hora de ponerle el css y el de resumen no es mas facil y ya lo tengo armado solo eso me flate

    ResponderEliminar
    Respuestas
    1. Titán, ya no sé ni lo que quieres exactamente. Dime en qué dirección tienes eso que hiciste y sobre eso, dime que te falta sin hacer referencia a esas dos publicaciones mías, porque está claro que no quieres ni una cosa ni otra, sino una mezcla que supone algo distinto.

      Eliminar
    2. hola la idea es que la imagen que se muestra en la miniatura tenga el enlace de la publicacion bueno esta es la web donde estoy trabajando lo unico que estoy usando este codigo

      <b:if cond='data:blog.pageType == "index"'>
      <div class='resumen'>
      <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'> <data:post.dateHeader/>
      </h2>
      </b:if>
      <b:include data='post' name='post'/>
      </div>
      <b:else/>

      pero no me el efecto de link en la img el codigo que me mencionastes solo aparece una vez en la plantilla y al remplazarlo no me da efecto pero si lo agrego a este codigo se aplica el enlace pero la imagen se divide en dos partes y el titulo queda en medio lo dejare tal como me da el efecto
      y el codigo que da haci

      <b:if cond='data:blog.pageType == "index"'>
      <div class='resumen'>
      <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'> <data:post.dateHeader/>
      </h2>
      </b:if>
      <a expr:href='data:post.url' expr:title='data:post.title'>
      <img expr:src='data:post.thumbnailUrl'/>
      </a>
      <b:include data='post' name='post'/>
      </div>
      <b:else/>

      no se si se podra hacer de otra forma y de ante mano muchas gracias

      Eliminar
  96. esta es la url seme olvido ponerla http://juegosjava2012.blogspot.com/

    ResponderEliminar
  97. la paguina que con el segundo codigo incluido

    ResponderEliminar
  98. el detalle es que al momento de usar el atributo thumbnail la img se reduce pero al ampliarlo de pixelea y eso le quita atractivo

    ResponderEliminar
    Respuestas
    1. Después de todo eliminas el blog. No imaginas el coraje que me da eso. Voy a empezar a exigir una antigüedad mínima con el blog antes de contestar a nadie :(

      Eliminar
    2. hola no he eliminado el blog solo cambie la url pero estoy usando otro diseño para las entradas y disculpaa que no te halla avisado esque estado algo ocupado y muchas gracias por la ayuda me ha ayudado mucho

      Eliminar
  99. Hola Oloman. He seguido tus códigos para un magazine simplificado y la verdad es que he obtenido muy buenos resultados en mi blog: www. cinegay. org

    Sin embargo, tengo un problema para las etiquetas, ya que me gustaría que se mostrasen una entrada tras otra y no de la misma forma que la portada.

    Por ejemplo, el caso de la etiqueta para la sección del blog dedicada a información: www. cinegay .org/search/label/Info-contacto

    Te pediría alguna condicional o truco para solver esto. Es decir, que cuando vayas a etiquetas de muestre los post completos que hay, como salen por defecto en Blogger

    Un cordial saludo.

    ResponderEliminar
    Respuestas
    1. Hola. Precisamente la condición que puse es para todas las páginas que no sean entradas y por eso te sala así. Es esta:
      <b:if cond='data:blog.pageType != "item"'>

      Para que sólo te salga en el home sustitúyela por esta otra:
      <b:if cond='data:blog.url == data:blog.homepageUrl'>

      Por si necesitas otro tipo de condiciones ahora o en otra ocasión, aquí tienes una guía.

      Eliminar
  100. Oloman una pregunta más. Al poner el formato magazine, cuando haces una Vista Previa de una entrada que estás editando, esa vista previa se ve con el formato de los post de portada. Es decir, se ve como un cuadradito de los post que aparecen en la portada del blog, lo cual estropea la función de vista previa del post en sí. ¿Se te ocurre alguna solución a este problema? Tampoco es que sea de un interés fundamental la vista previa, pero bueno.

    ResponderEliminar
  101. Oloman. Te vas a enfadar... je je. Pero he tenido que quitar el formato magazine, con la téncnica que ofreces. Fue bonito mientras duró.

    Resulta que Internet Explorer no presentaba bien los post en portada. Lo mezclaba todo. A eso tengo que añadir, que me fije que el código fuente de nuestra página principal cargaba TODOS los elementos de los post mostrados, aunque sólo presentase algunos, pero en el código fuente salía todo el texto.

    Ahora tengo una nueva estrategia, que te la dejo por aquí por si te interesa. Consiste en utilizar un POST (sin título visible) en la página principal, en la cual se agregan capturas de pantalla / imágenes de los post a los que enlazan.

    Es una técnica más rudimentaria, pero espero que mejore la carga de la página. Un saludo y gracias por tu ayuda.

    ResponderEliminar
    Respuestas
    1. Eso te irá bien mientras tengas unas pocas entradas, pero ir actualizando a mano es un curro.

      Te propongo un par de alternativas distintas:
      http://www.oloblogger.com/2010/10/sumarios-automaticos-casi-definitivo.html
      http://www.oloblogger.com/2013/03/sumarios-rapidos-blogger-resumenes.html

      Eliminar
  102. hola oloman ya dias no paso por aqui pero tengo un problema uhhhhh es que cuando pongo un fondo a las entradas individuales este se sobre pone sobre la caja del resumen y no se como evitar que eso pase revisa el blog te dejo la url http://pruevaq2012.blogspot.com/ es una vercion de prueba

    ResponderEliminar
  103. disculpa ya lo soluciones lo cambie por http://humanossinsentido.blogspot.com/2009/01/post-resumidos.html pero hay un detalle el mensaje de error 404 ya no aparece y antes salia podrias revisar es en el mismo blog del comentario anterior

    ResponderEliminar
    Respuestas
    1. No, no puedo ver esa parte del código desde aquí, pero echa un vistazo a esto e intenta reponerlo tú: http://www.oloblogger.com/2012/03/pagina-para-error-404-mi-manera-y-la-de.html

      Eliminar
  104. el detalle es que el estilo del magazine desabilita el y no muestra nada ni el mensaje de mostrando entradas cuando realizas una busqueda y tambien quisiera que no se aplicara el magazine en la paginas estaticas y de ante mano muchas gracias

    ResponderEliminar
    Respuestas
    1. Todo eso depende de cómo y dónde se ponen las condiciones, pero el sistema de Pizcos (humanosinsentido) no me lo sé de memoria.

      Eliminar
  105. Hola Oloman, necesito tu ayuda, otra vez :(
    He estado dias buscando como poner mi blog como estilo magazine, pero en rectangulos con imagen y texto, mi blog es http://mjkelectronik.blogspot.com.es/ y saque el script de ciudadbloger, pero como sabes ya no esta y estoy perdida.
    http://ciudadblogger.com/2010/08/entradas-resumidas-estilo-magazine-2.html

    Hice todo lo que sale en ciudadblogger y editado para tener todos los post con el estilo de la primera entrada, necesito ayuda porque no puedo poner en las siguientes entradas la imagen y el texto como en el primero... algo me falla, igual si lo miras tu ves q es algo tonto... help mee

    ResponderEliminar
    Respuestas
    1. Hola. Me resulta bastante más complicado revisar un código para encontrar un fallo, a veces tan pequeño como un punto y coma que sobre o falte, que rehacerlo entero, así que mejor date una vuelta por este post o por este otro. Son dos sistemas distintos de conseguir lo mismo. Toma el que más te agrade.

      Eliminar
  106. Muchas gracias oloman por contestar, en cuanto pueda echare un ojo a los post que me recomiendas. Mas o menos he adaptado el estilo magazine a mi gusto. Bendito sea el firebug, lastima que tenga que usar el firefox para ello, yo soy de chrome.
    Buenas noches y gracias por tu trabajo.

    ResponderEliminar
  107. Hola Oloman, mi pregunta seria... Como puedo hacer para que las imagenes aparezcan de manera resumida y que encuadre justo con el ancho y largo que yo elegi para los post resumidos, osea, que no salgan grandes y/o cortadas; a su vez quisiera hacer que las imagenes (una vez resumidas) sirvan tambien de links para ingresar al post, agregandole un Leer mas.
    En resumen, mi idea es hacerlo como dicta tu post, las entradas resumidas una al lado de la otra, pero con respecto a lo ultimo que te pido (imagenes resumidas y un leer mas), quisiera algo muy similar al post "Imagenes resumidas con imagenes en miniatura" de Ciudadblogger.
    Espero tu respuesta muy atentamente! SALUDOS!!!

    ResponderEliminar
    Respuestas
    1. Y un ultimo pedido...
      Me gustaria que este truco no me afecte en las Paginas estaticas, ya que cuando hago una pagina y me dirigo al link, se ve como uno de los posts, y no quiero eso, quiero que directamente se vea la publicacion, osea todo el contenido.
      Si quieres prueba, para ver lo que te digo... Entra en la publicacion que dice "Solos y solas (mascotas)"

      Eliminar
  108. En la entrada que dice "Solos y solas (Mascotas)" se ve bien, pero eso es lo que quiero lograr con las paginas estaticas... Al contrario, cuando creo una pagina estatica y, estando en la seccion de paginas, hago click en "Ver" de la pagina que acabo de crear y me sale como un post comun, en donde no se puede ingresar a dicha pagina.

    ResponderEliminar
    Respuestas
    1. Disculpame a todo lo que te escribo, pero son cosas que quisiera modificar, y se supone que deberia salir correctamente. Pero acabo de encontrar un grandisimo error, si entras a mi blog, veras que los gadgets estan muy fuera de dentro del blog, obviamente es por el codigo de la publicacion, porfavor si me podrias ayudar en lo que te pido. Perdon nuevamente, se que es muy tedioso pero si me ayudaras te agradeceria muchisimo, el blog esta quedando tal cual lo quiero, pero solo me faltaria solucionar estos errores, espero tus respuestas muy atentamente, y nuevamente mil disculpas.

      Eliminar
    2. Mr. Patan, no puedo ver nada porque has puesto una intro indicando que el blog está en construcción y no hay enlace alguno para poder ver ninguna página creada.

      De todas formas este post es muy antiguo y posteriormente publiqué varios con contenido similar más actualizados. Para evitar los problemas derivados de este sistema te voy a mandar a estos dos, uno con JavaScript y otro sin necesidad de ese lenguaje.

      Si eliges uno de ellos ya sigues comentando allí si te surgen problemas:
      Sumarios rápidos para Blogger. Seis versiones
      Aumarios automáticos. Casi definitivo

      Eliminar
  109. Hola Oloman yo acabo de empezar con esto de los blogs y no tengo ni idea de este lenguaje.

    Lo que quiero hacer para empezar es una página de índice con columnas con imágenes y texto dos pequeñas a los lados y una en el centro doble de ancha para lo más importante. Y que se vea en la versión móvil.

    Mi blog tiene mucho contenido y más que va a tener. Por eso me gustaría un menú de columnas como esos que tienes pero con varios desplegables en cada columna. Y que se vea en la versión móvil

    También me gustaría tener un menú horizontal con mucho colorín y que tenga no sólo una línea horizóntal sino todas las que se pueda, o sea que se vea todo sin dar al botón more.

    Bueno... no sé si todo esto es posible o pido mucho, pero como no tengo ni idea de estos lenguajes e tratado de hacer varias columnas hace tiempo y por mas que he intentado mirar los artículos desde un principio... nada

    ResponderEliminar
  110. Hola Justa. Eso que quieres es posible (de hecho todo lo es), pero lo que propones no es un cambio concreto sino un diseño completo de una plantilla que, por otra parte, es muy laborioso.

    No podría explicarte con el suficiente detalle ni aquí ni en 10 folios, todo lo que hay que hacer para conseguir ese resultado y si además, como dices, no tienes ni idea de HTML y CSS, pues lo más probable es que ni siquiera con esas instrucciones pudieras llegar a hacerlo perfectamente.

    Lo más práctico es que busques plantillas prediseñadas (las hay a montones por Internet) y de entre todas elijas la que más se parezca a tu idea.

    ResponderEliminar
  111. Hola Oloman:
    He colocado las columnas tal y como explicas en el post. Sin embargo al colocar la altura de los post a "auto", cada post tiene una altura diferente, de forma que se descuadra todo. ¿Como podría hacer que dos filas tengan la misma altura (la de la mayor)?
    Muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola. Para eso ya habría que usar flex-box, una propiedad CSS que salió después de este artículo y sobre la que no te puedo informar con soltura.
      De cualquier manera no sé si sabes que las plantillas nuevas incluyen ya de serie sistemas de sumarios... además de ser adaptables para móviles.

      Eliminar