Widget delle miniature degli Ultimi Post per una data Etichetta.

E' noto che su Blogger si possono acquisire i feed degli articoli, quelli dei commenti, quelli di un singolo commento e anche quelli di una data etichetta. Di default vengono acquisiti un massimo di 25 feed ma con un artificio se ne possono visualizzare molti di più e anche selezionarli in base alla loro posizione. Per esempio è possibile visionare i feed dei post che vanno dal 13 al 65 tanto per dare dei numeri a caso.

L'URL che ci mostra gli ultimi articoli relativi a una singola etichetta ha questa struttura

http://nomeblog.blogspot.com/feeds/posts/default/-/categoria 

dove nomeblog e categoria sono ovviamente delle variabili. Attraverso il formato JSON che è stato introdotto su Blogger a partire dal lontano 2006, si possono richiamare i feed precedentemente manipolati con una opportuna funzione javascript. E'  interessante consultare la documentazione anche in italiano su come si possano creare dei gadget per Blogger.

Si può dire che tutti i widget che richiamano gli ultimi post, con o senza miniature, o gli ultimi commenti vengono realizzati nello stesso identico modo che poi dà dei risultati molto diversi tra loro. Seguendo questa falsariga mi accingo a presentare un widget che mostra le miniature degli ultimi post pubblicati con una determinata etichetta. Il gadget presenterà le miniature in verticale adatte a essere inserite in una sidebar. Si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il codice qui sotto in Sezioni del sito. E' opzionale l'inserimento del titolo

<style>
img.min_etic{
float:left;
width:180px;
height:110px;
margin-right:0px;
margin-bottom:8px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
function miniature(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
var thumburl;try{thumburl=entry.media$img.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}
else thumburl='';}
document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="min_etic" src="'+thumburl+'"/></a>');
if(i!=(numposts-1))
document.write('');}
document.write('</div>');}
//]]>
</script>
<script type='text/javascript'>var numposts = 5;</script>
<script type="text/javascript" src="/feeds/posts/default/-/immagini?orderby=updated&alt=json-in-script&callback=miniature"></script>

Si va su Salva e si posiziona con il mouse. L'aspetto del gadget sarà simile a questo


e se ne può visionare una demo che ho pubblicato online

I parametri da personalizzare sono:

1. La posizione delle miniature (left e right )
2. La loro dimensione (180 di larghezza e 110 di altezza)
3. Il numero di miniature (5)
4. La etichetta prescelta (immagini nel codice di test)

Quando si passerà con il cursore sulla miniatura si potrà leggere il titolo del post collegato che si potrà aprire cliccandoci sopra. Il widget è adatto a blog che hanno immagini in tutti i post di una data categoria perché se non ci fossero si visualizzerebbe uno spazio bianco. Non vengono rilevate le immagini inserite nell'articolo dopo il Read More.