Lavoriamo insieme ✨

Sei pronta a diventare la blogger che hai sempre sognato di essere?
Agire facendo il primo passo è un ottimo modo per cominciare ecco chi sono

Blogger in Azione

Blogger in Azione

Primi Passi

Primi Passi

F.A.Q.

F.A.Q.

Come aggiungere i 'Post Correlati' sotto il tuo post

28.2.16
Simona S.
15 commenti


Questo tutorial nasce da una richiesta che mi è arrivata via messaggio, tramite la mia pagina facebook.
A tale proposito, se ancora non la conoscete, questo è il momento giusto! :D
Voi sapete che non sono un tipo molto social ultimamente, per varie ragioni, ma riuscirò piano, piano a migliorare anche in questo.

Torniamo al tutorial.
Per aggiungere i related posts (i post correlati), alla fine dell'articolo del nostro blog, ci sono siti come linkwithin.com e engageya che mettono a disposizione i loro gadget da poter installare su Blogger.
Entrambi i gadget sono ottimi, ma presentano un piccolo difetto: espongono il link al loro sito (il che è più che legittimo) e si appoggiano a degli script esterni che a volte mi hanno dato dei problemi di 'trasmissione'... mettiamola così.

Lo script che vi propongo è quello che uso io e che ho recuperato da un template utlizzato tempo fa.
Non era mio, quindi non mi prendo nessun merito per questo... io l'ho solo personalizzato alle mie esigenze :)

Per prima cosa incollate il codice qui sotto subito prima della chiusura del tag </head>
Per cercarlo, come al solito, vi consiglio di cliccare all'interno del frame dell'HTML e premere CTRL+F: vi si aprirà un campo nel quale incollerete la riga da cercare.
Il numero in rosso è il risultato massimo dei post, potete aumentare il numero, se lo desiderate.



Le dimensioni width e height sono stati modificati in base alle mie esigenze, voi potrete modificarli a seconda delle dimensioni del vostro blog. Vi consiglio di fare tante prove per arrivare alla grandezza delle immagini che desiderate.


<style>
#related-posts {
float:none;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
text-align:center;
margin:20px auto 0;
width:538px;
border-top:1px solid #ddd;
}
#related-posts h2 {
padding:5px;
margin:0 0 5px;
text-align:center;
background:#fff;
font: $(post.title.font);
font-size:22px;
color:#cdcdcd;
text-transform:uppercase;
}
#related-posts a {
color:#cdcdcd;
overflow:hidden;
display:block;
width:120px;
height:190px;
text-align:center;
}
#related-posts a:hover {
color:#bbb;
overflow:hidden;
}
#related-posts a img {
transition:.3s linear;
-moz-transition:all .3s;
-webkit-transition:.3s linear;
box-shadow:none;
padding:4px;
padding-top:7px;
border-radius:0px;

}
#related-posts a img:hover {
transition:.3s linear;
-moz-transition:all .3s;
-webkit-transition:.3s linear;
margin-bottom:5px;
border:2px solid #fff;
}
#rptxt{
padding-top:5px;
width:115px;
height:190px;
margin:5px;
border-top: px dotted #23af9e;
font: $(post.title.font);
font-size:16px;
text-align:center;
text-transform:uppercase;
}
</style>

<script type='text/javascript'>
//<![CDATA[
var defaultnoimage='http://1.bp.blogspot.com/-YwnZjpLUpT4/UPSj_ygbl7I/AAAAAAAADrU/NARmFertXcA/s000/noimage.jpg';
var maxresults=4;
var splittercolor='#fff';
var relatedpoststitle='related posts';
//]]></script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else{if(typeof(defaultnoimage)!=='undefined'){thumburl[relatedTitlesNum]=defaultnoimage}else{thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijSNVBdZ3nikhsfTSlEPmjnYuD9ggBJfW5ORtE4WSxGtovTIIGRrjLgb4w2K0yNviWgdSKp13T1QmukbCiHaXEJZDtOk604dW5__0yxI9iIGN3Z_RYoqhykSfMG2fhG-fe4NMbeos4DtA/s400/noimage.png"}}}if(relatedTitles[relatedTitlesNum].length>35){relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"..."}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++){if(a[j]==e){return true}}return false}function printRelatedLabels_thumbs(current){var splitbarcolor;if(typeof(splittercolor)!=='undefined'){splitbarcolor=splittercolor}else{splitbarcolor="#d4eaf2"}for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==current)||(!relatedTitles[i])){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;padding:0 5px 5px;float:left;');if(i!=0)document.write('border-left:solid 0.5px '+splitbarcolor+';"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/><br/><div id="rptxt">'+relatedTitles[r]+'</div></a>');i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript'/>

Infine, incollate questo codice prima della chiusura della sezione del 'post', esattamente come nell'immagine subito sotto il codice.

<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div> <div style="clear: both;">
</div>



E' tutto!
Se avete dubbi e/o avete problemi nell'inserire i codici, lasciate pure un commento sotto al post.
Se vi è stato utile, sentitevi liberi di condividerlo!


15 commenti in "Come aggiungere i 'Post Correlati' sotto il tuo post"

  1. Non funziona... l'HTML mi dice che ci sono errori e non mi fa caricare l'anteprima...

    RispondiElimina
    Risposte
    1. Quando ti segna l'errore ti evidenzia una riga... riusciresti a postarla nei commenti?

      Elimina
    2. Mi segna più di una riga...

      Elimina
    3. Hai ragione...allora ho aggiustato gli errori, ma ho fatto una prova su un blog di prova e il problema del non mostrare le anteprime resta... onestamente non capisco proprio il perchè visto che è esattamente lo stesso codice che ho io...

      Elimina
    4. Ok, ho in pratica 'forzato' il codice, ora funziona ;)

      Elimina
    5. Ah mi raccomando rileggi il post pechè è cambiata la procedura!

      Elimina
  2. Grazie ho fatto tutto e funziona perfettamente! Grazie mille!

    RispondiElimina
  3. Ciao Simona, come è possibile far comparire i RELATED POST solo nella postpage piuttosto che nella pagina iniziale? Grazie

    RispondiElimina
    Risposte
    1. Ciao Rosalba, per farlo c'è bisogno di inserire il codice all'interno di una 'condizione', ovvero un altro codice che condizioni i browser nella lettura del codice HTML e/o del CSS.
      Ti lascio il link ad un mio tutorial nel quale spiego come nascondere un elemento dal blog, puoi benissimo riportarlo al tuo caso ;)
      Come nascondere un elemento nel blog

      Elimina
  4. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  5. Ciao, per caso è cambiato qualcosa da quando hai pubblicato il post? Ho fatto tutta la procedura ma non mi compare nulla :(

    Buon Natale!

    RispondiElimina
    Risposte
    1. Ciao! No, non è cambiato nulla, ma i post correlati non compaiono se il blog è privato ;)

      Elimina
  6. Salve, ricevo la risposta Bad Request Error 400

    RispondiElimina
    Risposte
    1. Ciao! Scusami non ho capito dove ricevi Error 400.
      Potresti spiegarmi meglio?

      Elimina

Grazie di aver commentato!
Solitamente rispondo ai commenti nelle prime 24 ore, se hai richieste urgenti puoi scrivermi usando il modulo dei contatti :)

Per favore NON lasciare link, a meno che non siano richiesti espressamente nel post stesso.
I commenti con link non richiesti o con link affiliati verranno considerati come SPAM e quindi subito cancellati.
So che capirai ;)