20 febbraio, 2008

Articoli correlati in blogger

Qualcuno di voi mi ha chiesti: Ciao Yurj, 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 Blog

Importante: prima di procedere ad ogni modifica, salva una copia del tuo template attuale!!
vac 468x60.gif

35 commenti:

TuttoVolume on 22 febbraio 2008 alle ore 01:24 ha detto...

Io uso questo metodo da un bel pò,ma il problema mi si presenta quando voglio scrivere un post corto e quindi vidualizzarlo per intero,perche col metodo di cancellare spanclass fullpost all'editor quando si crea un post,non funziona,esce comunque il link continua,e questo genera confusine,c'è un modo per ovviare il problema
Grazie

Unknown on 22 febbraio 2008 alle ore 15:09 ha detto...

Grazie mille, era proprio ciò che mi serviva!!!

Appena ho tempo scrivo un post con un link al tuo!

Ciao

NUVOLETTA on 22 febbraio 2008 alle ore 20:57 ha detto...

Complimenti per il tuo blog.....

yurj on 23 febbraio 2008 alle ore 16:34 ha detto...

@tuttovolume: a cosa ti riferisci? Ai post espandibili? Nel tutorial che ho scritto, http://risorse-blogger.blogspot.com/2008/01/post-espandibili-in-blogger.html

L'ho detto chiaramente, basta cancellare:
Qui il sommario
<span id="fullpost">
Qui il resto del post
</span>

@axel: grazie a te!

@nuvoletta: grazie!

NUVOLETTA on 24 febbraio 2008 alle ore 21:53 ha detto...

prego...

...lizzie... on 25 febbraio 2008 alle ore 17:59 ha detto...

scusate l'ignoranza, ma non ho capito a cosa serve qst procedimento....cioè cosa sono gli articoli correlati...?

yurj on 26 febbraio 2008 alle ore 01:03 ha detto...

@lizzie: gli articoli correlati, è l'omonimo widget che puoi leggere in fondo ad ogni post (o in fondo ai commenti nel mio caso), in pratica è una procedura automatica che suggerisce al lettore articoli simili a quello che stà leggendo, e che quindi potrebbero interessargli!!

...lizzie... on 26 febbraio 2008 alle ore 14:50 ha detto...

ah....ho capito....grazie...

MilanoIngressoLibero on 27 febbraio 2008 alle ore 21:11 ha detto...

Yurj, cos'ho sbagliato? vedo il messaggio "Leggi anche" ma poi non ci sono articli correlati...

yurj on 28 febbraio 2008 alle ore 21:37 ha detto...

@milano ingressi: forse hai sbagliato qualche passaggio! Può capitare di perdere qualche pezzettino di codice (specialmente il primo che è molto lungo). Ti consiglio di ripetere tutto da capo e con calma!!
Fammi sapere se facendo con più calma riesci!! ;)

Davide Casati on 20 aprile 2008 alle ore 10:50 ha detto...

grazie mille per il tutorial!
Volevo sapere però con che criterio vengono scelti gli articoli correlati.

yurj on 20 aprile 2008 alle ore 15:08 ha detto...

@dadobonsai: vengo scelti in base alle etichette (o label)!

Raffaele Ciruolo on 20 aprile 2008 alle ore 22:35 ha detto...

Ci ho provato, ma non ci sono riuscito. Ho seguito tutte le tue istruzioni, ma gli articoli correlati non sono apparsi.

Raffaele Ciruolo on 21 aprile 2008 alle ore 00:19 ha detto...

Tutto a posto, poi ho visto che gli articoli correlati mi appaiono nella pagina di ogni singolo
post (sotto al post: sono tutti gli articoli con la stessa etichetta, o categoria).
Invece nella home page ci sono solo gli articoli più
recenti (senza gli articoli correlati sotto i post).
E’ normale che sia così o ho sbagliato qualcosa?
Grazie mille!

yurj on 23 aprile 2008 alle ore 18:00 ha detto...

@raffaele: ottimo!! :D
Tranquillizzati, è normale che sia così... ;)

ZiaBoby on 11 maggio 2008 alle ore 17:54 ha detto...

ma non c'è un modo per farlo comparire subito dopo il post, prima dei commenti?
Grazie

yurj on 12 maggio 2008 alle ore 22:56 ha detto...

