Widget degli Articoli Correlati con Miniature e Tooltip.

Come installare il widget degli Articoli Simili con Miniature e Tooltip per blog su Blogger.

Gli Articoli Correlati o Post Simili o Related Posts sono quegli articoli che abbiano almeno una etichetta in comune con il post che si sta visualizzando. Si tratta di uno di quei widget che sono particolarmente importanti per aumentare il tempo medio di permanenza dei visitatori nel nostro sito visto che il mostrare altri post con argomenti simili a quello in visione aumenta la possibilità che ci possa cliccare sopra per consultare altri nostri contenuti. 

Dopo aver mostrato il gadget degli Articoli Simili con Miniature e Snippet e quello degli Articoli Correlati solo con le Miniature, modificando lo stesso javascript e adattando i CSS vado a illustrare il widget per Blogger degli Articoli Simili con Miniature e Tooltip dei Titoli dei Post da posizionare alle fine del contenuto degli articoli 

Prima di procedere occorre salvare il template. Si va quindi su Modello > Modifica HTML e intorno alla 13-esima riga si clicca sulla freccetta nera accanto a <b:skin> per visualizzare il codice

A questo punto con Ctrl+F si cerca la riga ]]></b:skin> che si trova alla fine di quella sezione. Subito sopra a questa si incolla questo codice 

/* ==== Articoli Correlati con Tooltip - Inizio ==== */
.related-post {
  margin:2em auto 0;
  font:normal normal 11px/1.4 Arial,Sans-Serif;
}
.related-post h4 {
  font-size:150%;
  margin:0 0 .5em;
}
.related-post-style-4,
.related-post-style-4 li {
  margin:0;
  padding:0;
  list-style:none;
  word-wrap:break-word;
  overflow:visible;
  position:relative;
  outline:none;
}
.related-post-style-4 .related-post-item {
  display:block;
  float:left;
  width:80px;
  height:auto;
  padding:10px;
}
.related-post-style-4 .related-post-item-thumbnail {
  display:block;
  margin:0 0 10px;
  width:80px;
  height:80px;
  max-width:none;
  max-height:none;
  background-color:transparent;
  border:none;
  padding:0;
}
.related-post-style-4 .related-post-item-title {font-weight:bold}
.related-post-style-4 .related-post-item-tooltip {
  border:1px solid #bbb;
  background-color:white;
  width:150%;
  text-align:center;
  position:absolute;
  bottom:100%;
  left:0;
  z-index:999;
  margin-bottom:-30px;
  padding:10px 10px 12px;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.2);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  display:none;
}
.related-post-style-4 .related-post-item:last-child .related-post-item-tooltip {
  left:auto;
  right:0;
}
.related-post-style-4 .related-post-item-tooltip:before,
.related-post-style-4 .related-post-item-tooltip:after {
  content:"";
  display:block;
  width:0;
  height:0;
  border:10px solid transparent;
  border-top-color:inherit;
  position:absolute;
  top:100%;
  left:37px;
}
.related-post-style-4 .related-post-item-tooltip:after {
  border-top-color:white;
  border-width:9px;
  margin-left:1px;
}
.related-post-style-4 .related-post-item:last-child .related-post-item-tooltip:before,
.related-post-style-4 .related-post-item:last-child .related-post-item-tooltip:after {
  right:37px;
  left:auto;
}
.related-post-style-4 .related-post-item:last-child .related-post-item-tooltip:after {
  margin-left:auto;
  margin-right:1px;
}
.related-post-style-4 .related-post-item:focus {outline:none}
.related-post-style-4 .related-post-item:focus .related-post-item-tooltip,
.related-post-style-4 .related-post-item:hover .related-post-item-tooltip {display:block}
/* ==== Articoli Correlati con Tooltip - Fine ==== */

Sempre con Ctrl+F si cerca ora questa nuova riga

<b:includable id='post' var='post'>

Si clicca sempre sulla freccetta nera posta a sinistra per visualizzare tutta la sezione



Si scorre il codice verso il basso fino a trovare la riga

<div class='post-footer'>

che indica l'inizio del footer. Subito sopra a questa si incolla questo ultimo codice

<!-- Widget degli Articoli Correlati con Tooltip - 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;Ti potrebbero anche interessare&lt;/h4&gt;&quot;,
      numPosts: 4,
      summaryLength: 350,
      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: 4,
      callBack: function() {}
  };
  </script>
  <script type='text/javascript' src='https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/articoli-simili-miniature.js'/>
</b:if>
<!--  Widget degli Articoli Correlati con Tooltip  - Fine -->

Finalmente si salva il modello. Ricordarsi che il widget è presente sono nei post quindi se andate su Anteprima non vedrete nulla visto che si tratta della Preview della Homepage.

Demo
Clicca qui

Le personalizzazioni più importanti riguardano:

1. La famiglia di font (Arial)
2. La dimensione del titolo del widget (150%)
3. La dimensione delle miniature (80 pixel)
4. Il numero di post da mostrare (4)
5. Il titolo Ti potrebbero anche interessare
6. L'URL della immagine di default qualora non ce ne fossero nel post
7. L'apertura del link in una nuova scheda (altrimenti sostituire true con false in newTabLink)
8. Lo script colorato di viola caricato su Google Drive può essere caricato su un vostro spazio.