Ultimas entradas (con Ajax)

Hacía tiempo que le había echado el ojo a este hack de Hoctro, pero no me he animado a probarlo hasta ahora: quería mostrar de otra manera las últimas entradas en un blog, de forma que pensé que había llegado el momento. Podéis ver cómo funciona en la cabecera de las entradas de Hoctro, así como en el pie del bloque de entradas de mi blog Nada.
Como podéis comprobar, las últimas entradas se despliegan dentro de una caja, en la que van referidas por un icono de flecha. Al pasar el ratón sobre cada uno de los títulos de las entradas, se muestra- en el titular de arriba- la entrada que hemos señalado, con su fecha, hora y autor, así como una breve reseña de su contenido. POr supuesto, cuando picamos en ese titular, nos redirige el blog a esa entrada.

La verdad es que lo encuentro bastante útil y queda muy guapo.

Y vamos a ver cómo se logra:

.- En primer lugar, tenemos que obtener una clave API-Ajax-Google para conseguir desplegar el feed del blog donde queramos insertar el hack, y acudiremos a esta Página.

.- A continuación, insertaremos este script, y su estilo, en nuestra plantilla (como siempre, antes del cierre </head>) y sustituiremos "YOUR KEY" por la clave API que hemos obtenido para nuestro blog:

<script src='http://www.google.com/jsapi/?key=YOUR-KEY' type='text/javascript'/>

<script src='http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js' type='text/javascript'/>



<style type='text/css'>

@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");



#feedControl {

margin-top : 20px;

margin-left: auto;

margin-right: auto;

width : 440px;

font-size: 16px;

}

.gfg-title {

color : #612e00;

background-color: #FFF3DB;

}

.gfg-title a {

color : #612e00;

}

.gfg-root {

border: 1px solid #956839;

font-family: "Georgia", sans-serif;



}

</style>

<script type='text/javascript'>

function load() {

var homeUrl = "<data:blog.homepageUrl/>";

var feed = homeUrl + "feeds/posts/default";

new GFdynamicFeedControl(feed, "feedControl",

{numResults : 4});

<h6>Widget by <a href='http://hoctro.blogspot.com/2008/09/google-ajax-feed-widget.html'>Hoctro</a></h6>



}

google.load("feeds", "1");

google.setOnLoadCallback(load);

</script>

Aquí, además, (donde veáis "numResults : 4") podéis cambiar el número de entradas que queréis desplegar, pero tened en cuenta que el tope es 25. Además, podéis cambiar el estilo de la caja. Yo he cambiado el ancho y el color del fondo del titular.

.- Por último, id a "Diseño" de plantilla y abrid un nuevo elemento HTML-javascript. En su interior poned esta línea

<div id="feedControl">Loading...</div>

Sustituid "Loading" por "cargando" o lo que más os apetezca. Lo ideal es colocar el widget en la cabecera del bloque de entradas o bien al final.

Y ya está... bien sencillo y guapo...