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 

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjymwyn5PNphS-D9su65SNxCl4tDAjdreJN_hLMqcvjMxnKusgfosHn3mXn9ZMQEUZ5jjyCG3Na4fSPFI6buAMcZnSEmW1VE58FgA3E58iUsd2aUFwjo7Jc4odLVyiI05igdWnJrMGWWfE/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:

Demo
Clicca qui

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.