Entre Letras: Tutorial blogger: Resumen de entradas automático con miniaturas

Tutorial blogger: Resumen de entradas automático con miniaturas

28 may 2019 • tutorial blogger

¡Hola! Hace un tiempo compartí un tutotial donde podíamos ver cómo poner, en la página de inicio de blogger, un resumen de entradas con jump-link o leer más automático para todas las entradas publicadas que incluía un resumen del post y la imagen principal. Pues bien, por muchas razones nunca estuve muy contenta con esta opción y hace unas semanas se me ocurrió una manera de hacerlo que me tiene muy contenta, y he decidido compartirlo con ustedes.

A diferencia de la anterior, que a través de un script hacía un resumen de la entrada sin formato, con esta opción (que, por cierto, es mucho más sencilla) podemos hacer muchas más modificaciones de manera simple y sin tantos enredos.

Como de costumbre, haremos primero una copia de seguridad de nuestra plantilla para evitar complicaciones en caso de que algo nos salga mal. Para esto vamos a PLANTILLA → Crear/Restablecer copia de seguridad → Descargar plantilla completa. Después de esto, seleccionamos donde dice EDITAR HTML, buscamos (CTRL + F simultáneamente) la etiqueta <b:includable id='post' var='post'> y vamos a reemplazarla por el código según la opción que les guste.

OPCIÓN 1 (DEMO)

<b:includable id='post' var='post'>
<b:if cond='data:blog.pageType in {"static_page", "item"}'>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<div id='post-labels'>
<span id='post-labels-span'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
</span>
</div>
</b:loop>
</b:if>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
<h2 class='date-header'>
<data:post.dateHeader/>
</h2>
<br/>
</b:if>
<div class='post-header' id='entradas-inicio'>
<div class='post-header-line-1'/>
<data:post.body/>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'>
<data:post.author/>
</span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'>
<data:post.author/>
</span>
</span>
</b:if>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.url.canonical' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
<data:post.timestamp/>
</abbr>
</a>
</b:if>
</b:if>
</span>
<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/>
</span>
 
</td>
<td>
<iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/>
</td>
</tr>
</table>
</b:if>
</span>
<span class='post-comment-link'>
<b:include cond='data:blog.pageType not in {"item","static_page"} and data:post.allowComments' data='post' name='comment_count_picker'/>
</span>

<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType not in {"item","static_page"} and data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'>
<data:top.backlinkLabel/>
</a>
</b:if>
</span>
<span class='post-icons'>

<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='https://resources.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>

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

<div class='post-share-buttons goog-inline-block'>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
</div>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:top.showPostLabels and data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='not data:label.isLast'>
,
</b:if>
</b:loop>
</b:if>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
<b:if cond='data:top.showLocation and data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'>
<data:post.location.name/>
</a>
</b:if>
</span>
</div>
<b:if cond='data:post.authorAboutMe'>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:post.authorPhoto.url'>
<img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
</b:if>
<div>
<a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'>
<data:post.author/>
</span>
</a>
</div>
<span itemprop='description'>
<data:post.authorAboutMe/>
</span>
</div>
</b:if>
</div>
</div>
<b:else/>
<div id='post' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>
<a expr:name='data:post.id'/>
<div style='display: flex;'>
<span id='image-post'>
<b:if cond='data:post.thumbnailUrl'>
<img expr:src='resizeImage(data:post.thumbnailUrl, 1600, "1:1")' id='post-img'/>
</b:if>
</span>
<span id='cabecera-post'>
<div id='post-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
</div>
<h2 id='date'>
<span>
<data:post.dateHeader/>
</span>
</h2>
<div class='post-header' id='entradas-inicio'>
<div class='post-header-line-1'/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div id='post-body'>
  <b:eval expr='snippet(data:post.body, {length: 200, links: true, linebreaks: false})'/>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<div>
<div id='jump'>
<span id='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</span>
</div>
</div>
</b:if>
</div>
</span>
</div>
</div>
</b:if>
<style type='text/css'>
#image-post {
width:50%;
float:left;
}
#cabecera-post {
width: 50%;
margin: auto;
padding: 0px 0px 0px 30px;
}
#post-img {
width: 100%;
object-fit: cover;
height: 250px; /*Largo de la imagen*/
}
h2.date-header {
display: none;
}
#date {
font: italic 11px arial, sans serif; /* Estilo de la fecha debajo del título*/
letter-spacing: 2px; /*Espacio entre las letras*/
text-align: left; /*Alineación del texto*/
text-transform: lowercase; /*Letras en minúscula*/
padding: 15px 0px 0px; /*Márgenes*/
}
#post {
padding: 0px 0px 30px; /*Márgenes*/
      margin-bottom: 20px; /*Espacio entre las entradas*/
    border-bottom: 1px solid #ccc; /*Borde inferior, línea entre las entradas*/
    display:flex;
}
#post-title, #post-title a {
text-align: left; /*Alineación del texto*/
text-transform: uppercase; /*Letras en mayúscula*/
letter-spacing: 2px; /*Espacio entre letras*/
font: normal 20px arial, sans sans-serif; /*Formato del título, tamaño y fuente*/
color: #000000; /*Color del título*/
}
  #post-title a: hover {

