Inserire Post Correlati in Blogger Blogspot
Come inserire i Post Correlati in Blogger Blogspot.
Questa guida ci permette di essere in grado di visualizzare dei post correlati a quello che l'utente sta visualizzando sul nostro blog, il tutto basandosi sulle etichette (ovvero i tags).
La guida è abbastanza impegnativa, per cui te la sconsiglio se sei alle primissime armi con la modifica dei modelli di Blogger Blogspot.
Per cominciare vai in Layout ->Modifica Html e seleziona Espandi i Modelli Widget. Ti consiglio di salvare il modello come copia di sicurezza.
Cerca all'interno del modello la stringa </head> e incolla appena prima di essa 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>
Adesso cerca (Ctrl+F) la stringa blog1, e individua il blocco di 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>
Selezionalo tutto e sostituiscilo con 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: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>
Adesso salva il modello.
A questo punto possiamo inserire il nostro widget all'interno del nostro blog.
Vai in Elementi Pagina, ed inserisci un gadget di tipo Html/Java appena sotto il blocco che rappresenta i Post (Post sul Blog). Chiama questo gadget col nome che preferisci, ad esempio Post Correlati. Il codice da inserire è il seguente:
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
A questo punto torna in Modifica Html, ed espandi i modelli widget.
Cerca (Ctrl+F) il widget appena inserito, utilizzando il nome con il quale lo hai chiamato. Nel nostro caso dovremo cercare Post Correlati.
Esso sarà simile al seguente, ad eccezione delle parti in rosso:
<b:widget id='HTML13' locked='false' title='Post 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>
Le parti in rosso le devi aggiungere tu nel tuo modello.
Fine.
Abbiamo ottenuto un gadget che ci mostra automaticamente i Post che (in base alle nostre etichettature precedenti) sono maggiormente correlati con il post che stiamo visualizzando sul nostro blog su Blogger.
Ottimo consiglio e tutto spiegato benissimo, ma soprattutto... perfettamente funzionante! Grazie
Funziona alla perfezione! Grazie
sigh! a me non si visualizza nulla di quel che inserisco sotto (in Layout) lo spazio del Post.
(ho provato anche a metterci un qualcosa di semplice testo ma non me lo visualizza)
Perfetto. Grazie
Ottimo gadget...ma nel mio template non trovo la stringa blog1...c'è un'altra stringa che posso trovare per poterlo inserire?Grazie
Tiziana,
probabilmente utilizzi un template non standard, il quale presenta delle lievi differenze nel codice.
In tal caso non posso aiutarti.
ciao, mi scuso se mi intruflo frai commenti per chiederti un aiuto diretto.
ho un blog su blogger
questo: http://lagrandeopera.blogspot.com
dopo 1 anno non funziona piùil POST SPANDIBILE che avevo creato grazie ad una guida qui.
non hocambiato nulla nel modello html.. eppure cliccando su read more non apre più tutto l'articolo come al solito..
cliccando sul titolo ancora si invece..
temo che rifare il procedimento d'accapo mi incasini il blog come successo per altre cose e non riesco più a sistemarlo.
grazie anticipatamente del tempo.
PsicoNauta
PsicoTrickster
L'unico modo per capirci qualcosa è:
1) ricontrollare attentamente il modello, confrontando i codici presenti con quelli della guida
2) controllare i post, assicuradosi che i tags siano presenti (a volte Blogger modifica i post!)
A presto
ricontrollare i tag.. dici ? sviluppa! :P
funzione molto utile, grazie mille!
Funziona..bello, ma come faccio per farne visualizzare solo 5...?
ciao vorrei chiederti se hai un modello di esempio con questo tuo "post correlati per etichetta" ..
IO VOLEVO AGGIUNGERE QUESTO TUO WIDGES AL MIO BLOG, E VORREI SAPERE SE POTREBBE ESSERE SETTATO PERCHé RISULTI INVISIBILE NELLA HOME MA QUANDO IL POST è APERTO DOVREBBE RISULTARE VISIBILE DOPO O PRIMA GLI ALTRI (widges "ti potrebbero interessare" E "post recenti") e non creare problemi per il corretto funzionamento del tutto..
Grazie, davvero utile!!
Scusami, non riesco a fare il secondo passaggio.
Non trovo questo codice
,
Il sito e i post sono molto chiari... in riferimento a questo post ho un problema. Uso la versione aggiornata di blogger e dalla pubblicazione di questo articolo è passato un po' di tempo. Ho l'impressione che gli html non corrispondano, quindi come faccio a modificare il layout per inserire post correlati in blogspot? Grazie
Ciao! perdonatemi se scrivo qui anche se l'argomento non c'entra...io ho un problema con il mio blog, quando condivido i miei articoli su facebook l'anteprima che mi appare non è l'immagine dell'articolo..ma mi fa scegliere fra due immagini che sono inserite nelle colonne laterali in cui metto i gadget! non capisco molto di codice html..l'unica cosa che ho inserito è un template...ma prima, anche col template, non mi dava questo problema. Spero che mi possiate aiutare!! Grazie in anticipo :(