Come mostrare il widget degli Articoli Simili con Miniature nella versione mobile e desktop di Blogger.

Come installare il widget degli Articoli Simili o Correlati con Miniature sia nella versione desktop sia nella versione mobile di Blogger.

L'operazione già utilizzata per le icone di condivisione sui social network vediamo come può essere fatta anche con quelli che vengono chiamati gli Articoli Simili o Correlati. Cercheremo cioè di utilizzare gli stessi CSS e javascript per mostrare il widget degli Articoli Correlati con Miniature sia nella versione desktop sia nella versione mobile di Blogger.

Il gadget degli Articoli Simili per Blogger mostra una serie di post che abbiano almeno una etichetta in comune con l'articolo visualizzato. Tale gadget quindi verrà mostrato solo negli articoli e non nella Home, nelle pagine delle etichette o in quelle di archivio. Inoltre se un articolo ha delle etichette non presenti in altri post o in numero non sufficiente verrà mostrato un numero di post inferiore a quello desiderato. In ogni caso la scelta dei gadget fai da te come questo è sicuramente da preferire a quelli offerti da tool quali LinkWithin che provocano un sacco di problemi e disservizi.

Sono in molti a considerare questo widget non troppo utile perché sarebbero in pochi quelli che ci cliccano per leggere i post con lo stesso tema e quindi rimanere nel sito. Devo dire però che secondo me un aspetto accattivante del gadget degli Articoli Simili per la versione mobile permette ai lettori di navigare nel sito molto facilmente visto che il menù e il gadget degli ultimi post in genere sono nella sidebar e non vengono mostrati nella versione mobile.

INSTALLAZIONE DEI CSS E DEL JAVASCRIPT

Iniziamo a installare il codice che sarà comune per la versione desktop e per quella mobile. Dopo aver salvato il template si va su Modello > Modifica HTML, si cerca la riga </head> quindi subito sopra a questa si incolla questo codice

<!--Articoli Simili con Miniature Inizio-->
    <style type='text/css'>
      #articoli-simili {
        float:center;
        text-transform:none;
        height:175px;
        background-color: #FFFFFF;
        box-shadow: 0 0 0 1px white inset;
        -moz-box-shadow: 0 0 0 1px #fff inset;
        -webkit-box-shadow: 0 0 0 1px white inset;
        padding:5px;
      }
      #articoli-simili h2{
        padding: 8px 8px;
        color:#f95b5b;
        font-family:Georgia;
        line-height: 1.1em;
        font-weight: bold;
        text-shadow: 0 1px 0 white;
        font-size: 18px;
        letter-spacing: 0.2px;
        background: #ffffff;
        width:auto;
      }
      #articoli-simili a{
        color:#f95b5b;
        font-weight: bold;
      }
      #articoli-simili a:hover {
        background-color: rgba(21,149,134,0.7);
        color:#ffffff;        font-weight: bold;
        text-decoration: initial;
      }
    </style>
    <script type='text/javascript'>
      //<![CDATA[
      var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhknZpW41DVyTohq2YfbD4cINbvjrYvHgyn49e11DjVXJgW93PFo2ATWuue9r6bJCcrTVawzNX0HNJVBigOrMYqPg5Kx97PVg8MVa5pM8a3Wra_l2CRuBaIExZpsyrzQjlAx69GvS_gW1KC/s140-Ic42/no-image.jpg";
      var maxresults=6;
      var splittercolor="#ffffff";
      var relatedpoststitle="POST CON STESSO TEMA";
      var relatedTitles=new Array();
      var relatedTitlesNum=0;
      var relatedUrls=new Array();
      var thumburl=new Array();
      function art_corr_min(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/AVvXsEhknZpW41DVyTohq2YfbD4cINbvjrYvHgyn49e11DjVXJgW93PFo2ATWuue9r6bJCcrTVawzNX0HNJVBigOrMYqPg5Kx97PVg8MVa5pM8a3Wra_l2CRuBaIExZpsyrzQjlAx69GvS_gW1KC/s140-Ic42/no-image.jpg"}
            }
          }
          if(relatedTitles[relatedTitlesNum].length>75){
            relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,75)+"..."}
          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="#ffffff"}
        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: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:80px;height:80px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:80px;padding-left:3px;height:136px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: bold; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+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>
    <!--Articoli Simili con Miniature Fine-->

Adesso passiamo a installare l'HTML nelle due sezioni desktop e mobile.

INSTALLARE IL WIDGET NELLA VERSIONE DESKTOP

Sempre su Modello > Modifica HTML si cerca con Ctrl+F la riga

<b:includable id='post' var='post'>

si clicca sulla freccetta nera a sinistra quindi si scorre il codice verso il basso fino a trovare

<div class='post-footer-line post-footer-line-3'>

che dovrebbe essere l'ultima riga del footer. Potrebbe non esserci e allora l'ultima sarà quella con il 2 al posto del 3 . Si scorre il codice ancora verso il basso fino a trovare il tag </b:includable> che è quello conclusivo della sezione desktop come mostrato nel seguente screenshot

Alternativamente possiamo anche cercare la riga <b:includable id='postQuickEdit' var='post'> per poi salire in alto del codice per trovare </b:includable>.  Il codice dovrà comunque essere incollato proprio sopra alla riga colorata di viola e sarà il seguente

<!-- Articoli Correlati con Miniature per Desktop Inizio --> <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='articoli-simili'>
<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=art_corr_min&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'/>
</b:if>
<!-- Articoli Correlati con Miniature per Desktop Fine -->

Si salva il modello.

INSTALLARE IL WIDGET NELLA VERSIONE MOBILE

Il codice da incollare sarà esattamente lo stesso mostrato qui sopra. Dovremo andare su Modello > Modifica HTML e con Ctrl+F cercare la riga

<b:includable id='mobile-post' var='post'>

Si clicca sulla freccetta nera posta a sinistra per visualizzare tutto il codice della sezione e si scorre verso il basso fino a trovare questa nuova riga

<div class='post-footer-line post-footer-line-2'>

che è quella sotto la quale va incollato il codice precedente in questo modo
 

Per chiarezza si può sostituire i commenti della riga iniziale e finale che si riferiscono al Desktop. Si salva il modello. L'aspetto del widget nelle varie risoluzioni sarà il seguente

Ho scelto di mostrare 6 elementi che sia su desktop sia su tablet che abbiano una risoluzione simile a quella dell'iPad vengono mostrati nella stessa linea. Se si apre un post con un cellulare con risoluzione paragonabile a quella di un Samsung o di un iPhone (circa 350 pixel di larghezza), le 6 miniature con i titoli dei post si mostrano su due righe di tre post ciascuna. La soluzione forse non è ideale ma neppure disprezzabile e permette ai lettori da mobile di esplorare altri contenuti del sito.

PERSONALIZZAZIONI PIÙ IMPORTANTI

Nel codice HTML si deve scegliere solo il numero dei post da mostrare che dovrà essere lo stesso di quello impostato anche nel primo codice (6 è il numero proposto). Altre possibili modifiche:

1. Lo sfondo della scritta del titolo del widget in background: #ffffff;
   
2. Il colore della scritta del titolo in color:#d84938;
   
3. La famiglia di caratteri della scritta su font-family:Georgia;
   
4. La dimensione del carattere del titolo dei post font-size: 18px;
   
5. La distanza tra le varie lettere del titolo del widget su letter-spacing: 0.2px;
   
6. La configurazione del grassetto con il tag font-weight: bold;
   
7. Il colore del titolo e il grassetto su color:#d84938; font-weight: bold;
   
8. Lo sfondo e il colore del titolo al passaggio del mouse su background-color: rgba(21,149,134,0.7); color:#ffffff; font-weight: bold;
   I principianti possono consultare il post sui codici dei colori
   
9. L'immagine di default quando non siano presenti nel post su no-image.png. L'URL va inserito in due occorrenze del codice
   
10. Il colore di sfondo tra le varie miniature in var splittercolor="#ffffff"; da personalizzare in due occorrenze. Va detto che questo sfondo è visibile solo con vecchie versioni di IE.
    
11. Il numero delle miniature da visualizzare var maxresults=6;. Il numero è da configurare anche nel secondo codice come già illustrato
    
12. Il titolo del widget in var relatedpoststitle="POST CON STESSO TEMA";. Un titolo troppo lungo potrebbe mostrarsi su due righe in alcuni smartphone.
    
13. La dimensione delle miniature in img style="width:80px; height:80px
    
14. L'altezza dello spazio del titolo del post in height:136px;
    
15. Il grassetto del titolo del post font-weight: bold;
    
16. La dimensione dei caratteri del titolo dei post in font-size: 12px; mentre la lunghezza del titolo è proposta a 75 caratteri che possono essere aumentati nelle due occorrenze.
    
17. Ricordo che chi volesse usare il corsivo per titolo del widget o dei post può inserire nel relativo CSS la riga font-style: italic; da sola o al posto di font-style: normal;.