Lavoriamo insieme ✨

In questa pagina trovi i servizi che metto a disposizione per chi vuole migliorare la propria comunicazione online, attraverso il blogging e non solo.
Se hai dubbi su quale servizio scegliere, non esitare a contattarmi.
Sarò felice di risponderti :)

Blogger in Azione

Blogger in Azione

ideale per chi ha già un blog, e vuole analizzare la propria comunicazione
Web Design

Web Design

avere un sito ben curato è importante, anche su Blogger!
Primi Passi

Primi Passi

1 problema = 1 soluzione. Anche se sei alle prime armi, l'importante è partire!
F.A.Q.

F.A.Q.

Hai dubbi? Leggi le F.A.Q. per cominciare, oppure contattami :)

Illustrazioni e Lettering

In questa pagina trovi alcuni miei lavori di illustrazione e lettering creati per i miei canali social.

Blog Coaching

*Mentoring e Formazione Blogging personalizzata*

Quanti consigli hai seguito ma ti sembra di non raggiungere mai i risultati sperati con il tuo blog? Ti capisco, anche io ero come te.
Fino a quando non ho capito come funziona il Blogging, e ho lavorato per portare il mio blog nelle prime posizioni su Google e farmi notare dalle aziende, che hanno iniziato a contattarmi per le collaborazioni.
In oltre 15 anni molte/i blogger mi hanno chiesto aiuto, e oggi posso aiutare anche te.

Home » tutorial » tu sei qui👇

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCnNK3TMOn4MuRKAyCrsOgfgDCsxCroZhiy5Lk49mn3HIJXOecHtcgUSWBci15du4Ks5iOjl6pDzJql1e0rOEMEaUvlppbHdJ9m0CbZiYpiLPLoRXlZCO2iKoqtX_PTF6-VKsgVdZrmJo/s0/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!
in: blogger, coding, tutorial


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

  1. Angololunedì, 29 febbraio, 2016

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

    RispondiElimina
    Risposte
    1. Simona S.martedì, 01 marzo, 2016

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

      Elimina
    2. Angolomartedì, 01 marzo, 2016

      Mi segna più di una riga...

      Elimina
    3. Simona S.martedì, 01 marzo, 2016

      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. Simona S.martedì, 01 marzo, 2016

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

      Elimina
    5. Simona S.martedì, 01 marzo, 2016

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

      Elimina
    6. Angolomercoledì, 02 marzo, 2016

      Grazie!

      Elimina
  2. Sarlilladomenica, 13 marzo, 2016

    Grazie ho fatto tutto e funziona perfettamente! Grazie mille!

    RispondiElimina
  3. Rosalbavenerdì, 03 febbraio, 2017

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

    RispondiElimina
    Risposte
    1. Simona S.giovedì, 09 febbraio, 2017

      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. La pietra blu di Avalonlunedì, 24 dicembre, 2018

    Questo commento è stato eliminato dall'autore.

    RispondiElimina
  5. La pietra blu di Avalonlunedì, 24 dicembre, 2018

    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. Simona S.venerdì, 28 dicembre, 2018

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

      Elimina
  6. il solletico nel cuoregiovedì, 23 aprile, 2020

    Salve, ricevo la risposta Bad Request Error 400

    RispondiElimina
    Risposte
    1. Simona S.giovedì, 23 aprile, 2020

      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 ;)

Iscriviti a: Commenti sul post (Atom)