Il risultato finale è proprio quello illustrato nell'immagine in alto: un elenco puntato, semplice, senza immagini a fianco che va benissimo per la sidebar di Blogger. Associa gli articoli correlati in base al tag utilizzato nel post.
Se trovate difficoltà con l'implementazione di questo widget oppure non volete perdere troppo tempo potete inserire sul vostro blog il widget di Linkwithin che funziona alla stessa maniera ed in più mostra anche le immagini (se disponibili).
Se invece soddisfa le vostre richieste, per implementarlo, dovete andare su Modello > Modifica HTML e subito dopo il tag <head> dovete inserire questo codice:
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
Adesso dovete individuare questo codice nel modello:
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
e lo dovete andare a sostituire con quest'altro:
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
A questo punto salvate il modello, e se avete fatto tutto correttamente non dovrebbe riportarvi alcun errore, altrimenti ricontrollate attentamente tutti i passaggi.
L'ultimo passo da compiere, che è anche quello più semplice è andare su Layout > Aggiungi un gadget > Html/Javascript e richiamare i codici precedenti incollando questo piccolo codice:
<script type="text/javascript">Salvate la finestra del gadget appena aggiunto ed adesso dovrebbe apparirvi anche nel blog, ovviamente essendo un widget potete spostarlo ovunque vogliate e mostrarlo solamente in determinate sezioni del blog.
removeRelatedDuplicates();
printRelatedLabels();
</script>
Per variare il numero di articoli correlati dovete modificare max-results=10" inserendo un numero diverso ma inferiore a 10, in quanto è il numero massimo possibile. Tra l'altro se utilizzate due o più etichette, potreste addirittura visualizzare 20 articoli correlati.
