Pubblicato il 15/07/15e aggiornato il

Bellissimo widget degli Ultimi post con Miniature per Blogger.

Come installare il widget degli Ultimi Articoli di Blogger con miniature e con una famiglia di caratteri di Google Fonts.
Come probabilmente saprete si possono utilizzare nel blog i caratteri di Google Fonts per tutto il sito o esclusivamente per un widget compreso il titolo. Probabilmente questa soluzione non piacerà ai grafici professionisti che amano le pagine web tutte con una sola famiglia di font ma credo che invece tale soluzione possa essere apprezzata da chi ama sorprendere i lettori.

Il gadget che vado a presentare non ha bisogno di nessuna configurazione se si esclude la scelta del numero dei post da visualizzare e per la sua installazione non occorre neppure modificare il modello. La scelta dei font è andata sulla famiglia di caratteri Gloria Hallelujah nella versione corsivo 

ultimi-post-miniature
Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e si incolla questo codice

<script type='text/javascript'>
//<![CDATA[
var posts_no = 6; /* Numero dei post */
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
function showlatestpostswiththumbs(json) {
    document.write('<ul class="recent-posts-container">');
    for (var i = 0; i < posts_no; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var postsurl;
        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 commentstext = entry.link[k].title;
                var commentsurl = entry.link[k].href;
            }
            if (entry.link[k].rel == 'alternate') {
                postsurl = entry.link[k].href;
                break;
            }
        }
        var recenthumb;
        try {
            recenthumb = 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 != "")) {
                recenthumb = d;
            } else recenthumb = 'https://lh4.googleusercontent.com/-QHAVnMyiszg/VHL1-qLbkTI/AAAAAAAAqMA/noYsTqrzokU/s172/no-image.jpg';
        }
        var postdate = entry.published.$t;
        var showyear = postdate.substring(0, 4);
        var showmonth = postdate.substring(5, 7);
        var showday = 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="recent-posts-list">');
        if (posts_date == true) document.write('<div class="post-date">' + monthnames[parseInt(showmonth, 10)] + ' ' + showday + ' ' + showyear + '</div>');
        if (showpoststhumbs == true)
            document.write('<a href="' + postsurl + '"><img class="recent-post-thumb" src="' + recenthumb + '"/></a>');
        document.write('<div class="recent-post-title"><a href="' + postsurl + '" target ="_top">' + posttitle + '</a></div>');
        var posts_details = '';
        var flag = 0;
        document.write('<div class="recent-posts-details">');
        if (showcommentslink == true) {
            if (flag == 1) {
                posts_details = posts_details + ' <br> ';
            }
            if (commentstext == '1 Comments') commentstext = '1 Commento';
            if (commentstext == '0 Comments') commentstext = 'No Commenti';
            commentstext = '<a href="' + commentsurl + '" target ="_top">' + commentstext + '</a>';
            posts_details = posts_details + commentstext;
            flag = 1;;
        }
        if (readmorelink == true) {
            if (flag == 1) posts_details = posts_details + ' | ';
            posts_details = posts_details + '<a class="readmorelink" href="' + postsurl + '" class="url" target ="_top">Leggi Tutto</a>';
            flag = 1;;
        }
        document.write(posts_details);
        document.write('</div>');
        document.write('</li>');
    }
    document.write('</ul>');
}
//]]>
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script>
<link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}
.recent-posts-container {font-family: 'Gloria Hallelujah', cursive;  float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}
ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px;  border-top: 2px solid #FCD6CB;}
ul.recent-posts-container {border: 2px solid #FCD6CB; }
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #616662;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #888;}
.recent-posts-details {padding-bottom: 5px;}
a.readmorelink {color: #4DACE3;}
</style>

Si salva e si posiziona con il trascinamento del mouse. Si possono personalizzare i codici dei colori e si può scegliere un'altra famiglia di caratteri e quindi sostituirla alla riga evidenziata di giallo. Negli articoli senza immagini si visualizzerà l'immagine di default no-image.png che può essere sostituita da un'altra.

Per mostrare il Titolo del widget con la stessa famiglia di caratteri bisogna trovare il suo ID che sarà del tipo HTMLX dove X è un numero derivante dall'ordine in cui è stato installato rispetto agli altri. Si va su Modello > Modifica HTML, si cerca la riga ]]></b:skin> e, subito sopra, si incolla

#HTML19 > h2.title {font-family: 'Gloria Hallelujah', cursive;}

quindi si salva il template. Il numero 19 è l'ID del gadget di demo che ho realizzato:
Si può modificare la scritta Leggi tutto e non mostrare alcuni elementi del widget sostituendo true con false nelle prime righe del codice con ovvio significato dei termini in inglese. 




15 commenti :

  1. ciao Ernesto domanda:si puo' fare come per l'archivio compresso anche per le etichette?Grazie

    RispondiElimina
    Risposte
    1. Non penso. Vuoi nascondere le etichette perché ti prendono troppo posto? Se è così prova questa soluzione
      http://www.ideepercomputeredinternet.com/2014/05/blogger-widget-scroll-box.html
      @#

      Elimina
  2. E' possibile ottenere il widget "Ultimi post" come la versione "Post popolari"?

    RispondiElimina
    Risposte
    1. Nel senso di visualizzare gli ultimi post nello stesso stile dei post popolari? Magari proprio identico non sarà ma ci sono widget dei post recenti molto simili a quello dei post popolari come questo p.e.
      http://www.ideepercomputeredinternet.com/2014/04/recewnt-posts-with-thumbnails-blogger.html
      @#

      Elimina
  3. Ho voluto provare questo niente male ma non lo posso usare i bottoni mi vengono fuori dai bordi della barra laterale a destra e si ripropongono in parte come una copia a specchio all'esterno del bordo barra sinistra,
    Penso che si possa ridimensionare ma non saprei come. Inoltre mi piacerebbe cambiare il fondo bianco.
    Pensavo in alternativa a quello che non funziona :-(( tu che ne dici ????
    Grazie.

    RispondiElimina
    Risposte
    1. Non capisco perché non ti funzioni questo widget
      http://www.ideepercomputeredinternet.com/2015/08/recent-posts-widget-blogger-desktop-mobile-thumbnail.html
      che è quello che uso anch'io.
      @#

      Elimina
  4. Ciao, grazie mille per il gadget, funziona benissimo ma non riesco a cambiare il tipo di font, ho provato ma non funziona. Come potrei fare?

    RispondiElimina
    Risposte
    1. Devi modificare due righe di codice e non solo una. Quella evidenziata di giallo e l'ultimo codice. Lo puoi fare solo con i caratteri di Google Fonts. Altre istruzioni le trovi qui
      http://www.ideepercomputeredinternet.com/2015/01/google-fonts-personalizzare-carattere-testo.html
      @#

      Elimina
    2. Questo commento è stato eliminato dall'autore.

      Elimina
    3. Tutto risolto, grazie mille! :)

      Elimina
  5. ciao per cambiare le dimensioni ??' come si deve fare io l'ho messo sul mio blog ma esce un po come faccio per stringere un po le misure di poco

    RispondiElimina
    Risposte
    1. In questo blocco di codice

      .recent-posts-container {font-family: 'Gloria Hallelujah', cursive; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}

      prova a sostituire width: 100%; con width: 95%; o anche di meno se fosse necessario
      @#

      Elimina
  6. Ciao Ernesto, se io volessi apportare queste modifiche:
    1) togliere la numerazione dei post
    2) spostare l'immagine a sinistra
    3) oltre al titolo mettere anche una piccola parte del contenuto del post

    Si potrebbe fare?

    Grazie!

    RispondiElimina
    Risposte
    1. Bisognerebbe modificare interamente lo script, non è il caso:)
      @#

      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.