color: #c89999; /*Color del título de la entrada al pasar el cursor*/

}

#post-body {
padding: 20px 5px;
font: normal 0.8rem arial, sans-serif; /*Formato del resumen de la entrada*/
text-align: justify; /*Alineación*/
}
#jump-link, #jump-link a {
font: normal 14px arial, sans-serif; /*Formato del texto de Leer más*/
text-transform: uppercase; /*Texto en mayúscula*/
letter-spacing: 2px; /*Espacio entre letras*/
background: #000; /*Color del botón de leer más*/
padding: 5px 8px; /*Márgenes entre el texto y el botón*/
color: #ffffff; /*Color del texto de leer más*/
float: right; /*Alineación del botón*/
}
#jump-link a: hover {
background: #ffffff; /*Color del botón de leer más*/
color: #000000; /*Color del botón de leer más*/
}
</style>
</b:includable>

OPCIÓN 2 (DEMO)

<b:includable id='post' var='post'>
<b:if cond='data:blog.pageType in {"static_page", "item"}'>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<div id='post-labels'>
<span id='post-labels-span'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
</span>
</div>
</b:loop>
</b:if>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
<h2 class='date-header'>
<data:post.dateHeader/>
</h2>
<br/>
</b:if>
<div class='post-header' id='entradas-inicio'>
<div class='post-header-line-1'/>
<data:post.body/>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'>
<data:post.author/>
</span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'>
<data:post.author/>
</span>
</span>
</b:if>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.url.canonical' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
<data:post.timestamp/>
</abbr>
</a>
</b:if>
</b:if>
</span>
<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/>
</span>
 
</td>
<td>
<iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/>
</td>
</tr>
</table>
</b:if>
</span>
<span class='post-comment-link'>
<b:include cond='data:blog.pageType not in {"item","static_page"} and data:post.allowComments' data='post' name='comment_count_picker'/>
</span>

<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType not in {"item","static_page"} and data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'>
<data:top.backlinkLabel/>
</a>
</b:if>
</span>
<span class='post-icons'>

<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='https://resources.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>

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

<div class='post-share-buttons goog-inline-block'>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
</div>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:top.showPostLabels and data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='not data:label.isLast'>
,
</b:if>
</b:loop>
</b:if>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
<b:if cond='data:top.showLocation and data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'>
<data:post.location.name/>
</a>
</b:if>
</span>
</div>
<b:if cond='data:post.authorAboutMe'>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:post.authorPhoto.url'>
<img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
</b:if>
<div>
<a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'>
<data:post.author/>
</span>
</a>
</div>
<span itemprop='description'>
<data:post.authorAboutMe/>
</span>
</div>
</b:if>
</div>
</div>
<b:else/>
<div id='post' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>
<a expr:name='data:post.id'/>
<span id='cabecera-post'>
<div id='post-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
</div>
<h2 id='date'>
<span>
<data:post.dateHeader/>
</span>
</h2>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img expr:src='resizeImage(data:post.thumbnailUrl, 1600, "1:1")' id='post-img'/>
</b:if>
</div>
<div class='post-header' id='entradas-inicio'>
<div class='post-header-line-1'/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div id='post-body'>
<b:eval expr='snippet(data:post.body, {length: 500, links: true, linebreaks: false})'/>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<div>
<div id='jump'>
<span id='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</span>
</div>
</div>
</b:if>
</div>
</span>
</div>
</b:if>
<style type='text/css'>
#post-img {
width: 100%;
object-fit: cover;
height: 250px; /*Largo de la imagen*/
padding: 20px 0px 0px; /*Margen de la imagen*/
}
h2.date-header {
display: none;
}
#date {
font: italic 11px arial, sans serif; /* Estilo de la fecha debajo del título*/
letter-spacing: 2px; /*Espacio entre las letras*/
text-align: center; /*Alineación del texto*/
text-transform: lowercase; /*Letras en minúscula*/
padding: 15px 0px 0px; /*Márgenes*/
}
#post {
display:flex;
padding: 0px 0px 30px; /*Márgenes*/
margin-bottom: 20px; /*Espacio entre las entradas*/
border-bottom: 1px solid #ccc; /*Borde inferior, línea entre las entradas*/
}
#post-title, #post-title a {
text-align: center; /*Alineación del texto*/
text-transform: uppercase; /*Letras en mayúscula*/
letter-spacing: 2px; /*Espacio entre letras*/
font: normal 20px arial, sans sans-serif; /*Formato del título, tamaño y fuente*/
color: #000000; /*Color del título*/
}
#post-title a: hover {
color: #c89999; /*Color del título de la entrada al pasar el cursor*/
}
#post-body {
padding: 20px 5px;
font: normal 0.8rem arial, sans-serif; /*Formato del resumen de la entrada*/
text-align: justify; /*Alineación*/
}
#jump-link, #jump-link a {
font: normal 14px arial, sans-serif; /*Formato del texto de Leer más*/
text-transform: uppercase; /*Texto en mayúscula*/
letter-spacing: 2px; /*Espacio entre letras*/
background: #000; /*Color del botón de leer más*/
padding: 5px 8px; /*Márgenes entre el texto y el botón*/
color: #ffffff; /*Color del texto de leer más*/
float: right; /*Alineación del botón*/
}
#jump-link a: hover {
background: #ffffff; /*Color del botón de leer más*/
color: #000000; /*Color del botón de leer más*/
}
</style>
</b:includable>

