Widget degli Articoli Correlati per Blogger.

Come installare nei blog su Blogger il widget degli Articoli o Post Simili o Articoli Correlati o Related Posts che mostrano le etichette in orizzontale con il titolo del post visualizzato al passaggio del cursore.

Riprendendo il codice utilizzato per il gadget degli Articoli Simili e che è stato creato da sito indonesiano DTE Web si può fare in modo da mostrare solo le miniature dei post correlati. Quando il navigatore passerà sopra a una miniatura con il cursore visualizzerà il titolo del post collegato che potrà aprire cliccandoci sopra. 

Ricordo che la definizione di Articoli Correlati o Post Simili o Related Posts per quello che riguarda la piattaforma Blogger significa selezionare gli articoli che abbiano almeno una etichetta in comune con il post visualizzato. Gli articoli correlati vengono mostrati in modo casuale e se un post non ha etichette non ha nemmeno articoli simili. Questo succede anche se il numero dei post correlati è inferiore al numero configurato nel widget. Vale a dire che se noi impostiamo di visualizzare 5 post e l'articolo in questione ne ha solo quattro ecco che lo spazio potrebbe rimanere vuoto. Tutto questo per informare che chi voglia utilizzare questo o dei widget simili è bene che ci siano sempre un numero di etichette in grado di avere un numero sufficiente di post correlati. 

 

Dopo aver salvato il template andate su Modello > Modifica HTML e intorno alla 13-esima riga cliccate sulla freccetta nera posta a sinistra della sezione <b:skin>. Cliccate nell'area del codice e digitate Ctrl+F per cercare la riga ]]></b:skin> e, subito sopra, incollate il codice 

/* ==== Articoli Correlati Inizio ==== */
.related-post {
  margin:2em auto 0;
  font:normal normal 11px/1.4 Georgia;
}
.related-post h4 {
  font-size:150%;
  margin:0 0 .5em;
}
.related-post-style-5,
.related-post-style-5 li {
  margin:0;
  padding:0;
  list-style:none;
  word-wrap:break-word;
  overflow:hidden;
}
.related-post-style-5 .related-post-item {
  display:block;
  float:left;
  width:80px;
  height:auto;
  padding:10px;
  border-left:1px solid #fff;
}
.related-post-style-5 .related-post-item:first-child {border-left:none}
.related-post-style-5 .related-post-item-wrapper {
  display:block;
  position:relative;
  overflow:hidden;
}
.related-post-style-5 .related-post-item-thumbnail {
  display:block;
  margin:0;
  width:80px;
  height:80px;
  max-width:none;
  max-height:none;
  background-color:transparent;
  border:none;
  padding:0;
}
.related-post-style-5 .related-post-item-tooltip {
  display:block;
  background-color:#202020;
  background-color:rgba(20,20,20,0.8);
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  padding:10px;
  line-height:normal;
  font-style:italic;
  color:#FFF;
  overflow:hidden;
  display:none;
}
.related-post-style-5 .related-post-item:focus .related-post-item-tooltip,
.related-post-style-5 .related-post-item:hover .related-post-item-tooltip {display:block}
/* ==== Articoli Correlati Fine ==== */

Si cerca quindi la riga <b:includable id='post' var='post'> ed eventualmente si clicca sulla freccetta nera posta alla sua sinistra per visualizzare tutto il codice della sezione desktop del blog. Si scorre verso il basso fino a trovare la riga <div class='post-footer'> che indica l'inizio del footer. Subito sopra a questa riga si incolla questo nuovo codice 

<!-- Articoli Correlati Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='articoli-correlati' class='related-post'/>
  <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;Articoli Correlati&lt;/h4&gt;&quot;,
      numPosts: 5,
      summaryLength: 300,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 80,
      noImage: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ch75j9oydu3I3Z9mTTol89dMcnB8VChyphenhyphen83Y58QiiT-gSphWA-afS1jXozn0Ind3X_hqYPZ7uWXV2D628DytD9FsxivMrf1inyO-7tPsKio2h8uBHBxVkEWoe-E1h1D9xvY6Sp5bV5To/s100/no-image1.png&quot;,
      containerId: &quot;articoli-correlati&quot;,
      newTabLink: true,
      moreText: &quot;Leggi tutto&quot;,
      widgetStyle: 5,
      callBack: function() {}
  };
  </script>
  <script type='text/javascript' src='https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/articoli-simili-miniature.js'/>
</b:if>
<!-- Articoli Correlati Fine -->

Si salva il modello. Ho postato in rete una dimostrazione

Alcuni parametri del codice non servono per questo widget come quello del numero dei caratteri del sommario che non è visualizzato. Le personalizzazioni più importanti riguardano la famiglia di font (Georgia), la dimensione delle miniature (80 pixel), il colore di sfondo (#202020), il grado di opacità (0.8) e il colore del testo del titolo (#FFF). I meno esperti possono consultare il post sui codici dei colori nel caso avessero dei dubbi.

Nel secondo codice oltre che sulle dimensioni delle miniature di può operare sul Titolo del Widget (Articoli Correlati), sul numero delle miniature da visualizzare (5), sull'URL della immagine da visualizzare di default e sulla opzione di aprire il link in un'altra scheda. Se si vuole aprire nella stessa scheda del browser basta sostituire true a false dopo newTabLink. Concludo ricordando che per sicurezza sarebbe opportuno salvare il javascript con l'URL colorato di viola, caricarlo sul proprio Google Drive per poi ottenerne il link diretto da sostituire a quello dato.