Pubblicato il 26/07/15e aggiornato il

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://lh3.googleusercontent.com/-QHAVnMyiszg/VHL1-qLbkTI/AAAAAAAAqMA/KjsePS2PsRQ/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://lh3.googleusercontent.com/-QHAVnMyiszg/VHL1-qLbkTI/AAAAAAAAqMA/KjsePS2PsRQ/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

posizionamento-articoli-simili

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
 
codice-articoli-correlati

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

articoli-correlati-desktop-mobile

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




8 commenti :

  1. si possono mostrare 7 post nel desktop e 6 nel mobile??
    Grazie

    RispondiElimina
    Risposte
    1. Purtroppo con questo codice no. Per poterlo fare dovresti mettere il javascript insieme al codice del desktop e incollarlo anche insieme a quello del mobile. Solo in questo modo si possono settare due numeri diversi per i post. Con un javascript unico per desktop e mobile non è ovviamente possibile.
      Si potrebbe eliminare la riga
      var maxresults=6;
      per poi aggiungere due javascript diversi che la contengano per il desktop e il mobile in questo modo
      <script type='text/javascript'>
      //<![CDATA[
      var maxresults=6;
      //]]>
      </script>
      variando il numero da desktop e mobile. C'è però un'altra occorrenza del numero dei post e non ho testato se funziona
      @#

      Elimina
  2. Ciao! Sono già bloccata all'inizio, quando dovrei trovare la riga "b: includable id ecc." (non me la fa copiare) per installare il widget nella versione desktop e, invece, mi dice "testo non trovato".

    RispondiElimina
    Risposte
    1. Credo che tu abbia dei problemi nel cercare il codice HTML nel modello. Leggiti questi due post e magari guarda anche i video
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      @#

      Elimina
  3. Ciao Ernesto, io ho un problema: nella versione desktop tutto ok, mentre in quella mobile ho il problema che mi visualizza un post in più rispetto a quanto ho segnalato di fare e questo è lo stesso post che sto visualizzando.
    Sai come aiutarmi?
    Grazie :)

    RispondiElimina
    Risposte
    1. Vengono visualizzati lo stesso numero di post da mobile e da desktop. Per più info leggiti il commento 1 e la risposta 1.a qui sopra
      @#

      Elimina
    2. Io ho utilizzato un codice simile per fare i correlati su desktop (preso da questo sito) e poi ho aggiunto solo il codice per la versione mobile. In questo modo ho un numero diverso da mobile e da desktop ma ho questo errore nella versione mobile...

      Elimina
    3. Controlla se lo script è identico. In questo caso ovviamente non c'è differenziazione. Dovresti cambiare nome a tutte le funzioni tipo art_corr_min
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.