Cerca nel blog

Visualizzazione post con etichetta related post. Mostra tutti i post
Visualizzazione post con etichetta related post. Mostra tutti i post

8 gennaio 2008

Inserire gli "Articoli Correlati" nel Blog di Blogger.

Oggi vi presento una delle novità appena introdotte nel mio Blog, ovvero gli articoli correlati ad un post.


Navigando su molti blog, in cerca informazioni particolari, mi sono accorto che ciò che cercavo era spesso tra gli articoli correlati che appaiono in fondo ai ogni post.

Così ho deciso che questa funzione basata sui tags di ogni post, poteva essere utile a chi visita il mio blog.

Ora vi spiego come è "semplice" la procedura per inserire questa funzione.
  1. per prima cosa, andate su Modello->Modifica HTML, e salvate il vostro modello sul pc per mantenerlo in caso di errore, cliccando su"Scarica modello completo".
  2. trovate il tag <head> andate a capo e sotto inserite il codice seguente:
    <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>
  3. Salvate! poi sempre su Modello->Modifica HTML, espandete i wid get spuntando l'apposita casella e cercate questo:
       <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>
  4. e sostituitelo con questo, basterebbe inserire il codice in grassetto:
        <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>
  5. Ok, Salvate, fatto ciò, andate su Modelli->Aggiungi elemento a pagina, aggiungete un box javascript/HTML, posizionatelo immediatamente sotto al post dategli il titolo "Articoli Correlati"e all'interno scrivete:
    <script type="text/javascript">
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
  6. Ora l'ultimo passo, andate su Modello->Modifica HTML, ri-espandete i widget e cercate il box appena creato, attenzione perché il tuo id='HTMLx' (la x un numero) potrebbe essere diverso dal mio. Per finire dovete solo inserire le righe in grassetto, e salvare:
    <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>
Dopo tutta questa fatica anche voi avete i vostri "Articoli Correlati", mi rimangono da fare solo alcune osservazioni: ovviamente gli articoli correlati appaiono solo quando si clicca su un post, nella home non sono presenti; per cambiare il numero di articoli da linkare potete intervenire nel terzo box alla voce allback=related_results_labels&max-results=10 cambiando il numero 10 con quello che preferite.



Ringraziamenti per questa realizzazione:
Guesta guida è Liberamente tradotta da Purplemoggy: Related Posts sotto licenza Creative Commons .