Sumarios rápidos para Blogger. Seis versiones | Oloblogger Siempre me cuesta poner un título a las entradas que publico para que sean explicativos y al mismo tiempo no demasiado largos, pero me sale ...

7 de marzo de 2013

Sumarios rápidos para Blogger. Seis versiones

Sumarios sin JavaScript
Siempre me cuesta poner un título a las entradas que publico para que sean explicativos y al mismo tiempo no demasiado largos, pero me sale regular y por eso tengo que ir casi siempre explicando en primer lugar qué veremos tras ellos.

En este caso lo de rápidos intenta hacer alusión a dos características distintas del código que pondré más adelante. Por un lado que los sumarios se montan sin necesidad de JavaScript, simplemente aprovechando algunas etiquetas data que Blogger utiliza.

Eso hace más ligera la carga de las páginas de navegación porque no se cargarán todas con su correspondiente contenido, sino sólo un breve resumen de cada una. Y con respecto a hacerlo con JavaScript, pues el argumento es el mismo, ya que para resumir con ese lenguaje primero hay que cargarlo todo y luego se acorta.


Y rápidos también porque esto va a ser prácticamente cuestión de copiar y pegar, pues ya vimos en la segunda mitad de esta otra entrada para qué servía cada parte y allí podéis acudir si lo necesitáis, así que sólo esbozaré un poco cómo funciona esto.


Blogger usa data:post.body para almacenar el contenido de cada post y eso es lo que aparece en una plantilla sin modificar para escribir dicho contenido, tras el título y antes del pie de post. Lo que haremos para crear los sumarios será usar otras variables data distintas que contienen lo imprescindible para lo que queremos lograr: una miniatura, un pequeño resumen y el enlace a la entrada (Leer Más).

Por tanto, indirectamente ya he dicho dónde habría que pegar todo este código: en lugar de <data:post.body/>. Sólo hay que tener cuidado con hacerlo con la que corresponde a las plantillas normales (no la de móviles).


Pero tendremos que echar mano además de una serie de condiciones para que todo salga bien, pues no queremos resumir en todas partes sino sólo en la página de Inicio, en las de Archivo y en el resto de las de navegación.

Además tendremos que comprobar entre otras cosas si las entradas a resumir tienen incluido el corte <!--more--> para que este no se duplique.

Si añadimos la posibilidad de no comprimir los posts para cuando exista ese corte y también el poder mostrar la primera entrada de cada página completa, pues el anidamiento de condiciones se complica un poco. Pero sin miedo, que las condiciones anidadas son sólo una sucesión de puertas que nos van marcando el camino en una dirección u otra.

Barajando todo esto y teniendo en cuenta los casos más habituales, a mí me salieron estas seis combinaciones, que como decía al principio son sólo para copiar y pegar. Comentado al principio, lo que hace cada uno.

<!-- SUMARIOS. TODOS LOS POSTS RESUMIDOS. TODOS CON SNIPPET AUTOMATICO -->
<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.snippet'>
     <b:if cond='data:post.thumbnailUrl'>
      <div class='Image thumb'>
      <img expr:src='data:post.thumbnailUrl'/>
      </div>
     </b:if>
     <data:post.snippet/>
     <b:if cond='data:post.hasJumpLink'>
     <b:else/>
      <div class='jump-link'>
      <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
     </b:if>
    <b:else/>
     <data:post.body/>
    </b:if>
 </b:if>
</b:if>

<!-- SUMARIOS. TODOS LOS POSTS RESUMIDOS. CON PRIORIDAD AL CORTE MANUAL -->
<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>

<!-- SUMARIOS. PRIMER POST COMPLETO EN TODO TIPO DE PAGINAS. RESTO CON SNIPPET AUTOMATICO -->
<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.isFirstPost'>
    <data:post.body/>
   <b:else/>
     <b:if cond='data:post.thumbnailUrl'>
      <div class='Image thumb'>
      <img expr:src='data:post.thumbnailUrl'/>
      </div>
     </b:if>
     <data:post.snippet/>
     <b:if cond='data:post.hasJumpLink'>
     <b:else/>
      <div class='jump-link'>
      <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
     </b:if>
   </b:if>
 </b:if>
</b:if>

<!-- SUMARIOS. PRIMER POST COMPLETO EN TODO TIPO PAGINAS. RESTO CON PRIORIDAD AL CORTE MANUAL -->
<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.isFirstPost'>
    <data:post.body/>
   <b:else/>
    <b:if cond='data:post.hasJumpLink'>
     <data:post.body/>
    <b:else/>
     <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:if>  
   </b:if>
 </b:if>
</b:if>

