sabato 2 aprile 2011

Articoli, messaggi o post correlati in blogger

Esiste un trucco per mostrare gli articoli correlati in blogger? Certo che esiste! Gli articoli correlati non sono un lusso esclusivo dei blog su piattaforma wordpress!!

La procedura è un po' complessa bisogna mettere le mani su varie righe del codice!! Quindi segui attentamente le mie istruzioni:

Recati su layout/modifica Html e cercata il tag <head> e immediatamente dopo inserisci 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>

Esattamente come ti mostro nella figura:



Salva il modello, ora espandi i modelli widget e cerca questo codice:
<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 sostituiscilo con questo:
Per i più smaliziati, si tratta di aggiungere solo le tre righe 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>

Salva il tutto.

Adesso vai su layout/ elementi pagina e crea un nuovo elemento Html, dagli come titolo "Articoli correlati" e all'interno scrivi questo codice:

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

Poi, attraverso il drag & drop, posizionalo sotto l'elemento "Post sul blog", (io, al posto di "Articoli correlati", ho intitolato il widget "Articoli interessanti"), così come ti mostro in questo screenshoot:



Adesso, l'ultimo passo, forse il più difficile... presta molta attenzione, torna su layout/modifica Html ed espandi i modelli widget. Cerca questo codice, e aggiungici i caratteri in grassetto (il risultato deve essere uguale a quello che vedi nel box):

<b:widget id='HTML13' locked='false' title='Articoli correlati' 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>

Nota: id='Html13' è il numero scalare del widget, quindi varia da blog a blog. Se hai ancora delle difficoltà, dai un'occhiata a questa schermata dove ti ho evidenziato i posti dove vanno inseriti i codici:





Guida tradotta da PurpleMoggy's B<head>log

Importante: prima di procedere ad ogni modifica, salva una copia del tuo template attuale!!

0 commenti:

Posta un commento

Twitter Delicious Facebook Digg Stumbleupon Favorites More