Gadget rotativo para entradas recientes con lista seleccionable

 Este es un código JavaScript que permite mostrar las últimas publicaciones de cualquier feed con la particularidad de que tiene dos partes -ambas interesantes- y que podemos utilizar individualmente o combinadas. 

En la parte superior se verá una sola entrada con su título (enlace), autor, fecha y un pequeño resumen de su contenido. Además, esta entrada irá rotando automáticamente de entre una lista cuya cantidad de elementos nosotros decidiremos. 
En la zona inferior se verá la lista completa de los posts seleccionados para el rotador y al pasar el puntero por encima de cualquiera de ellos, la entrada correspondiente se verá en la parte superior, rompiendo así el ciclo automático.

Pero como siempre, mejor verlo en acción para ver si hace lo que queremos antes de montar nada.

Loading...

Y como dije que se trata de un gadget, pues ahí es dónde hay que meter el código, en un gadget tipo HTML/JavaScript si hablamos de Blogger, aunque debería funcionar en cualquier plataforma.

Esto es lo que habría que copiar y luego os comento los ajustes necesarios. Sin miedo, que la mayor parte es CSS.

<style> /* CONTENEDOR GENERAL */ .gfg-root { width: 102%; height : auto; position : relative; overflow : hidden; margin: 0 auto; text-align : center; font-size: 12px; border: 2px solid #00FFFF; } /* TITULO FEED/BLOG */ .gfg-title { font-size: 16px; font-weight : bold; color : #fff; background-color: #00FFFF; line-height : 1.4em; overflow : hidden; white-space : nowrap; } /* CONTENEDOR CUERPO SUPERIOR (entrada con resumen) */ .gfg-entry { background-color : white; width : 100%; height : 9.2em; position : relative; overflow : hidden; text-align : left; margin-top : 3px; } /* TITULO ENTRADA CUERPO SUPERIOR */ .gf-title a { font-weight: bold; } /* SUBTÍTULO LISTA DE ENTRADAS */ .gfg-subtitle { display: none; } /* CONTENEDOR CUERPO INFERIOR (lista entradas) */ .gfg-list { position : relative; overflow : hidden; text-align : left; } /* CADA UNA DE LAS ENTRADAS DE LA LISTA */ .gfg-listentry { line-height : 1.5em; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; padding-left : 15px; padding-right : 5px; } /* ENTRADAS IMPARES DE LA LISTA */ .gfg-listentry-odd { background-color : #eeeeee; } /* ENTRADAS PARES DE LA LISTA */ .gfg-listentry-even { background-color : #fefefe; } /* MARCA PARA LA ENTRADA ACTUALMENTE VISIBLE */ .gfg-listentry-highlight { background: #87CEFA; } .gfg-listentry-highlight:before { position: absolute; left: 0; content: '\25BA '; font-size: 14px; color: #eee; } .gfg-listentry-highlight a { color: #eee; } /* Ajustes */ .gfg-root .gfg-entry .gf-result { position : relative; background-color : white; width : auto; height : 100%; padding-left : 20px; padding-right : 5px; } .gfg-root .gfg-entry .gf-result .gf-title { font-size: 14px; line-height : 1.2em; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; margin-bottom : 2px; } .gfg-root .gfg-entry .gf-result .gf-snippet { height : 3.8em; color: #000000; margin-top : 3px; } .clearFloat { clear : both; } </style><br /> <script src="http://www.google.com/jsapi" type="text/javascript"></script><script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script><br /> <script type="text/javascript"> function showGadget() {var feeds = [{title:'Lista',url:'http://tabooktron.blogspot.com.es/feeds/posts/default?redirect=false&start-index=5&max-results=10'},]; new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'Tabooktron.es', numResults : 10, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1"); google.setOnLoadCallback(showGadget); </script><br /> <div id="feedGadget"> Loading...</div>

En verde he marcado lo que se puede configurar.

En primer lugar está la dirección del feed a mostrar. Esa (url:'http://www.tabooktron.es/feeds/posts/default) evidentemente la tenéis que cambiar por la vuestra. Podéis usar sin problemas la del tipo del ejemplo, una de FeedBurner o incluso una tipo http://NOMBRE_BLOG.blogspot.com/atom.xml.

Lo siguiente es start-index=5. Este número indica a partir de qué post queremos empezar a mostrar. Si dejamos ahí un 1 que es lo que saldría por defecto, en la página principal del blog se verían en la lista las mismas entradas que tenemos a la vista en la página, es decir, los últimas, así que personalmente prefiero poner un número mayor. Si queréis que os muestre otras más antiguas todavía, pues sólo tenéis que incrementar la cifra.

max-results=10 indica el número máximo de entradas que vamos a leer del feed, a partir de la que indicamos en el start-index=5. Este número siempre tiene que ser igual o superior al que veremos después y que servirá para fijar el número de entradas que realmente mostrará el gadget. Lo fácil sería poner un 500 para no fallar, pero cuanto mayor sea el número, más tardará en cargar el gadget, así que mejor ajustarlo a lo que queremos mostrar... o poco más.

Por último están algunos parámetros propios del script:

• title: 'Tabooktron.es', el rótulo que saldrá arriba del todo.
• numResults : 10, número de posts que efectivamente se verán en la lista y rotando
• displayTime : 5000, tiempo de retardo entre posts en el rotador (en milisegundos)
• hoverTime : 500, tiempo mínimo sobre un elemento de la lista para que se visualice en la parte superior.