En el código podemos también modificar los estilos a través de CSS, ya es configurar cada elemento conforme a propio gusto según lo indicado en la parte de abajo del código que hemos copiado. Eso sí, para poner el botón de leer más alineado en el centro, debemos añadir esto antes de </style>:

#jump {
width: fit-content;
margin: auto;
}

Para hacer todos los cambios necesarios, les recomiendo pegar todo el código en un bloc de notas o en un documento en word y después ponerlo en la plantilla, para evitar complicaciones.

IMPORTANTE: La imagen que se muestra en el resumen es, por lo general, la primera imagen que pusimos en la entrada. Esta imagen se muestra siempre y cuando sea subida desde tu ordenador; si la imagen es copiada de alguna web, no se mostrará.

Para cambiar el número de caracteres que se muestra en el resumen, sólo modificamos la parte resaltada esta línea: <b:eval expr='snippet(data:post.body, {length: 500, links: true, linebreaks: false})'/>.

Para modificar el texto del botón de leer más que lleva a la entrada completa, vamos a DISEÑO y editamos el widet de ENTRADAS DEL BLOG y guardamos los cambios, así:

¡ACTUALIZACIÓN!

Si quieres que al clickear sobre la imagen envíe directamente a la entrada, debes modificar una pequeña parte del código. Es muy fácil. Solamente vas a poner, antes de la línea de la imagen (que en el código que debes copiar está resaltado con amarillo), la línea que representa el enlace, y después el código de cierre, que sería <a expr:href='data:post.url'>...</a>.

Quedaría así:

<a expr:href='data:post.url'><img expr:src='resizeImage(data:post.thumbnailUrl, 1600, "1:1")' id='post-img'/></a>

Y básicamente eso es todo, es una forma muy sencilla que no utiliza script y que, por lo tanto, no hará más lenta carga de la página. Espero que les sirva este pequeño tutorial y que se decidan a utilizarlo. Cualquier duda o pregunta, a través de los comentarios ;)

Feliz semana, Jisela.

11 comentarios

Anónimomayo 28, 2019 11:15 a. m.
Esto es lo que necesitabaaaa! gracias graciaaaaaaaaaaaas
ResponderEliminar
Respuestas
Claudia S.junio 08, 2019 7:29 p. m.
Jise me ha encantado esta opción, sobre todo la número 1! Hice una prueba y hay unos detallitos que quiero arreglar (como el margen, es decir, que la imagen no quede tan pegada de los bordes) pero sé que puedo hacerlo cuando tenga algo de tiempo! Por el momento me guardo este código muchas gracias <3 <3
ResponderEliminar
Respuestas
Anónimoagosto 16, 2019 9:53 p. m.
Hola Jisela, gracias. Lo he probado y ha funcionado. Pero sabes cómo hacer para que al dar click sobre la imagen te envíe a la entrada? Un saludo.
ResponderEliminar
Respuestas
Prado García-Miguelmarzo 23, 2020 2:11 p. m.
Este comentario ha sido eliminado por el autor.
ResponderEliminar
Respuestas
Prado García-Miguelmarzo 23, 2020 2:15 p. m.
Hola Jisela,
Eres una crack!, Muchas gracias por este post y por la ayuda que me has prestado. Realmente funciona y mejora mucho la apariencia del blog. Te sigo. Un abrazo
ResponderEliminar
Respuestas
Daniel Checaseptiembre 28, 2020 5:17 a. m.
Jisela, este post merece muchas más visitas, he tenido que darle la vuelta a casi todo internet. Gracias por compartirlo, está genial.
ResponderEliminar
Respuestas
Daniel Checaseptiembre 28, 2020 5:42 a. m.
Sólo hay unas dudas que me quedaron... mi blog es de varios autores, así que también quisiéramos que en el resumen apareciera el nombre del autor y la etiqueta a la cual pertenece el post. ¿Crees que sea posible?
ResponderEliminar
Respuestas
By Marakeyseptiembre 13, 2022 7:30 p. m.
hola...he agregado la primera opcion a mi blog pero me pasa la sidebar abajo y no logro devolverla a su lugar...puedes ayudarme por fa?
ResponderEliminar
Respuestas

Añadir comentario