Come installare il gadget delle miniature degli ultimi post relativi a una singola etichetta su Blogger.
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>
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:
- La posizione delle miniature (left e right )
- La loro dimensione (180 di larghezza e 110 di altezza)
- Il numero di miniature (5)
- 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.
Ciao, una domanda ma questa linea http://nomeblog.blogspot.com/feeds/posts/default/-/categoria dove va messo all'interno del codice?
RispondiElimina@ NicoDonvito
EliminaNon occorre mettere il nome del blog che è automatico. Basta che tu personalizzi questa parte del codice
src="/feeds/posts/default/-/immagini?
dove al posto di immagini devi mettere il nome della categoria che ti interessa. La cosa vale anche per un blog con dominio personalizzato www.mioblog.com
Grazie mille Ernesto, tutto chiaro, funziona benissimo:)
EliminaNon e' che si puo' mettere in orizzontale? =)
RispondiElimina@# Questo no ma ce ne sono anche di orizzontali
Eliminahttp://www.ideepercomputeredinternet.com/2012/12/widget-ultimi-post-miniature.html
http://www.ideepercomputeredinternet.com/2010/01/come-inserire-il-widget-degli-ultimi.html
http://www.ideepercomputeredinternet.com/2011/06/widget-orizzontale-scorrevole-per.html
http://www.ideepercomputeredinternet.com/2012/12/widget-tabella-ultimi-post.html
http://www.ideepercomputeredinternet.com/2011/05/slideshow-orizzontale-degli-ultimi.html
http://www.ideepercomputeredinternet.com/2011/08/widget-di-uno-slideshow-orizzontale-con.html
Basta che in questi widget al posto dell'URL dei post ci metta quello degli ultimi articoli di quella data etichetta cioè
Eliminahttp://nomeblog.blogspot.com/feeds/posts/default/-/categoria
Salve, questo Widget è molto utile, volevo sapere se si può inserire anche il titolo del post visibile invece di passare solo il cursore sulla miniatura. Grazie
RispondiEliminaCon questo widget non si può però nel sito ce ne sono altri. Esempio:
RispondiEliminahttp://www.ideepercomputeredinternet.com/2011/10/widget-degli-ultimi-post-per-etichetta.html
http://www.ideepercomputeredinternet.com/2014/04/widget-ultimi-post-con-miniatura-blogger.html
http://www.ideepercomputeredinternet.com/2012/12/widget-ultimi-post-miniature.html
@#:
Ho un problema con il template del mio blog e posso solo richiamare js "hostati" esternamente, mi chiedevo quindi se fosse possibile implementare le due variabili direttamente nello script. Se sì, come?
RispondiEliminaGrazie mille!
Dovresti fare l'operazione inversa di quella illustrata in questo post
Eliminahttp://www.ideepercomputeredinternet.com/2015/07/js-css-file-blogger-template.html
Per quello che riguarda
var numposts = 5;
puoi aggiungerlo all'inizio del file prima di
function miniature(json)
mentre
//
li puoi togliere quando vai a creare il file che poi dovrai caricare su un hosting tipo Google Drive
http://www.ideepercomputeredinternet.com/2014/07/hotlink-google-drive.html
@#
Posso mettere nel file js anche la parte del feed del label perchè mi da problemi ugualmente.
EliminaNon lo so ma non credo che funzioni. Non è un file. Comunque puoi provare
Elimina@#
Ciao! Intanto grazie per questo widget, poi avrei un problema. Le miniature non appaiono in ordine cronologico. Come posso risolvere?
RispondiEliminaHo risolto da sola! Ho cambiato "orderby=published" nell'ultima sctringa dove c'è il link ;)
EliminaBravissima 😊
Elimina@#