Pubblicato il 23/01/13 - aggiornato il  | 25 commenti :

Widget degli Articoli Simili con Miniature e Tooltip.

Installare il widget degli Articoli Simili o Correlati con Miniature o Thumbnails su Blogger.
Due articoli si definiscono simili o correlati se hanno in comune almeno una etichetta. Mostrare in modo casuale alla fine del post un elenco più o meno lungo di post che condividano una etichetta con quello che si sta visualizzando può invogliare il visitatore a cliccarci sopra per consultarli. Ho già presentato diverse versioni di Articoli Simili. Ne ricordo una minimalista che mostra solo il titolo dei post e una esteticamente più valida che mostra oltre ai titoli anche le miniature.

Vado adesso a presentare un nuovo gadget da inserire alla fine degli articoli che mostra in orizzontale un certo numero di miniature con il link agli articoli simili a quello che si sta visualizzando.




Un'altra particolarità di questo widget è che se si passa con il cursore sopra alle miniature si visualizza un tooltip con il relativo titolo. Il gadget si visualizzerà necessariamente solo nei post e avrà un aspetto che ricorda quello celebre di LinkWithin

articoli-simili-blogger
Dopo aver salvato il template si va su Modello > Modifica HTML > Procedi. Dopo aver messo la spunta a Espandi i modelli widget, si cerca la riga ]]></b:skin>. Subito sopra si incolla questo codice

