Entradas recientes

Hola amigos que me leen, ya tenía meses sin publicar por falta de tiempo, pero hoy tuve el suficiente para escribir esta entrada.

Hoy les enseñaré a poner en su blog de Blogger un gadget de entradas recientes con thumbnail, funciona utilizando el json del blog, no es muy difícil de hacerlo si saben de JavaScript, pero no hablaré de eso, solo pondré el código necesario.

Instalar el gadget

Para instalar el gadget vamos a tener que agregar dos códigos, el primera será el JavaScript que hace funcionar el gadget, ese se agregará directamente en la plantilla desde la edición HTML del blog, el segundo es el gadget que mostrará las entradas, éste se pondrá en un gadget HTML/JavaScript.

Primero vamos a agregar este código en la plantilla, para eso nos vamos a nuestro blog -> Plantilla -> Editar HTML, ahí en el editor buscan </head> y justo arriba agregan el siguiente código:

<style type="text/css">
.reciente-contenido {
 margin-bottom: 11px;
}
.reciente-thumbnail {
 float: left;
 margin: 0 10px 10px 0;
}
.reciente-titulo {
 margin-bottom: 5px;
}
</style>
<script type="text/javascript">
// Entradas recientes con Thumbnail
// Script de Camilo Fernando Escobar (ayudarbloggers.com)
//<![CDATA[
function excerpt(texto, caracteres) {
 var tamano = texto.length;
 var salida = (tamano > caracteres) ? texto.substr(0, caracteres)+'...' : texto;
 return salida;
}
function thumbnail(json, numero) {
 var img = json.feed.entry[numero].media$thumbnail;
 var thumb = (typeof img != 'undefined') ? img.url : 'http://lh6.ggpht.com/_dsEG33PDaHw/TSJuyxzIKkI/AAAAAAAAAgU/GP7fRmaI-5A/thumbnail.png';
 return thumb;
}
function recientesThumbnail(json) {
 var html = '<div class="entradasRecientes"><ul>';
 var total = (limite > json.feed.entry.length) ? json.feed.entry.length : limite;
 for(var i = 0; i < total; i++) {
 html += '<li><div class="reciente-contenido"><div class="reciente-thumbnail"><a href="'+json.feed.entry[i].link[4].href+'" target="_blank" title="'+json.feed.entry[i].title.$t+'"><img alt="" border="0" height="72" src="'+thumbnail(json, i)+'" width="72"></a></div><div class="reciente-titulo"><a href="'+json.feed.entry[i].link[4].href+'" title="'+json.feed.entry[i].title.$t+'">'+json.feed.entry[i].title.$t+'</a></div><div class="reciente-excerpt">'+excerpt(json.feed.entry[i].content.$t, 140)+'</div></div><div style="clear: both;"></div></li>';
 }
 html += '</ul></div>';
 document.write(html);
}
//]]>
</script>

Así lo guardan, ahora se van a Diseño y ahí agregan un gadget HTML/JavaScript, en él pegan el código siguiente:

<script type="text/javascript">
var limite = 5; // Numero de entradas a mostrar
</script>
<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&orderby=published&callback=recientesThumbnail"></script>

Y también lo guardan así, y listo 😀 ya tendrán funcionando el gagdet de entradas recientes con thumbnail 😉

Es importante, el gadget tiene unos estilos muy básicos, lo normal sería que se adapte a los que ya tenga la plantilla, pero en caso de que se vea mal pueden dejar un comentario aquí mismo en el post y yo con mucho gusto les ayudaré.