Pubblicato il 13/04/14 - aggiornato il  | 21 commenti :

Widget degli Ultimi Post con miniatura per una data etichetta di Blogger.

Un gadget degli Ultimi Articoli che mostra titolo, miniatura e snippet degli ultimi post pubblicati con una data etichetta.
I gadget che mostrano gli ultimi articoli di un sito su piattaforma Blogger sono piuttosto numerosi come lo sono quelli che mostrano gli ultimi post relativi a una determinata etichetta. A tal proposito ricordo come si possa addirittura creare un widget con cui visualizzare tutti i post di una determinata etichetta e come si possa anche inserire in una pagina statica.

In linea di massima si può convertire un widget degli ultimi post in un gadget degli ultimi post per una data etichetta e viceversa semplicemente operando sull'indirizzo dei feed. In questo articolo verrà illustrata una alternativa di un widget degli ultimi post per etichetta che mostra anche le miniature della prima immagine dell'articolo qualora questa fosse presente.

widget-ultimi-post-etichetta
La miniatura è inserita in un bordo con sfondo con colori personalizzabili che mutano quando l'elemento viene puntato dal cursore. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga ]]></b:skin> . Subito sopra si incolla questo codice

/* Ultimi post per etichetta */
img.label_thumb{
float:left;
padding:5px;
border:1px solid #7e7e7e;
background:#D2D2D2;
margin-right:10px;
height:55px;
width:55px;
}
img.label_thumb:hover{
background:#f7f7f7;
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
adding: 0;
}
ul.label_with_thumbs li {
list-style:none;
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}

Si cerca poi l'altra riga </head> e, subito sopra, si incolla quest'altro codice

<!-- Ultimi post per Etichetta -->
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');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$thumbnail.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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoj_pc_0RbHgnod-qXkIRkbezHkmu1tY9kfeBV_1fwwR1ItD_Q9cKGfGtRZznMYSI4n44y6kZ5blMUbuUcqq5BiQW75psFc0zAcR69kYufg4DKUHfmwf9pkxQ2c5BQri6ZFu7M8vuLCKyi/s70/noimage.jpg';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Gen";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="Mag";monthnames[6]="Giu";monthnames[7]="Lug";monthnames[8]="Ago";monthnames[9]="Set";monthnames[10]="Ott";monthnames[11]="Nov";monthnames[12]="Dic";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Commenti')commenttext='1 Commento';if(commenttext=='0 Comments')commenttext='Nessun Commento';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

Si salva il modello. Per inserire il gadget vero e proprio dobbiamo andare su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla quest'ultimo codice

<script type='text/javascript'>var numposts = 6;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 90;</script>
<script type="text/javascript" src="/feeds/posts/default/-/etichetta?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Si salva e si posiziona con il drag & drop del cursore.


