Sumarios automáticos sin JavaScript para Blogger | Oloblogger Hay diversos sistemas para crear sumarios en Blogger y así conseguir que nuestras entradas se muestren resumidas con el consabido "Leer...

9 de marzo de 2011

Sumarios automáticos sin JavaScript para Blogger

Hay diversos sistemas para crear sumarios en Blogger y así conseguir que nuestras entradas se muestren resumidas con el consabido "Leer más" (página principal y de navegación: etiquetas/recientes/antiguas).

Los primeros que descubrimos requieren entrar manualmente algún código extra en los post, como puede ser el caso del viejo truco con la clase .fullpost o del mejorado corte (<--more-->) que Blogger tuvo a bien ponernos en nuestro editor no hace demasiado.

Pero para poder hacer lo mismo automáticamente, sólo nos quedaba o bien hacer una chapuza CSS o bien utilizar alguna utilidad JavaScript que hiciera el trabajo por nosotros.

Sin embargo, en Blogger Buster han tenido la genial idea, de utilizar algunas de las nuevas etiquetas DATA que se han ido incorporando en los últimos meses, para simplificar todo esto.

Tengo que comentar, sin quitarle ni el más mínimo mérito a Amanda, que eché de menos algunas cosillas en el código original y que este que presento más adelante, contiene ciertas modificaciones.

Por ejemplo, no se tuvo en cuenta las páginas estáticas y en estas aparecía también el "Leer más" sin ninguna necesidad. En segundo lugar, aquel código anulaba los more que el administrador hubiera introducido hasta la fecha, dando prioridad al resumen del snippet. Por último, también duplicaba el enlace ya nombrado cuando pre-existía.

A mi parecer, los cortes que alguien haya podido introducir manualmente en una entrada, tienen mucho más sentido, que los resúmenes del snippet, amén de que estos últimos, no suelen pasar de los 150 caracteres. Por ese motivo principalmente, he decidido introducir modificaciones. Al que le venga bien tal y como estaba, siempre puede tomarlo del Blogger Buster.

Y aclarado esto, seguimos...



Se trata de montar una serie de condiciones y usar algunas etiquetas DATA, para mostrar sólo lo que nos interesa, justo dónde nos interesa. Con ello  se puede montar este bonito código que resulta suficiente y sobrado para crear los susodichos sumarios. Sólo hay que buscar en la plantilla (con Expandir plantillas de artilugios marcado) la variable <data:post.body/> y sustituirla por esto otro:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.hasJumpLink'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>

Con esto ya tenemos nuestros sumarios funcionando, pero como seguramente también queramos darle nuestro toque personal, entonces tenemos que recurrir al CSS.

La clase que controla la miniatura es la .thum img, por lo que si la insertamos entre nuestras etiquetas SKIN, podemos hacer flotar la imagen a derecha o izquierda del texto, así como añadir márgenes o bordes. También podemos hacerla más grande añadiendo un WIDTH, pero sin pasarse de píxeles porque la redimensión se hace sobre la miniatura, lo que provoca una perdida de calidad:

.thumb img {
float: left;
margin: 0 10px 10px 0;
}

Actualización: Debido a que Blogger ha cambiado el código que inserta cuando subimos una imagen al blog, la clase correcta para controlar la miniatura sería .item-thumbnail img. Por tanto, el anterior código tendría que ser así para los que tengáis problemas:

.item-thumbnail img {
float:left;
padding: 0 10px 0 10px;
}

Una segunda modificación sería la del aspecto del corte, cosa que ya vimos anteriormente y para lo cual usaremos la clase .jump-link.

Todo esto lo podéis ver funcionando en esta página de demostración.



Y para los que quieran profundizar más...

Algunas de estas variables ya las conocía pero otras no; y realmente vienen de fábula para lo que se pretende:
  • data:post.hasJumpLink (si hay salto 'more' o no en la entrada)
  • data:post.jumpText (el texto que servirá de enlace al 'more')
  • data:post.snippet (texto truncado de cada entrada publicada)
  • data:post.thumbnailUrl (miniatura de la primera imagen de cada entrada)
Y por supuesto, la tan antigua como imprescindible data:post.body, la que recoge todo el contenido tecleado por nosotros en las anotaciones.

La estructura del código comienza por distinguir mediante condiciones anidadas, si estamos (data:blog.pageType) en una entrada (item) o en una página estática (static_page). En estos casos no hacemos nada salvo lo usual, que es imprimir el contenido del post (data:post.body) tal cual.

Ya sabemos que estamos en la página principal o en una de navegación, por lo que lo siguiente es comprobar si hay corte en la entrada (data:hasJumpLink) para si lo hay, dejar actuar dicho corte y tampoco hacer nada especial.

Y ahora entramos en el resto de casos.

<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>

Primero comprobamos si hay resumen generado por Blogger (data:post.snippet), porque si no, tampoco nos molestamos en hacer nada. Descartados todos los casos en que no hay que hacer nada, si hay resumen comprobamos también la existencia de miniatura (data:post.thumbnailUrl) para mostrarla. Por último, dentro de esa misma rama, añadimos el resumen y el código que monta el corte (jump-link). Sumarios listos.

