Ultimas entradas con miniaturas

El gadget Lista de blogs es interesante porque es una de las formas más sencillas de mostrar el contenido de los feeds de cualquier sitio pero, también lo podemos usar para mostrar los nuestros, por ejemplo, las últimas entradas.

Tiene una ventaja sobre otros sistemas: podemos mostrar miniaturas que se correspondan con las imágenes que haya en esas entradas pero tiene una limitación, sólo muestra una entrada por blog. Sin embargo, ya que los feeds son una dirección URL a la que podemos acceder agregándole algunos parámetros, podríamos utilizar esa facilidad para mostrar varias entradas del mismo sitio.

Los parámetros en cuestión son start-index max-results que son los mismos que se utilizan para agregar varios sitemaps. Lo empleamos agregándolos al final de la URL:

http://miblog.blogspot.com/feeds/posts/default?start-index=1&max-results=1

hará que se lea una sola entrada, la última ya que por defecto, los feeds están ordenados cronológicamente. Del mismo modo:

http://miblog.blogspot.com/feeds/posts/default?start-index=2&max-results=1 mostrará la segunda
http://miblog.blogspot.com/feeds/posts/default?start-index=3&max-results=1 mostrará la tercera

y así sucesivamente.

Entonces, vamos a agregar un elemento Lista de Blogs e iremos poniendo las URLs de nuestro sitio, cambiando start-index. Pondremos tantos como se nos ocurra y marcaremos las opciones a gusto.

Si guardamos eso veremos el gadget con las últimas entradas de nuestro blog pero, aún así, podríamos intentar personalizarlo más ya que tiene propiedades definidas por defecto por el mismo Blogger y como el código es accesible, nada impide que lo cambiemos. Entonces, primero crearemos un elemento Lista de blogs, agregaremos las URLs, guardaremos y luego, en la parte de Edición HTML expandiremos la plantilla y veremos el widget que se llamará BlogList1, BlogList2 o algo similar, dependiendo de si ya tenemos agregado otro gadget del mismo tipo:

<b:widget id='BlogList1' locked='false' title='EL TITULO' type='BlogList'>
<b:includable id='main'>
... borraremos todo lo que está acá y lo reemplazaremos ...
</b:includable>
</b:widget>

Ahora, borraré el contenido completo del includable y lo reemplazaré por otro donde he eliminado ciertas cosas y reemplazado las clases CSS para evitar conflictos:

<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div class='milista' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<!-- el gadget es una lista -->
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<!-- cada item de la lista corresponde a una entrada -->
<li>
<!-- inicio rectángulo de cada entrada -->
<div class='UEcontenido'>
<!-- la imagen flotará a la izquierda -->
<div class='UEthumbnail'>
<b:if cond='data:item.itemThumbnail'> 
<!-- si en el post hay una imagen, la usamos -->
<img class='UEsithumb' expr:src='data:item.itemThumbnail.url'/>
<b:else/>
<!-- si no hay una imagen, ponemos una imagen personal -->
<!-- acá debemos poner la dirección URL de la imagen a utilizar -->
<img class='UEnothumb' src='URL_imagen_por_defecto'/>
</b:if>
</div>
<!-- el titulo y enlace de la entrada -->
<div class='UEtitulo'>
<a expr:href='data:item.itemUrl' target='_blank'><data:item.itemTitle/></a>
</div>
<!-- el texto con el resumen de la entrada -->
<div class='UEresumen'><data:item.itemSnippet/></div>
</div>
<!-- final rectángulo de cada entrada -->
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
</div>
</div>

Por supuesto, si se comprende qué es cada parte, esto podría organizarse de cualquier otra forma; en este ejemplo, sólo faltaría agregar el CSS antes de </head>:

<style>
.milista ul { border-bottom: 1px dotted #555; list-style-type: none; margin: 0; padding: 0; }
.milista ul li { background-color: #000; border-top: 1px dotted #555; clear: both; list-style: none; }
.milista ul li:hover { background-color: #123; }
.milista .UEcontenido { padding: 5px; }
.milista .UEtitulo { line-height: 50px; height: 50px; }
.milista .UEtitulo a { color:#ABC; font-family: Tahoma; font-size: 13px; font-weight: bold; }
.milista .UEtitulo a:hover { color: #CDE; text-decoration: none; }
.milista .UEthumbnail { float: left; margin: 0 5px 0 0; }
.milista img { height: 50px; width: 50px; }
.milista .UEresumen { clear: both; color: #999; font-family: Tahoma; font-size: 10px; }
</style>