Pubblicato il 13/02/12e aggiornato il

Widget degli Articoli Recenti con Miniature per Blogger.

Installare il widget degli ultimi post su Blogger.
Ecco un'altra proposta per un widget che mostra gli Ultimi Post con Miniature per utenti di Blogger. Ne ho già presentati altri anche di grande successo come questo gadget degli Articoli Recenti ma i blog hanno le più svariate esigenze e poter scegliere tra varie opzioni è sempre meglio. 

Questo gadget mi risulta essere stato sviluppato da Webaholic e non differisce poi molto dalle altre versioni presenti in rete. La presenza delle miniature accanto al titolo di ciascun post è molto utile per i blog che fanno delle immagini il loro punto di forza. Le personalizzazioni applicabili riguardano però anche la possibile eliminazione della miniatura dall'elenco degli Ultimi Post. Ho tradotto il widget inserendo le iniziali dei mesi in italiano e modificato il javascript per mostrare la data secondo il nostro stile e non nel modo americano che prevede di scrivere prima il mese e poi il giorno.


ultimi-post-miniature

Per l'installazione non occorre neppure modificare il template ma basta aggiungere un elemento pagina. Si va quindi su Layout > Aggiungi un gadget > HTML/Javascript. Si digita il Titolo del widget e, in Sezioni del sito, si incolla il seguente codice

<style type='text/css'>
img.recent_thumb {padding:1px;width:70px;height:70px;border:0;
float:left;margin:5px 10px 10px 0; border: 1px solid #ccc;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 100px;margin: 0px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {list-style:none; padding-bottom:5px;padding-top:5px;min-height:75px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
.recent_posts_with_thumbs h4 {
text-transform: uppercase;
font-size: 12px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_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://lh5.googleusercontent.com/-e30r1uLzAhY/TzjkJN7EfyI/AAAAAAAAWi8/rIzEuilOVH8/s72/no-image.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('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><h4><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b></h4>'); 
    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('<i>');
         document.write(postcontent);
          document.write('</i>');}
      else {
          document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...');
          document.write('</i>');}

var towrite='';var flag=0;
document.write('<br><strong>'); 
if(showpostdate==true) {towrite=cdday+ ' - ' + towrite+monthnames[parseInt(cdmonth,10)]+' - '+cdyear;flag=1;} 
if(showcommentnum==true)
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='0 Comments') commenttext='0 comentarios';
if(commenttext=='1 Comment') commenttext='1 comentario';
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">Leggi...</a>';
flag=1;
;

document.write(towrite); 
document.write('</strong></li>');
if(displayseparator==true)
if (i!=(numposts-1))
document.write('');
}document.write('</ul>'); 
}
//]]>
</script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 80;</script>
<script src='http://www.ideepercomputeredinternet.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

dove le personalizzazioni da introdurre riguardano i seguenti parametri:
  1. L'URL di questa immagine che è la miniatura che viene mostrata di default quando non sono presenti foto nel post
  2. L'indirizzo del blog da sostituire a quello di questo sito nella penultima riga
  3. numposts indica il numero dei post che vengono visualizzati (5)
  4. numchars indica il numero di caratteri dell'incipit del post (80)
  5. Dimensioni dei caratteri del titolo del post font-size: 12px;
Si può applicare il valore true oppure il valore false ai seguenti parametri se si vogliono mostrare o meno gli elementi relativi
  1. showpostthumbnails: per mostrare le miniature dei post
  2. displaymore: per mostrare il link Leggi… che può anche essere sostituito da un'altra espressione
  3. displayseparator: per mostrare una linea di separazione tra ciascun elemento
  4. showcommentnum: per mostrare i commenti ricevuti
  5. showpostdate: per mostrare la data dell'articolo
  6. showpostsummary: per mostrare la parte iniziale del post
Dopo aver salvato il widget si posiziona con il mouse. Ho anche pubblicato una Demo degli Ultimi Articoli con MIniature.
Aggiornamento: Ho aggiunto la riga list-style:none; per non mostrare il puntino dell'elenco numerato a fianco della miniatura.




