Hace unos meses, Rô me preguntaba si sabía cómo lograr un efecto que se muestra en assessmyblog.blogspot.com, que básicamente resume los datos personales de un post (título, número de/enlace a comentarios, etiquetas, fecha de publicación, etc.) en la sidebar y no (o además de) en el footer del post , como es tradicional.
Explicación
En un post anterior, explicaba cómo lograr esto con el “status message” de Blogger. El principio es el mismo: utilizar el widget “Blog”, en este caso Blog2, y que éste se muestre en la sidebar y no en el área principal de los posts en nuestros blogs. Sin más explicaciones preambulares, he aquí los pasos para lograr lo que queremos:
1. Desde Edición de HTML en nuestro panel, sin expandir artilugios (para no complicar las cosas), buscamos la siguiente línea:
<b:section class='sidebar' id='sidebar' preferred='yes'>
O alguna parecida. Ésta es básicamente la sección de nuestra sidebar.
2. Justo debajo de ella, pegamos el siguiente código (que explicaré detalladamente):
<b:widget id='Blog99' locked='false' title='Blog Meta' type='Blog'> <b:includable id='main' var='top'> <b:if cond='data:blog.pageType == "item"'> <b:loop values='data:posts' var='post'> <b:include data='post' name='post'/> </b:loop> </b:if> </b:includable> <b:includable id='post' var='post'> <div class='meta'> <div class='title'>Estás leyendo: "<data:post.title/>".</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 != "true"'>,</b:if> </b:loop> </b:if> </div> <div class='date'> Fecha de publicación: <data:post.dateHeader/>. </div> </div> </b:includable> </b:widget>
3. Guardamos y listo. Lo básico está hecho. Ahora, las explicaciones pertinentes y la parte de estilo.
- El contenedor con clase meta es el contenedor general, que dentro de sí tendrá otros contenedores, los cuales mostrarán el título del post, los comentarios, las etiquetas, y la fecha de publicación respectivamente.
- El contenedor con clase title, muestra exactamente el título de la entrada (que en Blogger es: <data:post.title/>). Si nos fijamos, he añadido ‘Estás leyendo: “…”.’ Eso puede ser cambiado fácilmente.
- El contenedor con clase comments, muestra el enlace a los comentarios (se muestra así: “X comentarios”).
- El contenedor con clase labels, muestra las etiquetas que tiene el post. No hay mucha ciencia ahí.
- El contenedor con clase date, muestra la fecha en que fue publicado el post (en Blogger eso es: <data:post.dateHeader/>). Ahí he añadido “Fecha de publicación: “…”.’ Puede ser cambiado, claro.
Estilos
Como es claro, cada uno de estos contenedores puede ser estilizado a nuestro gusto, con CSS (recordemos que el CSS es todo el código escrito entre <b:skin> y </b:skin>). Estos son los pequeños cambios hice en mi blog de pruebas:
.meta {
background: red;
font-family: 'Century Gothic', sans-serif;
padding: 5px;
margin: 10px 0 0;
}
.meta .title {background: blue; color: white; padding: 3px;}
.meta .comments {background: green; color: white; padding: 3px;}
.meta .comments a {color: white; text-decoration: underline;}
.meta .labels {background: orange; color: black; padding: 3px;}
.meta .labels a {color: white;}
.meta .date {background: purple; color: white; padding: 3px;}
Como ven, son propiedades básicas. Todo está en nuestra imaginación.
Demo
Acá un ejemplo en funcionamiento.