Widget degli Articoli Simili per Blogger (Related Posts).

Come installare il gadget degli Articoli Correlati (o Simili o Related Posts) in un blog di Blogger con miniature, titoli e snippet dell'incipit dell'articolo.

Il widget degli Articoli Simili è presente in moltissimi siti e mostra ai lettori gli articoli che abbiano attinenza con la pagina che si sta leggendo. Per selezionare i post simili a quello dato ci si può rivolgere a un servizio esterno tipo LinkWithin oppure con un opportuno script scegliere i post che abbiano almeno una etichetta simile con quello visualizzato. 

In questa seconda ipotesi si può optare per un semplice elenco di titoli dei post, oppure scegliere di mostrare oltre ai titoli anche le miniature o ancora decidere di visualizzare anche gli snippet degli incipit dei post stessi. Il widget che vado a illustrare è probabilmente il più ricco di quelli che ho presentato sui Related Posts. Infatti ciascun Articolo Correlato viene mostrato insieme alla miniatura e allo snippet in un elenco verticale che riempie la parte bassa della pagina. Questa opzione è utile quando si vuole avere un impatto visivo piuttosto forte nei confronti dei lettori come nel caso dei blog di cucina che per esempio sotto alla presentazione di una ricetta di un primo piatto si visualizzeranno tutti gli elementi sufficienti per valutare altre ricette simili come immagini, titoli e testo

Nel caso in cui in un post non ci siano foto si potrà visualizzare una immagine di default personalizzabile. Ho anche postato una demo online:

Dopo aver salvato il template si va su Modello > Modifica HTML e intorno alla 14-esima riga si clicca sulla freccetta nera per visualizzare tutto il codice della sezione <b:skin>. Si cerca quindi con Crtrl+F la riga ]]></b:skin> e, subito sopra, si incolla questo codice

/* ==== Articoli Simili con Miniature 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-2,
.related-post-style-2 li {
  margin:0;
  padding:0;
  list-style:none;
}
.related-post-style-2 li {
  padding:10px;
  border-top:1px solid #eee;
  overflow:hidden;
}
.related-post-style-2 li:first-child {border-top:none}
.related-post-style-2 .related-post-item-thumbnail {
  width:80px;
  height:80px;
  max-width:none;
  max-height:none;
  background-color:transparent;
  border:none;
  padding:0;
  float:left;
  margin:2px 10px 0 0;
}
.related-post-style-2 .related-post-item-title {
  font-weight:bold;
  font-size:110%;
}
.related-post-style-2 .related-post-item-summary {
  display:block;
  overflow:hidden;
}
.related-post-style-2 .related-post-item-more {}
/* ==== Articoli Simili con Miniature Fine ==== */

Sempre con Ctrl+F si cerca quindi la riga <b:includable id='post' var='post'> che marca l'inizio della versione desktop del template. Si clicca sulla freccetta nera posta a sinistra per visualizzare tutta la sezione e si scorre il codice verso il basso fino a trovare l'altra riga <div class='post-footer'> che invece marca l'inizio del footer. Subito sopra a questa riga si incolla questo nuovo codice

<!-- Articoli simili inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='articoli-simili' 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 Simili&lt;/h4&gt;&quot;,
      numPosts: 6,
      summaryLength: 350,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 80,
      noImage: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmwZtq1rV0mgt2rbHqD1Z2lApaguJJWTXB37UFlOOCYosDydyPHmmSlXMsRVUesFeoTKVi_QOw_WCv05lXGNZTOm7bmMKHZqRZSwOhxB9tkZLrtINky76mS6CMsCKcx8LHDECWmECdJMJa/s72-no/no-image.jpg&quot;,
      containerId: &quot;articoli-simili&quot;,
      newTabLink: true,
      moreText: &quot;Leggi tutto&quot;,
      widgetStyle: 2,
      callBack: function() {}
  };
  </script>
  <script type='text/javascript' src='https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/articoli-simili-miniature.js'/>
</b:if>
<!-- Articoli simili fine -->

Si salva il modello. Le personalizzazioni più importanti del primo codice riguardano la famiglia di font (Georgia), le dimensioni in percentuale del testo di titolo del widget (150%) e del titolo del post (110%), del colore del bordo della linea che viene inserita come divisione tra post e post (#eee) e dalla dimensione (80 pixel) delle miniature. 

 

Nel secondo codice oltre alle dimensioni delle stesse miniature si possono impostare il numero dei post da visualizzare (6), il numero dei caratteri del testo dell'incipit (350), il testo da visualizzare nel Read More (Leggi tutto) e l'URL della immagine di default da mostrare nei post che non ne abbiano. Se si desidera che il post correlato si apra nella stessa scheda del browser invece che in un'altra bisogna mettere false al posto di true dopo newTabLink. Infine l'URL colorato di viola è il javascript caricato su Google Drive che i più previdenti possono salvare per poi caricarlo sul loro account Google Drive per ottenerne il link diretto da sostituire a quello del codice.