Mostrar datos de la entrada en la sidebar

Las entradas del blog, título, contenido, pie de página, etc, son agregadas con un widget; más complejo que cualquier otro de los que podemos incluir pero, widget al fin:

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>
.......
</b:widget>

Obviamente, hay uno solo y desde Diseño | Elementos de la Página no podemos agregar otros; ni siquiera aparece en la lista pero, nada impide que podamos hacerlo manualmente desde la Edición HTML.

¿Y para qué se nos ocurriría agregar otro widget con las entradas del blog? Pués porque sólo allí es donde podemos leer los datos de la entrada y, por ejemplo, de ese modo, podríamos mostrar algunos de ellos en cualquier parte de nuestra página y no necesariamente en el post-footer. Usando esta idea de quiterandom.com, los vamos a mostrar en la sidebar.

Primero que nada, vamos a Diseño | Edición HTML y sin expandir los artilugios para que sea más simple; buscaremos la sección de la sidebar que, por defecto, dirá algo así:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Inmediatamente debajo de eso, agregaremos el siguiente código que ha sido modificado del artículo original para evitar que Blogger nos agregue códigos innecesarios:

<b:widget id='Blog99' locked='false' title='Entradas del blog' type='Blog'>
<b:includable id='nextprev'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='post' var='post'>
<div class='meta'>
<div class='title'>Leyendo: &quot;<data:post.title/>&quot;.</div>
<div class='comments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.numComments/> <data:top.commentLabelPlural/>
</a>
</div>
<div class='labels'>
<b:if cond='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='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</div>
<div class='date'>Publicado el <data:post.dateHeader/></div>
<!-- ....... cualquier otro dato que nos interese mostrar -->
</div>
</b:includable>
<b:includable id='status-message'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='main' var='top'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
</b:if>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='comments' var='post'/>
</b:widget>

Lo llamamos Blog99 pero cualquier nombre es admitido. Como se ve, hay muchos includables vacíos porque no los necesitamos pero, no podemos quitarlos ya que si lo hacemos, Blogger los agregará otra vez completos. Sólo necesitamos dos de ellos, los llamados main y post. En el primero, condicionamos todo nuestro nuevo widget para que funcione exclusivamente en páginas individuales y en el segundo, ponemos todo eso que nos interese mostrar. En ese ejemplo hay algunas posibilidades agregadas.

El resto es diseño gráfico. Para eso, agregamos un poco de estilo antes de </b:skin>. Por ejemplo:

/* este es el rectángulo donde mostraremos nuestro widget */
div.meta {
background-color: #141414;
border: 1px solid #333;
padding: 20px;
}
/* las diferentes partes del ejemplo */
div.meta div.title { /* el texto "Leyendo" y el título */ }
div.meta div.comments { /* la cantidad de comentarios */ }
div.meta div.labels { /* las etiquetas */ }
div.meta div.date {  /* la fecha de publicación */ }