Pubblicato il 05/09/12e aggiornato il

Widget delle miniature degli Ultimi Post per una data Etichetta.

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>

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

widget-ultimi-post-etichetta
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.




12 commenti :

  1. Ciao, una domanda ma questa linea http://nomeblog.blogspot.com/feeds/posts/default/-/categoria dove va messo all'interno del codice?

    RispondiElimina
    Risposte
    1. @ NicoDonvito
      Non 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

      Elimina
    2. Grazie mille Ernesto, tutto chiaro, funziona benissimo:)

      Elimina
  2. Non e' che si puo' mettere in orizzontale? =)

    RispondiElimina
    Risposte
    1. @# Questo no ma ce ne sono anche di orizzontali
      http://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

      Elimina
    2. Basta che in questi widget al posto dell'URL dei post ci metta quello degli ultimi articoli di quella data etichetta cioè
      http://nomeblog.blogspot.com/feeds/posts/default/-/categoria

      Elimina
  3. 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

    RispondiElimina
  4. Con questo widget non si può però nel sito ce ne sono altri. Esempio:
    http://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
    @#:

    RispondiElimina
  5. 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?
    Grazie mille!

    RispondiElimina
    Risposte
    1. Dovresti fare l'operazione inversa di quella illustrata in questo post
      http://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
      @#

      Elimina
    2. Posso mettere nel file js anche la parte del feed del label perchè mi da problemi ugualmente.

      Elimina
    3. Non lo so ma non credo che funzioni. Non è un file. Comunque puoi provare
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.