Le personalizzazioni più importanti sono state evidenziate di colore rosso e sono le seguenti:
  1. Colore del bordo e dello sfondo delle miniature (#7e7e7e e #D2D2D2)
  2. Colore dello sfondo delle miniature al passaggio del mouse (#f7f7f7)
  3. Dimensione delle miniature (55 pixel)
  4. URL della immagine di default da visualizzare se non ce ne sono nel post
  5. Il numero dei post da mostrare (6)
  6. Il numero dei caratteri dell'incipit (90)
  7. Il nome della etichetta da sostituire a etichetta
Ricordo che si possono mostrare anche i post che abbiano contemporaneamente due etichette date. Volendo si può inserire tutto il codice in un widget HTML/Javascript incollando i tre blocchi uno dopo l'altro con l'accortezza che il primo blocco dovrà essere inserito tra le righe <style> e </style>.


21 commenti :

  1. Bellissimo! C'è però un modo per metterli in ordine cronologico? A me appare che il più recente è l'ultimo nell'elenco.. :(

    RispondiElimina
  2. Stranissimo. Il più recente dovrebbe essere al primo posto
    @#

    RispondiElimina
  3. che peccato nel mio blog non funziona!

    RispondiElimina
    Risposte
    1. Hai sostituito etichetta con una etichetta esistente nel tuo blog? Si tratta di un errore abbastanza comune
      @#

      Elimina
  4. huuuh che peccato, ero così felice funzionasse, ma non mi appaiono in ordine, ho aggiunto tre widget però, potrebbe essere questo il problema? messo 4 post per ognuno ed in tutti le ultime due miniature riguardano i post recenti mentre le prime due sembrano state scelte a caso :/ per ora li lascio e domani vedo se lasciando un solo widget funziona :/

    RispondiElimina
    Risposte
    1. Non credo siano scelte a caso. Sono gli ultimi post relativi a quella etichetta
      @#

      Elimina
    2. Può darsi però che con più widget dello stesso tipo visto che riferiscono alla tecnologia JSON qualcuno non funzioni
      @#

      Elimina
    3. ok risolto :) in pratica ho notato che non solo pubblicando un nuovo post, ma anche soltanto aggiornandolo, compare in automatico nel widget e ieri prima d'installarlo ne ho aggiornati vari, per questo era tutto un po' alla rinfusa, quindi ora ho semplicemente ri-aggiornato gli ultimi 4 post per etichetta ed è tutto ok:) e tutto sommato il veder comparire un post nel widget semplicemente aggiornando può tornare molto utile :) un difetto/pregio insomma, bellissimo widget, graaazie

      Elimina
  5. Risposte
    1. Leggi questo post
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      poi per quella riga basta cercare
      /b:skin
      e la trovi subito. Devi solo stare attenta a che non ci sia una parentesi graffa prima di ]]>. Nel caso ci fosse devi inserire il cursore e andare su Invio per far andare la riga che ti interessa più in basso
      @#

      Elimina
    2. Grazie per la risposta velocissima! Anche prima ho cercato il codice in questo modo ma davvero.. non mi trova nulla! :(

      Elimina
    3. Non cercare il codice con Ctrl+F. Intorno alla 14a riga dovresti vederlo. Clicca sulla freccetta nera sulla sinistra per visualizzare tutto il codice che sarà di colore blu. Scorrilo tutto fino a che non cambia colore. L'ultima riga blu è quella che cerchi
      @#

      Elimina
  6. E' possibile allineare il titolo e l'incipit in alto e distanziarlo dalla miniatura? Ho notato che anche se modifico il codice html nel modello (per esempio la grandezza della miniatura), questo poi non corrisponde a un modifica effettiva nel blog. Come mai?

    RispondiElimina
    Risposte
    1. In linea di massima si possono fare le modifiche che ho elencato. Per aumentare la distanza tra miniatura e testo modifica il valore di padding:8px 0; in padding:8px 5px;
      Eventualmente prova a modificare anche l'altro padding
      @#

      Elimina
  7. Effettivamente sono elencati a caso e non in ordine cronologico. Ho fatto come suggerito da Carmen (riaggiornando i post) e funziona. Compaiono in ordine cronologico. Però ho modificato il numero dei post (per far elencare tutti quelli dell'etichetta) e ne vengono elencati al massimo 25. Si può risolvere ?

    RispondiElimina
    Risposte
    1. 25 è il numero di default per i feed. Si può anche aumentare in questo modo
      http://www.ideepercomputeredinternet.com/2013/03/blogger-feed-url.html
      però non so se sarà possibile modificare lo script. Prova a sostituire
      feeds/posts/default/-/etichetta?orderby
      con qualcosa simile a questo
      feeds/posts/default/-/etichetta&max-results=50?orderby
      ma ho molti dubbi che funzioni
      @#

      Elimina
  8. Ciao Ernesto, ho provato questo widget ma se aumento le dimensioni delle miniature non succede nulla: rimangono tali e quali. Hai idea di come sia possibile? Grazie!

    RispondiElimina
    Risposte
    1. Non conosco la ragione però se aumenti le dimensioni poi le immagini si sgranano quindi non so quanto sia consigliabile
      @#

      Elimina
    2. Ok, grazie mille. Stavo cercando un widget che mi consentisse di visualizzare le miniature degli ultimi post per etichetta, ma anche di personalizzare i font dei titoli delle anteprime: mi sa che chiedo troppo :)

      Elimina
  9. Ottimo widget e molto molto comodo, in data 10 marzo 2016 perfettamente funzionante su modello Simple (ultramodificato da me anche grazie alle guide di Ipcei) con dominio personalizzato.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy