immagin top

28.2.16

Blog design: aggiungere il 'related post'

28.2.16



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]="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/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!

10 commenti:

  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. 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
    3. Ok, ho in pratica 'forzato' il codice, ora funziona ;)

      Elimina
    4. 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

I tuoi commenti sono un vero toccasana per il mio blog! Grazie per il tuo contributo :*