Widget degli Ultimi Articoli per Blogger con icona.

Widget degli ultimi articoli per Blogger con elenco personalizzato.

Una rassegna degli Ultimi Post pubblicati sono un dato essenziale per informare il navigatore del tipo di argomenti trattati dal nostro sito. Questo serve per cercare di far rimanere il più a lungo possibile il visitatore nel blog inducendolo a aprire almeno un altro post. Una diminuzione della frequenza di rimbalzo può avere ripercussioni molto positive sul posizionamento delle nostre pagine.

Ci sono moltissimi gadget che mostrano gli ultimi articoli. Si va da quello che fa vedere tutti i post a quello che permette di visualizzare solo quelli per una singola etichetta, dal widget orizzontale con le miniature a quello verticale sempre con miniature, dallo slideshow dei titoli dei post allo slideshow delle immagini degli ultimi articoli.

Ci sono alternative estremamente sofisticate e scelte più minimaliste. Passo a illustrare quale potrebbe essere una via di mezzo presentando il gadget degli Articoli Recenti in un elenco verticale ma con uno stile particolare che ci permetta di inserire una piccola icona prima di ciascun titolo.

Questo widget è quello che attualmente sto usando in questo blog e mi era stato esplicitamente chiesto in un commento un tutorial su come installarlo. Si va su Layout > Aggiungi un gadget > HTML/Javascript e, dopo aver digitato il titolo, in Sezioni del sito, si incolla il codice seguente

<script style="text/javascript">
function ultimipost(json) {
document.write('<ul>');for (var i = 0; i < numposts; i++) {
document.write('<li>');
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 == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(leggi tutto)";
readmorelink = readmorelink.link(posturl);
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";
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, "");
document.write(posttitle);
if (showpostdate == true) document.write(' - ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)]+ ' ');
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');
document.write('<div id="crdt" style="font-size:70%;text-align:center"><p><a href="http://goo.gl/SEGfw">Get Widget</a></div>');
}
</script>
<script style="text/javascript">
var numposts = 12;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>
<script src="http://www.ideepercomputeredinternet.com/feeds/posts/default?orderby=published&alt=json-in-
script&callback=ultimipost"></script>

dove i dati da personalizzare colorati di rosso sono:

1. Il numero degli articoli da mostrare (12)
2. Per visualizzare anche la data si sostituisce true a false in var showpostdate
3. Per mostrare anche l'inizio dell'articolo si sostituisce true a false in var showpostsummary
4. Se si è scelto true nella precedente opzione si può scegliere il numero di caratteri dell'incipit (100)
5. Infine si inserisce l'URL del nostro blog per acquisirne i feed

Dopo aver cliccato su Salva e se abbiamo lasciato le opzioni di default, si visualizzerà un elenco degli Ultimi Articoli con lo stile ereditato dal modello del blog che potrebbe essere così

Possiamo modificare lo stile dell'elenco per renderlo esteticamente più valido. Se per esempio al posto del puntino vogliamo visualizzare una immagine dobbiamo usare una riga di CSS di questo genere

list-style-image: url(URL IMMAGINE);

Per poterla applicare al widget ne dobbiamo però conoscere l'ID. Ci sono diversi metodi per ottenere questa informazione. Si può per esempio aprire il codice del modello e cercare il titolo del widget pigiando su F3 o Ctrl+F. L'ID sarà visibile nella riga di codice corrispondente 

L'ID per un gadget generico è HTMLX dove X è un numero naturale determinato dall'ordine di inserimento del widget e quindi diverso da modello a modello e da blog a blog. Un sistema anche più semplice consiste nell'aprire il widget cliccando sopra a Modifica o sull'icona del cacciavite e della chiave inglese. La parte finale dell'URL della finestra che si apre indicherà l'ID del widget

Come vedete in questo caso abbiamo HTML4 come ID. Per visualizzare l'icona al posto del puntino dobbiamo quindi modificare lo stile dell'elenco solo in questo gadget. Andiamo su Modello > Modifica HTML > Procedi, cerchiamo la riga ]]></b:skin> e, subito sopra, incolliamo questo codice

#HTML4 li {
list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwn_e1QKqMXB_SSXndJSaETb35kr3TnFE8IRmpm9LMe4Fp0z22HZxxnHTM_Lj15e5tQ3fAoZ620USfEKvjkzoT94jnEKA7n1if0FK1JdwC4KayUpifoTcE1ZVUkhUPnFT8EU49jc74fVA/s14/red-check.png);
}

dove HTML4 è l'ID del widget ed è funzione del modello e l'URL della icona è colorato di rosso. Ho scelto una icona di 14x11 pixel che può essere sostituita con un'altra anche di diverse dimensioni. Si salva il modello e il nostro gadget assumerà l'aspetto del primo screenshot

Nella parte finale del widget c'è un link che conduce a questo articolo e che serve per facilitare l'installazione del gadget a chi lo avesse apprezzato aprendo una pagina di un blog in cui fosse stato inserito. Mi rendo conto che in taluni layout questo collegamento può risultare antiestetico. Per toglierlo occorre incollare, sempre sopra alla riga ]]></b:skin>, questo CSS

#crdt {display:none;}  

e salvare nuovamente il template.