Ultimas entradas (Google Ajax)

Otra forma más de mostrar en el blog nuestras últimas entradas que nos ofrecen desde Google AJAX Feed API donde podéis ver un ejemplo en funcionamiento.
Siguiendo los pasos que allí nos indican, no es demasiado difícil conseguir la construcción de un widget que muestre las últimas entradas del blog de una forma muy original.
Yo os proporciono el código del mio, después solo tendréis que tratar de personalizarlo para adaptarlo a vuestro blog.

[1] Antes de comenzar tendremos que obtener nuestra API Key de Google.
Accedemos a la página de Google Ajax Feed API donde obtendremos nuestra Key, para ello solo tenemos que marcar la casilla de "I have read and agree with the terms and conditions" e introducir la url de nuestro blog para después pinchar en el botón "Generate API Key":

[2] Añadiremos ahora el código siguiente antes de </head> sin olvidarnos de sustituir en el código "TU_API_KEY" por la nueva Key que acabamos de obtener para nuestro blog:

<script src='http://www.google.com/jsapi/?key=TU_API_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 : 95%;
font-size: 16px;
}
.gfg-title {
font-size: 18px;
padding-left: 10px;
color : #fffcc;
background-color: #6998CA;
}
.gfg-title a {
color : #fff;
}

.gfg-root {
border: 1px solid #6998CA;
font-family: "Georgia", sans-serif;

}
.gfg-listentry-highlight {
background-image : url("http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SN1icxHvPXI/AAAAAAAAET4/_V1bKeYDeTk/s320-R/0036_bullet02.png");
background-repeat: no-repeat;
background-position : center left;
}
.gfg-listentry-odd {
background-color : #d7e5f0;
}
</style>
<script type='text/javascript'>
function load() {
var homeUrl = "<data:blog.homepageUrl/>";
var feed = homeUrl + "feeds/posts/default";
new GFdynamicFeedControl(feed, "feedControl");
var options = {
numResults : 10,
displayTime : 5000
}
new GFdynamicFeedControl(feed, "feedControl", options);
}
google.load("feeds", "1");
google.setOnLoadCallback(load);
</script>

[3] Guardamos cambios y en el panel de "Diseño" pinchamos en añadir un nuevo Gadget de Html y pegamos dentro estas líneas de código:

<div id="feedControl">
<span style="color: #0066cc;">Cargando ultimas entradas...<img src="http://i201.photobucket.com/albums/aa306/picumoros/mozilla_blu.gif"/></span></div>

Personalización:
El widget funciona también colocado en las entradas, solo hay que añadir el último código dentro del editor en la entrada donde vayamos a mostrarlo.

El tamaño del widget lo he puesto en porcentaje (width: 95%;) de tal manera que ocupara ese espacio, el 95%, del contenedor donde sea colocado (widget o entrada), aunque también podemos usar pixeles.

La cantidad de entradas que se mostrarán puede cambiarse en donde dice "numResults:10;" cambiando "10" por el número de entradas a mostrar.

En displayTime : 5000 controlaremos la velocidad de desplazamiento de la flecha que marca los títulos, a mayor número más lentitud y viceversa, en el código está en 5000, pero en el ejemplo en funcionamiento el valor es de 2000.

En mi diseño he usado una pequeña flecha azul que va marcando cada título, podéis usar vuestro propio icono cambiando la url del mio por la url del nuevo (la parte destacada en negrita):

.gfg-listentry-highlight {
background-image : url("http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SN1icxHvPXI/AAAAAAAAET4/_V1bKeYDeTk/s320-R/0036_bullet02.png");
background-repeat: no-repeat;
background-position : center left;
}

En Bullet Madness podéis encontrar unos iconitos muy adecuados para sustituir a mi flechita azul.

En el paso [3] también podéis usar una "imagen de carga" distinta a la mía, solo tenéis que cambiar la url de mi ejemplo por la de vuestra imagen.

En cuanto a los cambios de color, texto, tamaño de fuente, etc... lo haremos sin demasiado problema en la parte CSS del código, es decir, lo que está entre <style type='text/css> y </style>.

No os preocupéis si tarda un poco en empezar a funcionar...

¡Manos a la obra!

ElHackerZ