Nótese en la página demo, que cuando la entrada contiene sólo una imagen o un vídeo sin texto, no existe resumen, por lo que se mostrará completa. Sin embargo, en cuanto haya un solo carácter, se verá el Leer más aunque sea innecesario. Ocurre lo mismo cuando hay más de una imagen.

Son casos extremos no habituales, pero se podrían solucionar si existiera alguna DATA que nos sirviera para saber el número de caracteres que tiene un post o encontráramos otro sistema análogo. Otra posibilidad, sería la de poder controlar el snippet. El problema es que yo no conozco ninguna manera ¿A alguno de entre los presentes se le ocurre algo?

¿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

122 comentarios :

  1. Me parece muy interesante, es mas... necesario, no obstante siempre he deseado algo con "post expadibles" y CSS, no un simple link hacia la página item, esperaré hasta que aparezca algo como eso ¿ya lo tienes?, si es así por favor publícalo.

    ResponderEliminar
  2. Woooooow, funcionó... lo recomiendo mucho pero quizá solo para las páginas de etiquetas y archivos (para eso hay que modificar el código), ya lo estoy poniendo en práctica y está deeeee lujo, muchas gracias, :D :D :D

    ResponderEliminar
  3. Brillante, realmente exquisito... a la larga en las etiquetas y archivos lo único que hay que agregar es esto: <img expr:src='data:post.thumbnailUrl' style='float:left;margin: 0 10px 10px 0'/><data:post.snippet/> (disculpa tantos comentarios, :D)

    ResponderEliminar
  4. No hay nada que disculpar Víctor. Como dicen en algunos sitios, "Un blog se alimanta de tus comentarios".

    Pero no entiendo ese código que comentas. En un principio, el que dí debería funcionar bien para etiquetas y archivo ¿O querías decir otra cosa?

    ResponderEliminar
  5. Que hay de el Sumario automatico con javascript? solo elimino el código y listo? este no interviene con paginas de blogger?

    Saludos Oloman

    ResponderEliminar
  6. Mi Jump Link lo tenia con una imagen > pero ahora ya no sale mas que el Texto *Continue*
    hay manera de agregarle la imagen a los nuevos posts?

    ResponderEliminar
  7. A perdon, olvidaba el link del blog, es ozlo.blogspot.com

    ResponderEliminar
  8. Bueno olvida lo de el jump Link y aencontre tu guia en modificar el aspecto del jump link.
    Ahora en mi blog de wii4everybody.com no me salen las imagenes del Thumb en los sumarios y al darle clic en los enlaces de jump link me abe el post pero me pone doblemente el contenido D:
    Ayuda! xD

    Saludos!
    Ozl

    ResponderEliminar
  9. De nuevo aqui molestando! xD
    Ya resolvi lo del doble contenido, era porque tenia dos veces el

    Pero aun sigo sin ver los thumbs, deben de ser imagenes especificas de blogger o de otros hosts? o es cosa del codigo que no entiendo aun? xD

    Saludos gente!
    Ozl

    ResponderEliminar
  10. Ozl si tienes el código antiguo, sólo hay que borrarlo (con cuidado de no eliminar ninguna otra cosa). Con respecto a las páginas, este código no se ejecuta en ellas, precisamente para que no aparezca el "leer más" cuando accedas a ella.

    Para que se vean las miniaturas, las imágenes tienen que estar subidas a Blogger.

    ResponderEliminar
  11. Muy bien, gracias por el dato Oloman! xD

    ResponderEliminar
  12. Hola Oloman,
    hace tiempo que estoy inscrita y recibo tus correos del blog con mucho interés, por lo que te doy las gracias. Yo soy de las "muy torpes" y almaceno en una carpeta, "solo para ti", tus indicaciones para cuando sepa algo más.
    Tengo un gran problema y no he encontrado tu mail para no hablarlo por aquí. Yo grabo con mi voz, lo subo a goear.com y luego lo incluso en mi página para que lo oigan. Desde hace unos días... ha dejado de funcionar en mi página o en la de otros que a veces cogen el código para subirlo a sus blogs, NO así en la de goear y no sé a quién acudir. No quiero molestarte, de verdad, pero eres mi única opción.
    Te dejo mi correo personal: bsalas04@hotmail.com y espero tus noticias, si puedes.
    Un fuerte abrazo
    Beatriz

    ResponderEliminar
  13. Hola! Oloman! Genial ya le estube metiendo mano, pero tengo unas dudas como tendria que hacer si quiero que todo se resuma osea hasta las entradas con una imagen suelta o un video suelto? Y tambien como poner una imagen predetarminada que aparesca en el thumbnail cuando no hay imagen en el post?

    Saludos!!!

    ResponderEliminar
  14. Beatriz, he estado funcionando y son tus audios los que no funcionan bien. Lo hacen en la web de Go Ear, pero no cuando se incrustan en otro sitio. Eso no me ha pasado con otros audios de otros usuarios. Por tanto, en un principio sólo se me ocurre que en tus opciones de configuración o al subir el audio, marcas algo que los haga no-reproducibles fuera del sitio, privados, o algo así.
    No se me ocurre otra cosa porque no suelo usar ese servicio.

    ResponderEliminar
  15. Muy buena idea la de Amanda, y con tu habilidad ya conocida, ha mejorado el asunto, bravo por los 2!;...seguramente se le paso lo del enlace repetido que mencionas.

    Un Saludín ;)

    ResponderEliminar
  16. Veo que tiene muchas posibilidades, me gusta la idea con el more ... pero lo dejo para mañana que con tanta chachara se me a hecho tarde ;)
    Gracias

    ResponderEliminar
  17. @Oloman: Ja, ja, muchas gracias, lo que pasa en mi caso es que no quería utilizar todo el código porque no lo utilizaría en la página principal sino solo en las etiquetas, pero ya lo modifiqué y me quedó muy bien, :D :D

    ResponderEliminar
  18. Oloman Hay alguna manera de realizar lo que pregunte en el comentario anterior?

    Saludos!!!

    ResponderEliminar
  19. Perdón. Se ve que publicaste justo cuando yo y no vi tu comentario anterior Bilosony2.

    Creo que sí. Voy a verlo y si encuentro una buena manera que no complique mucho este código, lo publico.

    ResponderEliminar
  20. Buenas.

    El truco es bastante útil y fácil de utilizar. En nuestro blog hemos logrado que se vieran los sumarios en la página principal. No obstante, queremos cambiar el tamaño (o alineación) de las fotos que salen en portada, y no nos queda muy claro en este artículo. ¿Cómo podríamos hacer para que la imagen estuviera alineada junto al texto?

    Gracias de antemano.

    ResponderEliminar
  21. Para que la imagen flote junto al texto KevinLajoie, tienes que insertar en la parte de estilo (CSS) de tu plantilla, el segundo trozo de código (el más pequeño), que se explica en este post.

    ResponderEliminar
  22. get here from bloggerbuster. your changes was great..

    ResponderEliminar
  23. Wow! :) Thank you Phycrewz.com

    ResponderEliminar
  24. Hola Oloman, tengo un problema con mi blog "Notas, apuntes y reflexiones" que no sé resolver. Paso a contarte:
    La plantilla tiene ya incorporada por css una cómoda opción de resumir los artículos. Las páginas aparecen resumidas en el inicio del blog, incluso, efectuando una búsqueda, las entradas resultantes salen resumidas y no tienen ningún problema en abrirse.

    Lo extraño del caso surge con dos páginas creadas independientes, cuyos enlaces he puesto en la parte superior del blog, una de contacto, que llamo autor, y otra dedicada a Ramón Gómez de la Serna. Estas páginas no se abren por más que puedas cliquear en el título o a "leer más".

    Te pido consejo para entender como solucionar esto.

    Un saludo

    ResponderEliminar
  25. Eso es cuestión de la manera en que estén montados las condiciones Pedro Donaire. Casi nadie se acuerda de las páginas estáticas. Aunque seguramente tengas que cambiar el contenido de cada parte condicionada, el esquema de condiciones de este mismo post te sirve, ya que se explica un poco lo que hace cada parte. Si necesitas un código concreto para copiar y pegar, entonces quizás te valga este otro enlace:
    Sumarios automáticos casi definitivos

    ResponderEliminar
  26. oh! genial! no importa si se complican las cosas mientras el resultado sea el deseado :D
    Lo esperare con muchas ansias!!!

    Saludos!!!

    ResponderEliminar
  27. Lo de la imagen en el caso de que no haya miniatura es fácil Bilosony, pero lo del vídeo no sé cómo hacerlo.

    Esta es la parte de la miniatura modificada:
    <b:if cond='data:post.thumbnailUrl'>
    <div class='Image thumb'>
    <img expr:src='data:post.thumbnailUrl'/>
    </div>
    <b:else/>
    <img src='URL_IMAGEN_ALTERNATIVA'/>
    </b:if>

    ResponderEliminar
  28. Hola oloman te felicito por tu buen blog he aprendido mucho de ti y ya te enlace hacia mi web,tengo una preguntica y quiciera que me ayudaras por favor disculpa que no sea relacionada con este post pero necesito que me ayudes ,yo quiero optener un color picker asi como esta en esta pagina http://www.colorpicker.com/ o otra como quieras lo que pasa es que no se que codigo poner en otos lugares me da la opcion de descargar pero despues nose que es lo que debo hacer si por favor me pudieras ayudar con esto y si supieras el codigo completo cosa que sea ponerlo y ya me salga ,e intentado de muchas maneras pero nada ,gracias de antemano jorge

    ResponderEliminar
  29. Jorge, si lo que quieres es hacer algún programilla para mostrar en tu sitio una paleta de colores como la que me enlazas, ahí no te puedo ayudar, porque no sé cómo hacerlo.

    Por lo que he visto en el código fuente, en esa página que me envías lo han hecho con un JavaScript.

    ResponderEliminar
  30. Hola, genial el post! me ayudo bastante con mi blog. Ahora me pregunto si seria posible que la miniatura que aparece junto con el sumario sirviera como link hacia el articulo principal. Actualmente si hago click sobre la miniatura no me lleva al articulo osea no posee un hipervinculo . Gracias espero que exista alguna solucion.

    ResponderEliminar
  31. No lo he probado LarukuInsane, pero creo que debería funcionar esto. Cambia...

    <img expr:src='data:post.thumbnailUrl'/>

    ...por...

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

    Ya me cuentas.

    ResponderEliminar
  32. thanks solo..........ur updated code helpd me....

    ResponderEliminar
  33. Hola de nuevo,
    He seguido los pasos que indicas en esta página y todo funciona de maravilla, pero...me gustaría que la página principal se quedara tal y como estaba antes, sin ''leer más''. Es decir, que solamente la página con las etiquetas tuviera las entradas cortas. Se puede modifcar esto de alguna manera?
    Este es mi blog>
    www.teach-english-technology.com

    ResponderEliminar
  34. Emilia, si te he entendido bien, este sería el código en lugar del que puse en este post:

    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <b:if cond='data:post.hasJumpLink'>
    <data:post.body/>
    <b:else/>
    <b:if cond='data:post.snippet'>
    <b:if cond='data:post.thumbnailUrl'>
    <div class='Image thumb'>
    <img expr:src='data:post.thumbnailUrl'/>
    </div>
    </b:if>
    <data:post.snippet/>
    <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
    <b:else/>
    <data:post.body/>
    </b:if>
    </b:if>
    <b:else/>
    <data:post.body/>
    </b:if>

    ResponderEliminar
  35. Hola de nuevo, Oloman, te escribo por desesperación,porque no sé a quién dirigirme con mi problema.Resulta que mientras que las páginas de mi blog salen bien, los posts had desaparecido y todo se ha descolocado: http://www.teach-english-technology.com/

    Esta página es mi projecto fin de máster que tengo que defender el sábado que viene. No tengo ni idea que ha pasado? Te lo agradecería mucho si me ayudaras, por favor. Por cierto,todos los posts están en el dashboard tal y como estaban.
    Gracias de antemano y perdona las molestias!

    ResponderEliminar
  36. Eso es alguna condición mal puesta, que hace que los posts individuales no se muestren, pero el problema es que yo no puedo verlos desde aquí. Necesitaría ver la plantilla completa Emilia. ¿No guardaste una copia de seguridad anterior al último cambio que hiciste?

    ResponderEliminar
  37. Hola otra vez y gracias por tu respuesta, el problema es que he utilizado la misma plantilla en otro blog que he monté ayer y...funciona todo perfectamente bien. Es decir, he copiado y pegado la plantilla del primer blog y luego he importado los posts.

    Puedo conformarme con el nuevo blog, pero sí he perdido la dirección del primer blog que estaba puesta en la tesina, así que estoy un poco preocupada.

    Se te ocurre que ha podido pasar? Si eres tan amable y podrías echarle un vistazo a la plantilla, te lo agracedería (de ser así, cómo te la mando?)

    GRACIAS!

    ResponderEliminar
  38. Emilia, la tienes que descargar en formato .xml Luego envíamela al correo olobloggerblog de gmail.com

    ResponderEliminar
  39. Hola por desgracia el truco que colocas hace que mis navegadores apunten que son ataques de scripts porque?

    Podrias colocar un ejemplo con imagenes de que borrar para pegar el codigo por que las personas que somos nuevas ni idea de como hacerlo si solo colocas lo que debemos intercambiar porque...
    ¿hasta donde borramos?

    ResponderEliminar
  40. Al principio tienes una explicación de lo que vamos a hacer, luego el código que hay que sustituir por data:post.body (se explica en esa parte) y por último, una explicación más detallada de lo que consigues con esto.

    Si quieres ir al grano y no te importa no saber cómo funciona todo, sólo lee lo que hay entre las dos líneas de división horizontales y sigue las instrucciones. Es la parte central de la entrada.

    ResponderEliminar
  41. Interesting article and very helpful. thanks

    ResponderEliminar
  42. You are welcome Sky Adsense ;)

    ResponderEliminar
  43. Hi,

    First of all, I would like to thank you this very useful tutorial.

    I would just like to ask two things.
    1) how to make the thumbnail bigger? Like the second post in your sample blog (http://sumariossinjavascript.blogspot.com/ - La Misma Entrada con "more"); and,

    2) How to make the snippet go longer?

    If you would check my site, www.eventuallyco.com. I only showed 2 posts per page you can view other posts by clicking the older posts.

    The page shows a thumbnail and a short sentence. I added your code and it worked perfectly. But I want to make the image slightly bigger and add more characters.

    Thank you for your help in advance.

    ResponderEliminar
  44. Thanks Oloman..this code works for my blog

    ResponderEliminar
  45. Apparel, I'm glad it has been useful for you.

    ResponderEliminar
  46. Eventually, I regret not having answered before, but your comment was right to the spam folder.
    1) That post is cut with MORE and therefore does not execute the code to display summary and thumbnail and it bypasses the condition.
    2) I have not found a way to make that

    To do what you want, you might like this other post: LINK

    ResponderEliminar
  47. mi blog: http://360depolitica.blogspot.com/
    disculpa, soy muy nuevo en mi blog y trate de colocárselo pero no me funciono, hice lo que dice esta pagina: http://chicablogger.com/distintas-maneras-de-poner-excerpts-leer-mas-en-blogger/

    como no me funciono quisiera saber como lo hago a través de tu método
    1) solo pongo el primer código que sale en este post para hacerlo?

    2) quisiera colocar este botón para el leer mas http://chicablogger.com/leer-mas-en-blogger-%C2%A1al-fin/ pero en color azul claro, como lo hago...?? te agradeciera tu respuesta...muchas gracias por todo y feliz navidad

    ResponderEliminar
  48. Daniel. Para este sistema sólo tienes que hacer lo que se explica al principio, es decir, sustituir el data:post.body por el código que se facilita. Todo lo demás son explicaciones para que sepáis que hace todo ese código.

    Con respecto a lo del botón de corte, aquí lo tienes explicado "a mi manera": Enlace

    ResponderEliminar
  49. Hola tengo un problema, el CCS no me va, lo agrego en el diseñador de plantilla y no cambia nada.
    E cambiado todos los parametros pero eso no cambia :(
    Gracias

    ResponderEliminar
    Respuestas
    1. Prueba a usar esta otra clase, que hubo un cambio en el código que blogger usa para las imágenes:
      .item-thumbnail img {
      float:left;
      padding: 0 10px 0 10px;
      }

      Eliminar
    2. He puesto el CCS y sigue sin irme :(

      Eliminar
    3. No controlo las plantillas del nuevo diseñador. Añade el código antes del cierre del SKIN, directamente en la plantilla. Si sigue sin funcionarte, incorpora a cada propiedad un !important:

      .item-thumbnail img {
      float: left !important;
      margin: 0 10px 10px 0 !important;
      }

      Eliminar
    4. Nada que sigue sin funcionar ¬¬...
      Hay que cambiar algo en el data:postbody

      Eliminar
    5. O has usado el código de otro o has improvisado. El código que puse la miniatura va bajo la clase .thumb y tú has puesto .thumbnail. Prueba esos mismos códigos con .thumb. Si te sigue sin funcionar es porque quizás algún otro código de tu plantilla utiliza esa misma clase. En ese caso, cambia en el script "Image thumb" por "thumbale" (por ejemplo y luego las propiedades se las asignas a .thumbale img

      Eliminar
  50. Hay alguna forma de quitar la linea de guiones que sale al usar el <--more-->

    http://garabatosdehumor.blogspot.com/

    Gracias

    ResponderEliminar
    Respuestas
    1. Esa línea no tiene nada que ver con el salto. La tienes de forma fija como división para el pie del post. Aquí:

      .post-footer {
      margin: 10px 0 0;
      padding: 10px 0 0;
      color: black;
      border-top: dashed 1px #666;
      }

      Ese border-top es el que te la crea.

      Eliminar
    2. ok gracias ahora a ver si consigo quitar la que sale en el archivo

      Eliminar
    3. .widget ul li, .widget #ArchiveList ul.flat li {
      padding: .35em 0;
      text-indent: 0;
      border-top: dashed 1px #666;
      }

      ;)

      Eliminar
  51. Hola, sabes que tengo un problema con esto, estoy haciendo una plantilla con estos resúmenes, me funcionan bien. Pero estoy ejerciendo la acción del "FirsPost" por que haré un post principal y dos columnas de posts.

    Todo va bien hasta ahí, sale el post principal y la dos columnas, pero se repite un post. Ya que el principal sale arriba con los estilos que le proporcioné, pero en las columnas también sale y lo demás todo bien.

    Si me puedes ayudar, porfavor!

    Saludos.

    ResponderEliminar
    Respuestas
    1. Me hizo mucha gracia tu post de prueba "dedicado" XD ¿Entonces está resuelto o no? Por lo que vi me parece que no.

      Si se repite el post, seguro que es porque no estructuraste bien las condiciones. Si quieres pasa esa parte del código a texto plano y la pegas en un comentario para que le eche un vistazo.

      Eliminar
    2. Todavía no se soluciona, no logro encontar el error.

      Eliminar
    3. ¿Y que dije yo que hicieras en mi última frase del anterior comentario?

      Eliminar
  52. Hi ,
    I tried change the width of the image to bigger but the quality went pretty bad.
    I want to resize the thumbnail like 288px and to keep the image quality good..

    How?

    ResponderEliminar
  53. hola oloman, me gusto mucho el post, solo una pregunta, ¿como mostrar mayor numero de caracteres (letras) en el sumario?

    te estaré muy agradecido si me ayudas oloman ;)

    ResponderEliminar
    Respuestas
    1. Si quieres que se vean más que los que proporciona el snippet ese -que realmente son pocos- sólo puedes hacerlo insertando el <--more--> en las entradas. Una de las condiciones que incluye ese código de la entrada es que si existe ese tipo de corte, que le de prioridad.

      Si no quieres usar MORE ya no te queda más remedio hoy por hoy, que acudir a Javascript. Aquí tienes un ejemplo con el que puedes configurar cualquier número de caracteres, aunque como comento, es algo más pesado de ejecutar que este: Sumarios automáticos casi definitivos

      Eliminar
  54. First of all, I would like to thank You This very useful tutorial.

    Is there is any way to change data:post.snippet to post description (meta description)?
    Please help me

    www.linkstoweb.in

    ResponderEliminar
    Respuestas
    1. No. Note that META tags are part of the HEAD and can not be read from the posts area. Its usefulness is another.

      Eliminar
  55. buenas Oloman, yo empece a usarlo desde que lo pusiste, pero ahora quiero hacer unos cambios y me he dado cuenta de algo.
    He juntado el codigo de este post, con el de cambiar el tamaño de las miniaturas y se queda perfecto, pero... cuando utilizo a parte la etiqueta MORE para algun post especifico por que quiero mostrar algo mas, pues me sale dos veces la misma imagen, una la miniatura que genera blogger, y otra la original que subo al post.
    ¿Alguna forma de solucionar esto?
    Gracias de antemano.
    Saludos...

    ResponderEliminar
    Respuestas
    1. Tendría que ver cómo montaste lo de agrandar las miniaturas sobre lo de los sumarios, pero en un principio eso debe ser porque la llamada al script de ampliarlas está justo antes o después de data:post.thumbnailUrl y entonces te "imprime" la de esa variable y la del script.

      Por cierto, yo también he jugado alguna vez con Pedro Garre ;)

      Eliminar
    2. Anda!!! que pequeño es el mundo!!! Gran persona D. Pedro,ahora tendre que preguntarte otra cosa ¿le ganabas? jajaja.

      hablando del tema del comentario, enefecto he comprobado cambiando de sitio la llamada a la miniatura y si esta en su sitio original no se duplica.

      Es que la tenia puesta encima del titulo del post, que es donde me gustaria colocar la miniatura, pero si la coloco ahi se duplica.

      No se si se te ocurre algo!
      Saludos...

      Eliminar
    3. No, claro que no (ganar a Pedro), pero como no sé jugar a su nivel y él no lo sabía, lo desconcerté mucho y tuvo que pensar de más :)

      Y como tienes varios blogs, no sé en cuál quieres hacer eso ¿Puedes especificar?

      Eliminar
  56. Hola Oloman, como tu me recomendaste utilicé este código sin javascript (he leido que entre menos script mas rápido se carga el blog), lo implementé y funcioan muy bien. Utilicé un truco del Potro para que el primer post se mostrara complento. Quisiera ahora modificar los estilos .. como mostrar solo el titulo personalizado, quitar cosas que me aparecen debajo como publicado por, comentarios, etiquetas...en fin quiero hacer al que solo me muestre el titulo del post y que los usuarios den clic sobre el para leer más. muchas gracias por tu ayuda.

    ResponderEliminar
  57. Hola Oloman, bueno despues de unas 2 horas, logré desaparecer el footer, de los resumenes de las etiquetas, pero aun no logro que todo me salga dentro de un recuadro y que el texto me salga al lado de la imagen en miniatura, Auxilio!.

    Te agradezco mucho la ayuda que me puedas dar

    ResponderEliminar
    Respuestas
    1. ¿En qué blog estás haciendo esto que vea cómo vas y te pueda indicar lo que te falta?

      Eliminar
    2. Hola Oloman!, en mibloginblogger.blogspot.com.

      Allí le quité las imagenes, quiero dejar solo el título pero no he podido
      Muchas gracias

      Eliminar
    3. Esta línea es la que genera el texto-resumen, así que si sólo quieres dejar el título la debes quitar:
      <data:post.snippet/>

      Y después echa un vistazo a este otro post por si te interesara también ;)

      Eliminar
  58. Hola, Oloman. Me gustaría usar este truco para todas las entradas menos para la última publicada. ¿Cómo podría hacerlo? Gracias.

    ResponderEliminar
    Respuestas
    1. Tendrías que usar una condición como esta:
      <b:if cond='data:post.isFirstPost'>

      ¿Sabrías anidarla tú o necesitas que te detalle?

      Eliminar
    2. Necesitaría que me detalles, Oloman. Gracias nuevamente.

      Eliminar
    3. Vale. Hago un post y así desarrollo varios casos, que es un poco largo para un comentario.

      Eliminar
    4. Bueno, estaré esperando con ansias. Saludos.

      Eliminar
    5. Esta misma semana lo publico... ;)

      Eliminar
    6. Gracias por el aviso, Oloman. De todos modos me suscribí a tu blog por correo electrónico, para enterarme cuando lo publiques y para saber a futuro de tus últimas novedades.

      Un saludo.

      Eliminar
  59. Buenas! Antes de nada, felicidades por esta Weblog. Es genial. Muy bien explicado.

    Me gustaría aportar mi granito de arena a raiz de un problema que tuvo algún usuario más de los que comentan.

    Al insertar el código para la modificación del SUMARIO va todo bien.
    Luego al querer modificar la imagen en miniatura, por ejemplo, no funcionaba.

    Incluso revisando los "thumbnail" por si estuvieran capados por otro elemento.
    No era así en mi caso, lo cual seguí mirando y para la modificación de la imagen en miniatura abría que irse a esta parte:

    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
    float:right;
    padding: $(image.border.small.size);

    Aqui se modifica el "float" o "padding" o lo que se necesite. Y asi si me funciona.

    Un saludo desde http://www.3bfactoriacreativa.com/

    ResponderEliminar
  60. He insertado el texto tal cual, Olo, con los condicionales y demás, pero no se me muestran los sumarios. Y la verdad es que no se me ocurre el porqué.

    =S

    Ni siquiera he querido hacer las modificaciones de aumento de las miniaturas (que se alojan en el post http://www.oloblogger.com/2012/03/miniaturas-para-sumarios-mas-grandes.html), para comprobar que funcionaba primero correcto. Y nada...

    ResponderEliminar
  61. Holaa, Oloman! Tu blog es de gran ayuda pero me surge una duda que no he podido solventar, ¿Se puede hacer que "leer más" lleve al inicio de la entrada? Cuando hago el corte, "more" me lleva justo al corte de lo que quiero mostrar en resumen pero me gustaría que llevase al inicio, como si le diese al título de la entrada. Muchas gracias por tu ayuda.

    ResponderEliminar
    Respuestas
    1. Es posible que se pueda cambiando el código, pero sinceramente, no sé cómo hacerlo... todavía ;)

      Eliminar
  62. holaa e pusto los codes en mi plantilla pero no sale Leer más con miniatura de imágen me podia mirar haber por que?grasia

    ResponderEliminar
    Respuestas
    1. Hola. Ya he visto que lo has hecho con JavaScript, pero por si todavía quieres probar sin ese lenguaje, probablemente es que hayas sustituido el data:post.body equivocado. Hay dos en la plantilla. Uno para la plantilla móvil y otro para la web "normal". Creo recordar que el de web es el segundo que te encontrarás.

      Eliminar
  63. Querido amigo, te vuelvo a molestar. Como te dije en el mensaje GRACIAS porque funcionó muy bien, pero me da problemas de paginación. Sin embargo este http://fanaticadeltejido.blogspot.com/ QUE NO ES MÍO, hace lo que yo necesito VARIAS ENTRADAS EN LA PÁGINA PRINCIPAL y no tiene problema de paginación. Lo intenté con la plantilla que lo hizo pero debe haber modificado algo porque la plantilla originalmente no tiene esa virtud. Puedes ayudarme? Gracias esperaré tus comentarios. Abrazo

    ResponderEliminar
    Respuestas
    1. Artesa, lo siento pero no me acuerdo cuál fue tu otra consulta y mucho menos dónde está para volverla a ver. Atiendo muchos comentarios y no puedo recordarlos todos, pero sospecho que hablamos de sumarios CON JavaScript y no de estos que se explican aquí.

      Los primeros tienen el problema de que se cargan las entradas enteras y luego se comprimen, con lo que el peso de las páginas es el máximo, el del total de entradas cargadas. Cuando ocurre eso Blogger "auto-pagina" el Inicio del blog, de manera que recorta cierto número de entradas (a su criterio) en función del peso total de la página, si este excede de lo que ellos consideran.

      Por tanto puede que en dos blogs con la misma plantilla pasen cosas diferentes y en uno recorte más y en otro recorte menos posts. Y la mala noticia es que si es eso, no lo puedes solucionar. Bueno sí, con este otro sistema que se explica en esta entrada y que no usa todos los datos de una entrada, sino sólo algunos concretos.

      Eliminar
    2. Anónimo6/9/13, 0:10

      Gracias por tu respuesta. La otra consulta fue hecha en CONTACTO y la respondiste desde tu móvil, quizás por eso no la recuerdas. Veré de aplicar sumarios CON JavaScript y te cuento. Abrazo

      Eliminar
    3. Querido amigo soy Artesa. Lo de los sumarios CON JavaScript salió bien pero el tema de paginación de Blogger es macabro. Esto me obligó a mostrar las imágenes desde PicasaWeb. Por ahora solucionado. Abrazo

      Eliminar
    4. Nadie es perfecto... ni nada ;)

      Eliminar
  64. Hola, como puedo hacer más largo el snippet sin javascipt, hay alguna manera, porque por defecto es muy corto? :D

    ResponderEliminar
    Respuestas
    1. Hoy por hoy no sé la manera de hacerlo más largo si no es usando JavaScript.

      Eliminar
  65. Tengo el siguiente problema, con los posts funciona excelente, pero cuando entro a una Pagina me aparece como una entrada resumida con la opción leer mas, y al hacer click en leer mas, no pasa nada, es como si se renovara la pagina presionando F5

    ResponderEliminar
  66. Lo más probable es que no pusieras este código exactamente igual o que lo hicieras dónde no corresponde. Precisamente incluye una condición que es...
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    ...para que no se ejecute el resumen en páginas estáticas. El código está comprobado, así que tiene que ser la forma en que lo copiaste como dije.

    ResponderEliminar
  67. Hola Oloman, en mi blog tengo indicado que se presenten 10 post en la entrada principal pero solo me aparecen 6. En principio pensé que me había equivocado en el código pero todo está bien, por allí leí que esto los hace automáticamente blogger para que el blog no sea lento al cargar pero yo no veo baja velocidad en la carga del blog. tu me podrías ilustar si puedo corregir este problema?,.. muchas gracias

    ResponderEliminar
  68. Hola. Con este código no debería recortarte Google el número de post, pero no estoy seguro de que sea este el sistema de sumarios que utilizas. De todas formas la cosa se soluciona si añades a los posts un corte <!--more--> en un sitio razonable para que no interfiera con el sistema de sumarios (tras unas 8-10 líneas).

    Prueba a ponerlo en los 10 más modernos que tengas publicados a ver si te funciona.

    ResponderEliminar
  69. Hola Oloman, los sumarios automáticos es incompatible con paginación?
    En page-navi tengo 4 entradas por página al igual que en la configuración de entradas de blogger.
    ¿cómo hago para que se me ponga en 2 columnas?
    Cambio el tamaño de los post, de la imagen y el número de caracteres pero se me pone uno debajo del otro.
    Muchas gracias.

    ResponderEliminar
  70. No Libertad, no son incompatibles con la paginación y además te saldrán cuatro entradas, lo mismo que tienes programado sin esos sumarios.

    Para lo de las dos columnas ya no hay una solución general que te pueda dar rápidamente por aquí, pero en un principio la mayoría de trucos consisten no sólo en cambiar el tamaño de los posts, sino en añadirles también un FLOAT.

    ResponderEliminar
  71. Estimado genio, hay forma de configurar la longitud que blogger lee en el snipped?
    Pq el tag: "data:post.snippet" devuelve 101 caracteres.
    Hay forma de hacer que devuelva más?

    ResponderEliminar
    Respuestas
    1. No. Que yo sepa no hay forma de alargar ese resumen. Para más caracteres hay que recurrir a JavaScript.

      Eliminar
  72. Buenas tardes, mi problema esque tengo dos codigos en mi html muy juntos, nosé cual es el que se tiene que cambiar...
    Quiero que en mi página de ''BLOG'' se vean todas las entradas como la pagina de demo que has publicado (Foto más titulo) y nada más.
    Lo he provado pero se queda igual... me puedes ayudar?
    Gracias!!!!

    ResponderEliminar
    Respuestas
    1. No sé lo que quieres conseguir exactamente, Imanol, pero si es que sólo salga título e imagen, sin resumen de texto, el código sería el mismo pero sin la línea <data:post.snippet/>

      Eliminar
  73. ¡Qué tal, Oloblogger!
    Quisiera saber cómo quitarle el marco blanco a la imagen y que se pueda agradar de tal forma que el título de la entrada queda a la izquierda de dicha imagen.
    Saludos.

    ResponderEliminar
    Respuestas
    1. Dame una dirección dónde lo tengas montado y veo que se puede hacer.

      Eliminar
  74. He sustituido thumbnailUrl por firstImageUrl y quedan geniales. Muy buenos los resúmenes sobre todo porque no suponen una carga extra. Gracias.

    ResponderEliminar
    Respuestas
    1. Sí, esa es una opción que surgió después de escribir esta entrada y para casi todos los casos parece mejor.

      Eliminar
  75. Hola Oloman, quería preguntar, cómo puedo hacer ésto del jump automatico, sin que mi fotos se vean afectadas, es decir que aparezca mi foto en el tamaño que la dejo, con su texto abajo y de ahí el jump.

    ResponderEliminar
    Respuestas
    1. Para eso tienes que prescindir de los sistemas que hacen sumarios. Simplemente añade dónde quieres que se corte el post para portada, estos símbolos: <!-- more -->

      Eliminar
    2. Pero no se puede hacer automático? cómo por ejemplo este template http://demo.themexpose.com/?theme=Feminist

      Eliminar
    3. Todo o casi todo se puede hacer automático, pero me preguntaste como crear el corte automático sin que se vieran afectadas tus imágenes y esa que te dije es la manera. Además es la más simple para tí.

      Cualquier otro sistema te recortará las imágenes, salvo que SIEMPRE las pongas exactamente del mismo tamaño y programes esos sumarios para que no recorten.

      Eliminar
  76. Hola Oloman. Me gustaría saber como puedo poner las entradas resumidas en dos columnas siendo la primera entrada más ancha, y además cambiando el fondo de las entradas resumidas, es decir, tal y como lo tienes tú jejeje.
    Gracias por adelantado.

    ResponderEliminar
    Respuestas
    1. ES complicado detallarte Treviño, pero te dará la idea de cómo se hace.
      Lo primero de todo sería desagrupar los posts tal y como se explica en el enlace.
      A partir de ahí todo es CSS contralando la clase .date-outer:

      .date-outer {width: 50%; height: 200px;float:left;}
      .date-outer:first-child {width: 100%;}

      Eliminar
    2. Pensé que ya no iba a poder hacerlo y tiré de template nuevo jajaja. Aunque seguro que en el futuro me servirá, pues no me gusta mucho depender de templates externos a blogger.
      Muchisimas gracias por contestarme y compartir libremente tus conocimientos aquí. La de cosas útiles que se aprenden! Larga vida a Oloman y su blog!

      Eliminar