25 commenti :

  1. Buongiorno Ernesto,ho da farti una domanda. come è possibile sostituire il la scritta del nome di una pagina in blogger, con una immagine?
    grazie in anticipo

    RispondiElimina
  2. Attenzione Ernesto con Firefox 9 la visualizzazione risulta sfalsata: il puntino della lista a sinistra e il titolo abbassato. Meglio impedire il puntino della lista con i CSS
    Qua l'immagine di come si vede con forefox9:
    http://lh5.googleusercontent.com/-c52JGet-y2s/Tzk6ZnIhCjI/AAAAAAAADPc/g1h0BpH50EY/s512/ultimiarticoli.png

    RispondiElimina
  3. @Giorgiogal
    Grazie inserirò un list-style:none;

    @GAIA VINCENZI
    E' una cosa a cui non ho mai pensato ma non so se sarebbe pagante perché mancando il testo del titolo potrebbe non venire indicizzata. Proverò a vedere un po' ma senza impegno ;)

    RispondiElimina
  4. grazie Ernesto!
    intendevo una cosa di questo tipo per le pagine:
    http://www.stylescrapbook.com/

    RispondiElimina
  5. Ciao.
    E' possibile avere lo stessa widget ma in versione orizzontale?

    RispondiElimina
  6. @Benzene
    No. Sai che i widget orizzontali sono sempre concettualmente diversi da quelli verticali che si basano su degli elenchi

    @GAIA VINCENZI
    Guarda che si tratta di un semplice menù fatto con delle immagini equidistanti che puoi creare facilmente anche tu
    http://www.ideepercomputeredinternet.com/2011/10/come-allineare-alla-stessa-distanza-le.html
    al posto del codice delle icone dei social ci metti le immagini del menù che vuoi creare con i relativi collegamenti. Se apri una delle pagine che mi hai indicato, per esempio questa
    http://www.stylescrapbook.com/2011/01/recent-press.html
    vedi che il titolo "About" è presente, non è che è stato sostituito dalla immagine.

    RispondiElimina
  7. Ciao Ernesto!
    Ho usato il codice di questo widget per realizzare una sorta di "pagina-indice"...
    Purtroppo però mi sono resa conta che vengono visualizzati solo 25 post nonostante "numpost" sia impostata su 2000...
    Mi rendo conto che quando e se il mio blog avrà una lista di post più consistente, dovrò comunque trovare una soluzione alternativa, onde evitare una pagina lunghissima.
    Mi incuriosiva comunque capire il perchè di questo piccolo "difetto".

    Intanto grazie

    RispondiElimina
    Risposte
    1. @MaryCaj
      In Blogger vengono rilevati solo gli ultimi 25 post. Si possono visualizzare anche molti post in più seguendo questo tutorial
      http://www.ideepercomputeredinternet.com/2012/05/come-visualizzare-un-determinato-numero.html
      Devi modificare l'indirizzo dei feed nel codice come illustrato nell'articolo. Ricordati però che se hai pubblicato solo 50 post non puoi mettere 100 come numero perché non funzionerà. Al massimo si può mettere il numero dei post già pubblicati.

      Elimina
    2. Grazie mille! Sei stato di grande aiuto e adesso funziona come volevo! (ho solo dovuto aggiungere ad intuito un & dopo la modifica per farlo funzionare)

      ^_^ il tuo blog è ormai un punto di riferimento!

      Elimina
  8. Grande Ernesto, volevo chiederti se potevi inserire un codice per far sì che i post inseriti con specifiche etichette, NON appaiano nel corpo principale del blog, ma solo nei widget relativi alle etichette di cui fanno parte. spero di essermi fatto capire. grazie.

    RispondiElimina
    Risposte
    1. Ti linko due tutorial in inglese. In questo momento non ho tempo di farne uno in italiano, forse in seguito...
      http://blogtechtics.com/2013/06/hide-some-posts-from-blogger-home-page-updated.html
      http://www.southernspeakers.net/2011/08/hide-certain-posts-from-blogger.html
      @#

      Elimina
  9. Buonasera Ernesto. Sto guardando con molto interesse tutti i suoi suggerimenti. Ho bisogno di un Widget degli Articoli Più Interessanti con Miniature o senza per Blogger (in verticale e sullo stile di questo sopra). Il mio blog non accetta gli slideshow. Come posso fare??? LA RINGRAZIO MOLTO. Lucia

    RispondiElimina
  10. Buonasera Ernesto. Sto guardando con molto interesse tutti i suoi suggerimenti. Ho bisogno di un Widget degli Articoli Più Interessanti con Miniature o senza per Blogger (in verticale e sullo stile di questo sopra). Il mio blog non accetta gli slideshow. Come posso fare??? LA RINGRAZIO MOLTO. Lucia

    RispondiElimina
    Risposte
    1. Ti prego di postare i commenti una sola volta. Per Articoli più interessanti intendi i più popolari secondo la definizione di Blogger? Il widget ufficiale di Blogger dei post più popolari è molto simile a questo
      http://www.ideepercomputeredinternet.com/2010/08/su-blogger-arrivano-il-widget-dei-post.html
      che comunque può essere personalizzato
      http://www.ideepercomputeredinternet.com/2010/09/come-personalizzare-il-widget-dei-post.html
      Ci sono anche versioni più sofisticate come questa
      http://www.ideepercomputeredinternet.com/2012/05/widget-dei-post-piu-popolari-di-blogger.html
      http://www.ideepercomputeredinternet.com/2012/11/blogger-widget-post-popolari-miniature.html
      http://www.ideepercomputeredinternet.com/2013/01/miniature-post-popolari-blogger.html
      http://www.ideepercomputeredinternet.com/2011/08/le-immagini-dei-post-piu-popolari.html
      @#

      Elimina
    2. Scusami Ernesto, non mi sono ben spiegata. Intendevo i più interessanti per noi; cioè vorrei un widget simile ma con la possibilità di sciegliere noi i post da inserire come più interessanti. GRAZIE comunque per le Tue informazioni.... (scusami, ho problemi con la connessione internet per questo il doppio invio)

      Elimina
    3. Puoi creare una galleria di immagini e mettere i link che vuoi
      http://www.ideepercomputeredinternet.com/2012/08/galleria-immagini-blogger.html
      @#

      Elimina
  11. Ciao Ernesto,
    portando questo gadget nel mio blog ho notato che i titoli del post vengono scritti come se fossero in grassetto senza che io abbia modificato nulla. Come posso togliere questo effetto?

    RispondiElimina
  12. Prova a togliere questi due tag
    <strong> e </strong>
    rispettivamente da
    document.write('<br><strong>'); e
    document.write('</strong></li>');

    @#

    RispondiElimina
  13. Ma se non si pubblicano post per un giorno è normale che il widget non mostra più articoli recenti? Ieri sera dopo 2 ore che funzionava, si è come disattivato verso le 23:00. Ma anche altri widget con le miniature sia con lo script così sia con l'url caricato sul mio google drive. Mentre quelli senza miniature funzionano sempre. Che stranezze hehe.

    RispondiElimina
    Risposte
    1. Non è normale. Non ci dovrebbero essere differenze tra quelli con le miniature e quelli senza. Ogni tanto però i feed di Blogger si interrompono per qualche strana ragione
      @#

      Elimina
  14. Ciao Ernesto. Installato il tuo gadget; era un po' che lo cercavo (anche sul tuo blog) e poi... l'ho trovato tramite un'amica di blog :))) . Funziona perfettamente ma ti domando: è normale che le miniature (6, per me) risultino in verticale, ma non allineate (come fossero "a scacchiera")? Poi: è possibile variare il font uniformandolo a quelli che utilizzo per il blog? Grazie :)))

    RispondiElimina
    Risposte
    1. La disposizione non allineata non so da che dipende, forse dal tuo template, ma non saprei come consigliarti. I font dovrebbero essere ereditati dal tuo blog. Se non è così prova a aggiungere questa riga
      font-family:Georgia !important;
      dove al posto di Georgia metti il nome del tuo font subito dopo
      .recent_posts_with_thumbs {float: left;

      Prova anche questo widget che è più recente
      http://www.ideepercomputeredinternet.com/2014/04/recewnt-posts-with-thumbnails-blogger.html
      @#

      Elimina
    2. grazie, provo tutto e poi ti dico :)))

      Elimina
    3. ciao Ernesto, avevo già letto quel post, ma non riuscivo a farlo funzionare. Ora però ho risolto così: ho azzerato i px relativi ai titoli, così ottengo solo le miniature... che mi piacciono anche di più. Quindi direi che sono a posto! Grazie!!! :)

      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.