Ultimas entradas en blogger con Ajax (2)

E n esta ocasión les traigo un script para blogger que vi en Hoctro que nos permite mostrar las últimas entradas del blog dentro de una caja donde se muestran los títulos de las entradas junto con un breve resumen de la entrada. Al clickear sobre el título se abre la entrada.
El script es muy útil, facil de instalar y muy personalizable, en solo cuatro pasos lo podemos tener en funcionamiento en nuestro blog.

Instalación del script.

El primer paso es obtener generar una clave API-Ajax-Google. ¿Cómo se hace eso? Vamos a esta página API AJAX de Google. Ahí generamos la clave API para nuestra dirección Web. La clave será un código parecido a este:

ABQIAAAArMHnMbddmST5GSFDDWbwVTT-lsLF-pULjRZWNOiM4BpfBdUOHhSXw1H1_yqaCrIdWlSxAnxtWxPkmQ

Este código lo tendremos que reemplazar después en el script.

Es segundo paso es insertar el siguiente script de estilo en el código HTML de nuestra plantilla justo antes de </head>

<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>

El tercer paso es sustituir el código en negritas "YOUR KEY" por la clave API que hemos generado previamente.

El cuarto paso será ir a "Diseño" de la plantilla y crear un nuevo "elemento HTML-javascrip" donde colocaremos la suiguiente linea de código:


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


Vía: Hoctro