En breves rasgos, estos posts versión miniatura suelen utilizarse como ‘notas rápidas’, pequeñas, referenciales, de aviso, notificación, etc. que no necesariamente requieren de un post tradicional. Se caracterizan por tener un diseño y estructura distinta, aunque son técnicamente sólo posts con una categoría diferente (ej. Notas rápidas, Actualizaciones, Miniposts, etc.). En la imagen de arriba, vemos cómo Francisco los ha diseñado para Blog and Web.
Hasta hace poco creía que lograr esto en Blogger era difícilmente posible, pero una vez que me topé con un post en Blogger Buster, y más recientemente éste de Vagabundia, me puse a jugar con los códigos. (Suene o no geek, es divertido). En Vagabundia, lo que muestra JMiur es básicamente cómo utilizar estos miniposts fuera de la secuencia cronológica de los posts tradicionales; yo, en cambio, me he enfocado más en cómo cambiar su estructura (y diseño) dentro de dicha secuencia (más como se usa en Blog and Web, digamos).
Instalación
1. Creamos un post con la categoría minipost.
2. Desde Edición de HTML (Panel » Diseño), expandimos artilugios.
3. En el siguiente código, agregamos lo que está resaltado.
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<b:if cond='data:label.name != "minipost"'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:else/>
<b:include data='post' name='minipost'/>
</b:if>
</b:if>
</b:loop>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:loop>
4. Buscamos la siguiente línea:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
y debajo de ella, pegamos el siguiente código:
<b:includable id='minipost' var='top'>
<b:if cond='data:blog.pageType != "item"'>
<div class='minipost home'>
<div class='date'><data:post.dateHeader/></div>
<div class='body'>
<data:post.body/>
<div class='clear'/>
</div>
<div class='meta'>
<a expr:href='data:post.url'>permalink</a> |
<a expr:href='data:post.url + "#comments"'>comments</a>
<b:include data='post' name='postQuickEdit'/>
</div>
</div>
<b:else/>
<div class='minipost item'>
<div class='date'><data:post.dateHeader/></div>
<div class='title'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
</div>
<div class='body'>
<data:post.body/>
<div class='clear'/>
</div>
<b:include data='post' name='postQuickEdit'/>
</div>
</b:if>
</b:includable>
De esta forma, habremos definido cómo será la estructura de los miniposts en las páginas del blog, y los posts individuales.
En este ejemplo, en los miniposts que se verán en la página principal, archivos y categorías, se mostrará solamente la fecha, el contenido, y dos enlaces (el enlace permanente al minipost, y el enlace a los comentarios). En los miniposts individuales, se mostrará la fecha, el título y el contenido.
— Podemos usar Vista Previa para tener una idea de cómo se verán los miniposts ahora.
Estilos
Los estilos (colores, tamaños, fondos, fuentes, etc.) los definimos con CSS (el código antes de ]]</b:skin>, utilizando las clases de cada contenedor:
.minipost.home { /* Miniposts en la página principal, archivos, y categorías */ }
.minipost.home .date { /* Estilos para la fecha */ }
.minipost.home .body { /* Estilos para el cuerpo del minipost */ }
.minipost.home .meta { /* Estilos para el 'footer' del minipost */ }
.minipost.item { /* Estilos para los miniposts individuales */ }
.minipost.item .date { /* Estilos para la fecha del minipost individual */ }
.minipost.item .title { /* Estilos para el título del minipost individual */ }
.minipost.item .body { /* Estilos para el cuerpo del minipost individual */ }
Demo
Acá un demo en funcionamiento.