<!-- SUMARIOS. PRIMER POST COMPLETO SOLO EN HOME. RESTO CON SNIPPET AUTOMATICO -->
<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:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost'>
    <data:post.body/>
   <b:else/>
     <b:if cond='data:post.thumbnailUrl'>
      <div class='Image thumb'>
      <img expr:src='data:post.thumbnailUrl'/>
      </div>
     </b:if>
     <data:post.snippet/>
     <b:if cond='data:post.hasJumpLink'>
     <b:else/>
      <div class='jump-link'>
      <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
     </b:if>
   </b:if>
  <b:else/>
     <b:if cond='data:post.thumbnailUrl'>
      <div class='Image thumb'>
      <img expr:src='data:post.thumbnailUrl'/>
      </div>
     </b:if>
     <data:post.snippet/>
     <b:if cond='data:post.hasJumpLink'>
     <b:else/>
      <div class='jump-link'>
      <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
     </b:if>
  </b:if>
 </b:if>
</b:if>

<!-- SUMARIOS. PRIMER POST COMPLETO SOLO EN HOME. RESTO CON PRIORIDAD AL CORTE MANUAL -->
<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:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost'>
    <data:post.body/>
   <b:else/>
    <b:if cond='data:post.hasJumpLink'>
     <data:post.body/>
    <b:else/>
     <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:if>  
   </b:if>
  <b:else/>
    <b:if cond='data:post.hasJumpLink'>
     <data:post.body/>
    <b:else/>
     <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:if>   
  </b:if>
 </b:if>
</b:if>

¿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

