Articoli correlati in Blogger

Ciao a tutti i lettori del mio piccolo blog!
Come ho già scritto, è un pò di tempo che sto scrivendo i post per poi pubblicarli sul blog a distanza di giorni come post programmati. E proprio oggi ho inserito una modifica nel blog che potete aver notato da qualche settimana.
Chi mi legge da alcuni giorni si sarà accorto che ho inserito l'elenco dei post correlati ("Articoli correlati") quando viene visualizzato il post nella sua pagina. Oltre ad essere una cosa che può risultare comoda ai lettori fa anche molto piacere al sottoscritto se un lettore attirato qui da un singolo post troverà interessante leggere alcuni dei post che ad esso possono essere correlati.

Per farlo anche voi nel vostro blog dovete andare in Layout - Modifica Html ed immediatamente dopo il tag nel vostro modello inserite 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>

Salvate il modello e poi, dopo aver spuntato il box per espandere gli widget nel modello cercate il codice seguente:

<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 sostituitelo con:

<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&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/></b:if>          </b:loop>        </b:if>

A questo punto dovete salvare nuovamente il modello ed andare in Layout - Elementi pagina e qui dovete scegliere Aggiungi un gadget (lo potete fare sia sulla destra che in fondo al blog, molto dipende dal vostro modello) e HTML/JavaScript dove inserirete il codice seguente:

<script type="text/javascript"> removeRelatedDuplicates(); printRelatedLabels();</script>

Il nome lo potete scegliere come volete, io ho messo semplicemente "Articoli correlati", ma ricordatelo bene perchè ora vi servirà subito, infatti dovete tornare in Layout - Modifica Html e dopo aver espanso nuovamente i widget cercate il codice che segue.
Attenzione, non conterrà le righe che qui sotto sono evidenziate, ovvero più grandi ed in grassetto, perchè queste sono le righe che dovete inserire voi. Questa porzione di codice la potrete trovare facilmente se cercherete il nome del gadget che avete inserito poco prima, qui nel codice di esempio è "Related Posts" e per me era "Articoli correlati"

<b:widget id='HTML13' locked='false' title='Related Posts' type='HTML'><b:includable id='main'><b:if cond='data:blog.pageType == "item"'>  <!-- only display title if it's non-empty -->  <b:if cond='data:title != ""'>    <h2 class='title'><data:title/></h2>  </b:if>  <div class='widget-content'>    <data:content/>  </div>  <b:include name='quickedit'/></b:if></b:includable></b:widget>

Una volta inserite quelle due righe non dovrete fare altro che salvare e visualizzare il vostro blog e qualcuno dei vostri post per verificare il funzionamento del widget.

Se qualcosa non dovesse essere chiaro, la guida che ho seguito io la potete trovare qui. Se poi volete seguire quella originale in inglese dovete andare qui.