@boby: una volta ci ho provato, ma non ci sono riuscito!! :(

Mi dovrò impegnare di più per trovare una souzione!!

Media Flue on 23 maggio 2008 alle ore 14:13 ha detto...

niente ci ho provato, controllato il codice ma rimane lo spazio bianco, come se non riuscisse a trovare nulla di correlato!

Media Flue on 23 maggio 2008 alle ore 14:20 ha detto...

errata corrige...ci sono riuscito ma ho capito che se copio pari pari la prima parte di codice me la incolla senza spazi e non so il motivo ma non funziona...ho dovuto modificarla a mano, inserire tutti gli spazi!
grazie mille, il tuo blog è una bibbia.

ZiaBoby on 24 maggio 2008 alle ore 20:36 ha detto...

@yurj: forse ho trovato un codice, però su un blog mi funziona, mentre su un altro no, devo rincontrallare tutta la procedura.
se non mi dà più problemi te lo passo o ti indico la fonte...

Stranepiante on 2 giugno 2008 alle ore 20:16 ha detto...

Ottimo!!! ha funzionato perfettamente, adesso però mi tocca riorganizzare le etichette per sfruttarlo al meglio :)

Ma com'è che capito sempre sul tuo blog quando cerco qualcosa per migliorare il mio? :D
Grazie e Complimenti!

Daniele on 27 agosto 2008 alle ore 17:30 ha detto...

Vorrei chiederti una cosa... Ho seguito tutta la procedura, ma c'è un piccolo particolare esteticamente non molto bello: in home page si visualizza la scritta "Articoli correlati", come posso farla visualizzare nelle pagine dei post???


http://tanarossonera.blogspot.com/


Grazie

Daniele on 27 agosto 2008 alle ore 17:32 ha detto...

Vorrei chiederti una cosa... Ho seguito tutta la procedura, ma c'è un piccolo particolare esteticamente non molto bello: in home page si visualizza la scritta "Articoli correlati", come posso farla visualizzare SOLO nelle pagine dei post???


http://tanarossonera.blogspot.com/


Grazie

Anonimo ha detto...

davvero un ottima segnalazione, ora provo anche a pacioccarci un pochino (per vedere se lo capisco pure ... ehh mi complico sempre la vita loool)

ciao e grazie mille :)

Anonimo ha detto...

@Daniele: prova a racchiudere il codice in una if del tipo

<b:if cond='data:blog.pageType == &quot;item&quot;'>

.....

</b:if>

naturalmente puoi anche sfruttare un 'else' per dare un nuovo significato a quello spazio.

Alexxandro on 15 aprile 2009 alle ore 18:30 ha detto...

ciao!
ma non corrispondono all'etichette ,dato che non capisco come fare correlare ,un tag musica con uno immagine

yurj on 25 aprile 2009 alle ore 12:34 ha detto...

@alexandro: Si, la modifica mette in relazione i post che le etichette simili.

Quindi se vuoi correlare un post di musica e uno immagine, devi usare la stessa etichetta oppure etichettare i due post con un'etichetta uguale, es. li etichetti entrambi con: musica, foto

Opuure crei un'etichetta specifica, es:
foto musicali

Anonimo ha detto...

Qui potete trovare una versione modificata di questa soluzione che vi permetterà di inserire l'elenco subito sotto il post.

massimiliano on 18 maggio 2009 alle ore 04:57 ha detto...

Ciao,volevo ringraziarti per l'aiuto.
Ho inserito tutto e sembra funzionare alla perfezione.
Grazieeeeeeeeeee

Ciao

nurix on 4 giugno 2009 alle ore 23:43 ha detto...

ciao, innanzitutto grazie...
poi ho una domanda: ho copiato il codice ed è tutto a posto, ma i link mi vengono di un colore che è coperto da quello del mio blog... come posso fare??

http://nurixtime.blogspot.com/

Anonimo ha detto...

mh, io non trovo nel mio HTML questo codice...

data:post.laberls

e non so come continuare dopo il primo passo

Lauretta ha detto...

Ciao!! Ho dei problemi a mettere l'ultimo codice in grassetto...come si fa?!? Grazie!

Riccardo Troiani on 20 gennaio 2010 alle ore 21:54 ha detto...

Ciao....come si fa a diminuire il numero di post per etichetta? grazie

Gennaro Garofalo on 18 novembre 2010 alle ore 23:09 ha detto...

Grazie, sei stato chiarissimo.
http://tiny.cc/y3c5v

italy geek on 25 novembre 2010 alle ore 16:10 ha detto...

grazie per la guida! spero di riuscirci! :)

 
Ti sono stato utile? Ti ho aiutato? Ho risolto qualche tuo problema? Allora che ne dici di offrirmi un caffe?;)

Lettori fissi

Risorse per blogger Copyright © 2009 FreshBrown is Designed by Simran