46 comentarios :

  1. Antes avía implementado los sumarios en mi blog pero ahora que presentas esta propuesta más liviana me provoca volver a incluirlos ya te estaré avisando cualquier duda, Gracias por el aporte. Saludos.

    ResponderEliminar
  2. Gracias por la información, me gustó el estilo de las entradas populares de la sidebar de la imagen, espero compartes un tuto para hacerlo igual en nuestros blogs :grin:

    ResponderEliminar
    Respuestas
    1. Está publicado Toxico. Es este ;)

      Eliminar
    2. Muchas gracias, ya sabes soy parte de los torpes(muy torpes creo ) :grin:

      Eliminar
  3. Muchas gracias por publicar esta entrada, Oloman. Ya lo implementé y quedó todo perfecto.

    Saludos.

    ResponderEliminar
  4. Hola Oloman, se que la pregunta que te voy a hacer no tiene nada que ver con el post, pero llevo tiempo buscando por todos lados el como poder poner el pie de página igual que lo tienes tú, ya que puse hace tiempo una de las columnas fijas, pero cuando llega al final, la columna es comida por el pie de página.

    Un saludo y espero que me puedas ayudar.

    ResponderEliminar
    Respuestas
    1. No sabría decirte, porque usas una base de plantilla "Nuevo diseñador" y esas tienen una estructura muy rara que nunca he terminado de entender.

      Aquí básicamente hay dos columnas, la de la izquierda (fija) y la de la derecha, y el footer forma parte de la de la derecha. Tú tienes el footer como si fuera una cabecera, fuera de las columnas y debajo de ellas. Es sólo eso.

      Eliminar
    2. Muchas gracias por tu respuesta Oloman.

      Tras ver tu explicación se me ha ocurrido una forma de simular lo que tú tienes hecho que creo que funcionará. Si me sale te lo muestro para que veas el resultado si te parece.

      Eliminar
    3. Perfecto. Nos lo enseñas cuando lo tengas.

      Eliminar
  5. Oloman, la mejor forma y mas rapida es hacer el corte de MORE en la parte del texto donde queremos que se muestre el resumen en el index. MUY interesante la opcion de mostrar el primer post completo y el resto con resumen.salu2

    ResponderEliminar
    Respuestas
    1. El MORE permite definir con exactitud qué cantidad de caracteres se pueden ver, pero no estoy seguro de que sea más rápido. Supongo que esa información recortada Blogger la guarda en alguna variable (que me encantaría descubrir, por cierto) al igual que hace con data:post.snippet.

      Por otra parte si tienes un blog antiguo con muchas publicaciones, sería un engorro comenzar a añadir el MORE uno por uno. Este código evita eso y al mismo tiempo permite usar MORE para las nuevas publicaciones.

      Eliminar
  6. Hola de nuevo, me gustaría poner el segundo código pero no entiendo bien lo del corte manual. Cómo funciona?

    ResponderEliminar
    Respuestas
    1. Lo del corte manual es que tú puedes añadir manualmente a cada post una marca por dónde cortar el post para que se muestre truncado en la página de Inicio. Eso se hace con un icono que hay en el editor que es como una hoja de papel partida en dos y que lo que hace es añadirte el código <!--more-->

      Eliminar
    2. Algunas veces lo más fácil parece lo más difícil. Gracias no lo sabía.
      Cuando hago un corte manual sale un enlace, en mi caso (más información) le podría aplicar estilos o alguna imagen?

      Eliminar
    3. Ambas cosas:
      http://www.oloblogger.com/2011/02/modificar-el-aspecto-del-corte-mas.html
      http://www.oloblogger.com/2012/03/algunas-ideas-para-el-salto-leer-mas-u.html

      Eliminar
  7. Se me olvidaba las imágenes pueden ser como en las entradas en vez de miniaturas?

    ResponderEliminar
    Respuestas
    1. Con este sistema rápido no. Tendrías que poner un javascript que extrajera esa imagen o un sistema de redimensión que vimos en otro post. De todas formas si dejas el tamaño original (el de las entradas), el tamaño de los sumarios será incontrolable y cada uno será distinto, así como el cuadre del texto circundante.

      Eliminar
  8. Este comentario ha sido eliminado por el autor.

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

    ResponderEliminar
    Respuestas
    1. Si no tuvieras esa data, no tendrías blog. No sé si equivocaste el término o realmente estás buscando en el Diseñador de Plantillas, porque si es ahí dónde miras, nunca encontrarás nada.

      Tienes que entrar por Plantilla > Edición HTML Luego pinchas en el recuadro dónde está todo el código, pulsas CTRL+F y en el pequeño recuadro que te saldrá en la parte superior derecha del recuadro de código, ahí escribes data:post.body para ir buscando. Cada intro que pulses te llevará a la siguiente aparición de ese texto.

      Eliminar
  10. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Lo que has dicho ahora no es exactamente lo mismo que te dije. Insisto en que todos los blogs Blogger tienen esa data y tú no vas a ser una excepción, así que lo único que se me ocurre es que confundas el buscador del navegador con el buscador del editor. Con el primero no lo encontrarás. La clave está en pinchar en el recuadro dónde está el código antes de pulsar CTRL+F.

      Eliminar
  11. Me va perfecto. Muchas gracias!!!

    ResponderEliminar
  12. Hola Oloman, agradecerte por el tutorial. Solo tengo dos preguntas, la primera ¿Es posible que el resumen tenga un poco más de texto? Solo me salen dos líneas quisiera mejorar eso, y otro este truco afectaria al seo de alguna manera? Gracias

    ResponderEliminar
    Respuestas
    1. Hola Renzo.

      La respuesta a ambas preguntas es no.

      No se pueden hacer los resúmenes más extensos con este sistema. Para hacerlo habría que recurrir a JavaScript y hay varios sistemas circulando para ello. Aquí si buscas "sumarios" te aparecerá uno muy usado.

      Y no, no afecta al SEO para nada pues tienes en portada lo que hay que tener: título, imagen, texto...

      Eliminar
  13. Anónimo1/7/13, 6:04

    Ya pude configurar, pero el texto me queda debajo de la imagen. Podría alinear la imagen y el texto a la misma altura? Gracias por respondes Oloman.

    ResponderEliminar
    Respuestas
    1. Incluye en tu CSS esto:
      .Image.thumb {float: left; margin: 0 5px 5px 0;}

      Luego ya retocas.

      Eliminar
  14. ¿Las opciones que presentas aqui se pueden instalar en una página estática? ¿Funcionarian correctamente? Si la respuesta es SI: ¿Dónde pondría el código escogido: en el HTML de la plantilla condicionándolo o en el cuadro de edición html de la página estática? Gracias!!

    ResponderEliminar
    Respuestas
    1. No le veo sentido a usarlo para una página estática. Esto es para resumir varias ENTRADAS cuando estamos por ejemplo en el Inicio del blog o en una página de etiquetas. Una página estática muestra una sola información (contacto, sobre el autor, etc.) y por tanto no hay varias entradas para resumir.

      ¿Qué es lo que quieres conseguir exactamente?

      Eliminar
  15. Hola Oloman, te explico, hay blogs q el home lo usan para hablar de la empresa, productos o servicios, osea el gancho para q el lector se interese, creas un menu y cada link te lleva a una página estática con dicha info. Luego si quiero aprovechar el blog como lo q es: Un blog, haces que los resumenes de las entradas se vean internamente en otra página estática y de ahi dirigir al usuario a la entrada que quiera, incluso los gadgets se pueden condicionar para que se vean solo en esa página, no en el home ni en las informativas y por supusto en todos los ITEMS (entradas regulares).

    Osea organizar el menu del home asi:

    Inicio - La Empresa - Productos - Servicios - BLOG - Contacto

    Vagabundia enseña algo parecido aqui: http://vagabundia.blogspot.com/2011/12/otro-metodo-para-crear-una-pagina-de.html

    Pero yo queria saber si se puede con una estática y comparar cual opción seria la mas conveniente, gracias!!

    ResponderEliminar
    Respuestas
    1. Ahora sí :) ...pero quizás te resulte interesante conocer este otro método.

      Eliminar
  16. Le di un vistazo rápido a la entrada y está un poquito larga, asi q la leeré con calma en un rato, sólo una duda: ¿Con ese sistema también funcionan las opciones de sumarios que mencionas en éste artículo??

    ResponderEliminar
    Respuestas
    1. Este código es precisamente para construir sumarios, así que la respuesta es que sí vale para eso.

      Eliminar
  17. como puedo establecer el numero de palabras que se mostraran en los resúmenes amigo oloman.

    ResponderEliminar
    Respuestas
    1. Con este sistema de ninguna manera Dori. Para regular el número de caracteres (que no palabras) tendrías que usar un sistema de sumarios CON JavaScript.

      Eliminar
  18. Me encanta tu pagina, y la reviso siempre buscando novedades. Aplique esto a mi blog y resulto de maravilla. GRACIAS de verdad por compartirlo. Tengo una inquietud al respecto de los thumbnails, quisiera aumentar el tamaño en la etiqueta meta del Head pero no encontre ninguna forma de hacerlo. Te agradeceria la ayuda.

    ResponderEliminar
    Respuestas
    1. Hola. Alguna chapucilla he logrado hacer con PHP, pero todavía no he encontrado tampoco un sistema práctico. Es una de las cosas que cuando descubra publicaré con seguridad ;)

      Eliminar
    2. Gracias, estare pendiente. Tengo problemas con Stumbleupon y no se que hacer. Gracias de todas maneras.

      Eliminar
  19. Hola Oloman,

    Enhorabuena por esta web, me ha sido de gran ayuda los últimos días para poner a punto mi nuevo diseño de blog. Quería preguntarte si hay manera de aplicar esto mismo (apariencia sumario) solamente cuando muestras todas las entradas que tengan una etiqueta. Me explico. Soy aspirante a diseñadora gráfica (aún estudio, por eso mis dudas...) y quiero que mi sitio web sea un híbrido entre web y portfolio. En HOME quiero que aparezcan las entradas tal cuál, pero he hecho un menú principal para mostrar las entradas por categorías (por etiquetas) y quiero que sea al entrar a cada sección cuando aparezca el sumario con las entradas resumidas que llevan dicha etiqueta.

    Muchas gracias por tu inagotable ayuda.

    ResponderEliminar
  20. Hola (de nuevo). Es cuestión de aplicar condiciones para que en un tipo de páginas salga con un formato y en otras, con otro, pero no hay una forma general de hacerlo que pueda explicar para todos los casos. Depende de cada plantilla. Ya contactamos

    ResponderEliminar
  21. Hola Oloman, utilice la version 5, pero no puedo personalizar la palabra del corte (Más información), quiero ponerle un fondo y otro color de letra, le agregue este código:

    .jump-link a, { text-align: center;ext-decoration: none;padding: 3px;color: white;background: burlywood; }

    .jump-link a:hover { color: black; }

    Pero no aparece, alguna idea para solucinar esto? Gracias

    ResponderEliminar
  22. Al primer selector le sobra una coma y además le falta una "t". Sería así:
    .jump-link a {text-align:center;text-decoration: none; padding:3px; color:white;background:burlywood;}
    .jump-link a:hover {color:black;}

    ResponderEliminar
  23. Hola Oloman ¿Cómo estas?
    Disculpa, he intentado colocarlos, pero ninguno me funciona. ¿Qué es lo que pasa?
    Saludos

    ResponderEliminar
    Respuestas
    1. Hola Ana. Pues me resulta imposible saberlo, pero lo más probable es que no sustituyeras el data:post.body adecuado que es el de la versión escritorio de la plantilla. Localiza los dos que deberían aparecerte y prueba primero con uno y luego con otro. Seguro que así encuentras el correcto.

      Eliminar
  24. Hola Ooman.

    Los he colocado y me funcionan, y eso que tenía el bloque de Adsense en medio del post, y he tenido que recolocar muchos post.body o eliminarlos, por que estaban duplicados.

    El problema que tengo es que quiero mostrar 20 entradas, y no me aparecen más de 12. He cambiado el mostrar cantidad de entradas y nada, también tengo paginación instalada con números, en vez de la de blogger, la he eliminado para ver si era el problema, pero no es. ¿Cómo puedo mostrar más entradas? Gracias, sería de mucha ayuda.

    ResponderEliminar
    Respuestas
    1. Buenas Esteban.

      Eso se puede deber al control que Blogger aplica para que las páginas no sean demasiado pesadas. En este enlace tienes más información sobre el tema:
      Auto-paginación en Blogger

      Una posible solución sería meter justo antes del contenido más pesado de cada entrada un corte (salto). En el anterior enlace puedes ver en qué consiste y cómo añadirlo a tus posts.

      Eliminar