Pubblicato il 12/04/15e aggiornato il

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

articoli-correlati-blogger 

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://lh4.googleusercontent.com/-BgTz_9IszCU/VRVhietJIFI/AAAAAAAAr3s/tR1s46ZoqsI/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

demo-articoli-correlati

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.




8 commenti :

  1. che tristezza neppure questo funziona su blogger....

    RispondiElimina
    Risposte
    1. Hai provato sul tuo blog o in un blog di prova? Se in un blog di prova questo blog aveva un numero di post sufficienti? Ci devono essere almeno 5 post per etichetta. Se il test lo hai fatto bene può essere che lo script non funzioni nel tuo template. Prova questo
      http://www.ideepercomputeredinternet.com/2013/02/related-posts-with-thumbnails-for-blogger_7.html
      @#

      Elimina
  2. grazie per la risposta.
    L'ho provato sul blog e di post nelle etichette ce ne sono più di 5.
    Quello che mi hai linkato l'ho provato già ma io non ho la riga "....footer-line-3'>"
    il perchè non lo so....

    RispondiElimina
    Risposte
    1. Non importa. Lo puoi inserire nella riga footer-line-2', sempre se ti piace
      @#

      Elimina
  3. Ciao Ernesto,
    mi sai dire per caso se questo widget funziona anche su un modello tipo Blogger Responsive Template?
    Grazie

    RispondiElimina
    Risposte
    1. Non si può dire a priori. Dovresti testare per vedere anche in un semplice blog di prova
      @#

      Elimina
  4. Ciao, vorrei sapere come hai fatto ad inserire quegli articoli correlati con "Powered by Google" sotto al post... mi piace come sono strutturati.
    Grazie!

    RispondiElimina
    Risposte
    1. Per poterli inserire devi essere iscritta ad Adsense e avere un sito abilitato per i contenuti con corrispondenza
      http://www.ideepercomputeredinternet.com/2015/09/contenuti-corrispondenza-adsense-blogger-modello.html
      @#

      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.