/* Articoli Correlati con Tooltip  */
.related-post .post-thumbnail {
  z-index: 19;
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0;
  display: block;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: inset 2px 2px 5px #666;
  -moz-box-shadow: inset 2px 2px 5px #666;
  box-shadow: inset 2px 2px 5px #666;
}
.related-post {
  float: left;
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0 10px 10px 0;
  background: #E5E5E5;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  }
.related-post .related-post-title {
  display: none;
  float: left;
  background: #000000;
  color: #ffffff;
  text-shadow: none;
  font-weight: bold;
  padding: 9px;
  position: absolute;
  top: -20px;
  left: 40px;
  z-index: 29;
  width: 200px;
  -webkit-box-shadow: 0 0 2px #666;
  -moz-box-shadow: 0 0 2px #666;
  box-shadow: 0 0 2px #666;
}
.related-post:hover .related-post-title {display: block;}

Si cerca poi la riga

<div class='post-footer-line post-footer-line-3'>

e subito sopra si incolla quest'altro codice

<!-- Articoli Correlati con Miniature e Tooltip Inizio -->
<div id='related-posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>//<![CDATA[
var ry='<br/><h3>Articoli Correlati</h3><br/>';rn='<h3>&nbsp;&nbsp;Non ci sono post simili&nbsp;</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTZn6KM7QyL21_P2U9Kqjj84Pa2XT9V4SZDmMkldHNfWHxk9mj2mOKuuAaP2ukUt60_lIdxEIewKo_Wj7ZWfKsl8fYfH3YjNnXYJQubO98AcjedWrfff_spuOfx5LOdWAe65q3BGKOP96n/s140/default-image.png'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</b:if>
</div>
<div class='clear'/>
<!-- Articoli Correlati con Miniature e Tooltip Fine -->

Si salva il modello. Le personalizzazioni più importanti sono state colorate di rosso:
  1. Si setta il numero dei post da visualizzare maxresults=5;
  2. La dimensione delle miniature. Quelle proposte sono quadrate di 84 pixel
  3. Il colore di sfondo del tooltip (nero #000000) e quello del testo (bianco #FFFFFF)
  4. L'URL della immagine di default quando nel post non ce ne sono.
  5. Le espressioni Articoli Correlati e Non ci sono post simili possono essere cambiate
  6. Per posizionare il tooltip al meglio anche in funzione dei vari browser basta modificare i parametri top: -20px; left: 40px; che ne determinano la posizione in relazione alle miniature.
Fonte | MyBloggerLab -


25 commenti :

  1. ho provato a inserirlo ma mi dà errore 500

    RispondiElimina
    Risposte
    1. @ Era stato Windows Live Witer di Windows 8 che mi inserisce degli spazi prima dei tag <. Prova adesso, dovrebbe funzionare. In genere uso Windows 7. Sono passato a W8 solo perché il quel portatile avevo Vista che non avrà più il supporto.

      Elimina
    2. sì funziona ora grazie. Solo che in IE le scritte sopra le miniature appaiono sotto la foto, x cui si leggono solo in parte

      Elimina
    3. ho risolto con top: -50px;
      left: 0px;

      grazie :)

      Elimina
    4. @ Ho aggiunto una riga alle personalizzazioni proprio su questo punto. Ormai ho smesso di verificare il funzionamento dei widget con IE :)

      Elimina
    5. Ti capisco, grazie per il widget :)

      Elimina
  2. E' un widget molto bello. L'ho inserito nel mio blog, diminuiendo solo un po' le dimensioni delle miniature e invertendo colore di sfondo/scritta del tooltip. Le immagini con i bordi arrotondati riprendono lo stile di Google Plus. ;)

    Complimenti ancora e buona giornata.

    RispondiElimina
  3. non ci riesco è un widget molto bello! riprovo!

    RispondiElimina
  4. ciao Ernesto,
    ho sostituito il classico LinkWithin con questo, molto + bello.
    E' possibile personalizzare font e grandezza del testo nel tooltip??!
    Grazie

    RispondiElimina
    Risposte
    1. @ Tiziana
      In questo CSS
      .related-post .related-post-title {
      display: none;
      float: left;
      .....
      puoi inserire le righe che ti pare per esempio in questo modo
      font-size:14px;
      font-family:Arial;

      Elimina
  5. Grazieee..
    Ho modificato così:
    font-size:12px;
    font-family:verdana;

    RispondiElimina
  6. Non va. Ti pongo due domande. Quando cerco la riga

    ]]>

    a me compare

    .Header { text-align: center; }]]>

    dove inserisco il primo codice? Prima delle quadre?
    La parte in verde fa parte del codice?
    Grazie e scusa

    RispondiElimina
    Risposte
    1. @SebastianoDiMaria
      Nel tuo template c'è un po' di confusione. Metti il cursore dopo la parentesi graffa di chiusura di { text-align: center; } e pigia su Invio. In questo modo dovresti vedere la riga colorata di rosso del post. Se non è così vai su Canc e su Invio fino a ottenerla. Prima di tutte queste operazioni salva il template. Il codice va inserito subito sopra a tale riga. Comunque sempre dopo una parentesi graffa che dovrebbe essere la fine del codice precedente.
      La parte in verde si può anche tralasciare però è bene non farlo per ricordarsi quale sia il codice inserito per eventuali modifiche future.

      Elimina
    2. @Ernesto Tirinnanzi, scusa per il post, ma ne avevo cancellato un altro prima per lo stesso problema, boh. Ho fatto come mi hai scritto, ma niente, faccio l'anteprima ma non ottengo niente, o devo salvare il nuovo codice perchè sia visibile?

      Elimina
    3. @ ..
      In linea di massima non si può inserire codice HTML nei commenti
      http://www.ideepercomputeredinternet.com/2011/05/come-inserire-codice-html-o-javascript.html
      Nel tuo caso devi trovare questa riga
      ]]></b:skin>
      e separarla da altri segni come le parentesi graffe. Poi segui le istruzioni del post. Se non ti funziona potrebbe essere un tuo errore ma anche una incompatibilità del modello. Il codice va bene perché oltre che controllare la demo basta leggere i commenti precedenti.

      Elimina
    4. Mi spiace, credo che sia una questione di incompatibilità di modello, le ho provate tutte. A cosa potrebbe essere dovuta tale incompatibilità, se è lecito chiedere? Grazie ancora e scusa se ti tedio oltremodo.

      Elimina
    5. Ho provato anche con LinkWithin, niente. Credo sia prorio il modello :(

      Elimina
    6. @ Non si può sapere perché una cosa funzioni in un modello mentre non sia così per un altro. Io faccio sempre riferimento ai template ufficiali di Blogger

      Elimina
  7. Grazie mille per il widget!
    Funziona perfettamente, ma ho un problema... per alcuni post invece di caricare l'immagine visualizza quella di default come se non ce ne fosse nessuna...
    nonostante siano tutte in .jpg
    A cosa può essere dovuto?

    RispondiElimina
    Risposte
    1. @# Se non si vedono le immagini vuol dire che sono state tutte messe dopo l'intervallo cioè dopo il riassunto che si vede in homepage

      Elimina
    2. Forse ho risolto...
      Mi capitava anche con immagini al top del post.
      Non avevo questo problema con il tuo vecchio widget... (se te lo stai chiedendo: ho dovuto cambiarlo perché blogger da ieri non me lo visualizzava più :D )
      Credo che il problema fosse il link ad un sito web esterno, ho risolto semplicemente scaricando le immagini sul mio pc e sostituendo le foto dei post...
      Grazie per la risposta!
      Complimenti per l'ottimo lavoro!

      Elimina
  8. Ci ho provato ma non è comparso il widget!

    RispondiElimina
    Risposte
    1. @# Anche per questo widget vale quello che ti ho appena scritto nell'altro commento. Non è detto che non ti funzioni perché hai sbagliato, può darsi che succeda per altre ragioni. Come puoi leggere nei precedenti commenti in alcuni blog il widget funziona mentre in altri non ne vuole sapere :(

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy