Pubblicato il 09/04/15e aggiornato il

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

articoli-simili-widget-blogger

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:

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://lh4.googleusercontent.com/-e30r1uLzAhY/TzjkJN7EfyI/AAAAAAAAWi8/rIzEuilOVH8/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.




11 commenti :

  1. salve, complimenti per l'articolo, seguo sempre con molta attenzione i tuoi articoli; questa volta però ho riscontrato un problema, una volta inseriti i codici nel modello la descrizione mi appare in linguaggio HTML e non in linguaggio normale; potresti darmi qualche dritta per risolvere questo problema? grazie mille :)

    RispondiElimina
    Risposte
    1. Se vedei del codice al posto del normale snippet è probabile che ti succeda lo stesso anche quando condividi articoli su Facebook o Google+. Controlla che sia così. Se è proprio così prova a usare questi accorgimenti
      http://www.ideepercomputeredinternet.com/2013/03/open-graph-facebook.html
      @#

      Elimina
    2. no quando condivido non succede questo; il fatto è che con tutti i widget simili a questo mi accade la stessa cosa, ossia la descrizione mi appare nel linguaggio del codice; infatti adesso sto usando un altro tipo di widget, ma indubbiamente questo era migliore, per questo ho provato :)

      Elimina
    3. Forse hai inserito una barra o uin banner nella parta alta del blog sopra l'Intestazione che interferisce con la descrizione oppure utilizzi la personalizzazione per i titoli nel senso che magari inserisci grassetto, colori diversi, corsivo, ecc. In queste cose ci sono sempre i pro e i contro
      @#

      Elimina
    4. si utilizzo il grassetto nei titoli, ma questo problema l'ho riscontrato anche prima di utilizzarlo quando ho provato dei widget con una funzionalità simile; grazie mille in ogni caso :)

      Elimina
    5. Anche io lo stesso bug. Le prime righe di ogni post rappresentato dal widget, invece di contenere il testo dell'articolo contengono codice html:
      "Normal 0 14 false false false FR X-NONE X-NONE"
      C'è un modo per non far apparire affatto questo testo?
      Che righe del codice devo sopprimere? A me in effetti il titolo si legge bene, e cio' mi basterebbe!

      Elimina
    6. Prova a mettere 0 in summarylengh cioè zero caratteri da visualizzare nello snippet
      @#

      Elimina
  2. Ho inserito il widget e funziona senza problemi. L'unico fastidio è che apre i link in una nuova scheda e non in quella visualizzata. Si può risolvere?

    RispondiElimina
    Risposte
    1. Come non detto. Ho risolto mettendo false a "newTabLink"

      Elimina
    2. Grazie di avermelo ricordato. Aggiorno subito il post. Avevo dimenticato di scrivere anche di quella personalizzazione
      @#

      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.