Este es un truco muy sencillo que nos permitirá aprovecharnos de las nuevas opciones de SEO de blogger para mostrar automáticamente la descripción del post que introducís desde la edición de entradas. Algo parecido a lo de este post (ahí arriba).

Lo que haremos será buscar en Plantilla » Edición de HTML <b:includable id='post' var='post'>, con la casilla Expandir plantillas de artilugios marcada.
Dentro de ese includable, buscaremos <div class='post-body entry-content'> (notad que tal vez pueda tener un id, etc).

Justo debajo, pegaremos estas líneas:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p id='descripcion' style='display:none;'>
<script>//<![CDATA[
(function(){
var description = document.getElementsByName('description')[0]
if( description && description.content ){
document.write(description.content);
document.getElementById('descripcion').style.display = 'block'
}
})()
//]]></script>
</p>
</b:if>

El script lo que hace es buscar la primera etiqueta de descripción que, si tenéis las nuevas opciones configuradas, es la del post, o una etiqueta vacía, o ninguna. Comprobamos si hay una etiqueta y si no está vacía y, si es así, escribimos el contenido y mostramos la descripción.

Actualización importante

Otra opción de generar el contenido directamente(que puede ser más interesante) es usar directamente la variable de blogger:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.metaDescription'>
<p id='descripcion'>
<data:blog.metaDescription/>
</p>
</b:if>
</b:if>

Ya está hecho. Ahora sólo falta un poco de CSS, que podéis poner encima de </b:skin>:


#descripcion{
/*Centramos el texto*/
text-align: center;
/*El color*/
color:#A1A1A1;
/*Los bordes*/
border: dashed #ddd;
border-width: 1px 0 1px 0;
/*Lo separamos un poco de los bordes*/
padding: 7px;
/*Tamaño de la fuente (un poco más pequeño que el post)*/
font-size: .9em;
/*Lo pondremos en cursiva*/
font-style: italic;
/*Separamos un poco el contenido de abajo*/
margin-bottom: 10px;
}

Ahora sí que hemos acabado. Espero que os sea útil .

13 pensamientos en “Mostrar la descripción de las entradas en los posts individuales

  1. Imagen de Lucas el dijo:

    Hola Emilio, quisiera saber si existe alguna forma de reemplazar el <data:post.snippet/> por el <data:blog.metaDescription/> que mencionaste para poder utilizarlo como sumario del post en la página principal. Ya lo intente pero me aparece la descripción del blog, seguramente debe haber una forma de llamar a la descripción del post. Saludos :)

    • Imagen de Emilio Cobos Álvarez el dijo:

      No hay manera, lo siento. Fue una de las primeras cosas que me extrañó cuando blogger implementó el <data:blog.metaDescription />, y es que el campo fuera global en vez de dependiente del post.

      En cierto modo tiene lógica (si no fuera así no podría ser usado en el <head>), pero nos impide hacer cosas como la que tu quieres hacer. Tal vez la solución ideal sería un <data:post.metaDescription /> en las páginas index y archive, y uno global en las individuales, pero a los ingenieros de blogger todavía no se les habrá ocurrido… ;)

      Saludos Lucas!

    • Imagen de Emilio Cobos Álvarez el dijo:

      Es sólo el mero hecho de ponerla (aunque si tienes una especial obsesión por el SEO puede venir bien). Pero no es necesaria.

      En mi caso me era útil porque permitía que la gente leyera un pequeño resumen de lo que iba a ser el artículo (y pensé que a más gente también le podría ser útil).

      Gracias por el halago y por dejar tu comentario :)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.