Pubblicato il 28/04/15e aggiornato il

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 

widget-articoli-simili-miniature-tooltip

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

b-skin-blogger

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

aprire-codice-html

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://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: 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.
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.




2 commenti :

  1. Non so se lo hai già presentato, ho provato a cercare nel sito, ma mi domando se sia possibile un widget simile da mettere in sidebar in cui però si possano inserire i link ai vari post in modo manuale invece che automatico o correlato. Grazie.

    RispondiElimina
    Risposte
    1. Se intendi mettere dei link ai post in modo manuale puoi farlo da solo con un Editor come Windows Live Writer. Ti crei il widget e poi copi il codice da incollarlo in Layout > Aggiungi un gadget > HTML/Javascript. Come aiuto leggi questo post
      http://www.ideepercomputeredinternet.com/2013/11/creare-galleria-immagini-blogger-wordpress.html
      Per qualcosa di più sofisticato leggi quest'altro
      http://www.ideepercomputeredinternet.com/2013/09/slideshow-jquery.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.