Pubblicato il 05/02/13e aggiornato il

Widget degli Articoli Simili o Correlati con Miniature per Blogger.

Il widget degli Articoli Simili con Miniature per Blogger con effetto hover che modificano il loro aspetto al passaggio del cursore
Vado a presentare una nuova proposta per il widget gli Articoli Simili da visualizzare alla fine dell'articolo. E' un gadget che solitamente si inserisce nel modello perché se installato con un gadget HTML/Javascript si visualizzerebbe dopo l'area del post e quindi anche dopo gli eventuali commenti che ha ricevuto l'articolo. Ho da poco presentato gli Articoli Simili con Miniature e Tooltip che hanno ricevuto un discreto successo. Chi preferisce una scelta più minimalista senza immagini può optare per questa versione di Articoli Correlati che ha comunque un grosso impatto visivo.

Con questa nuovo widget si vengono a visualizzare le miniature relative ai post simili insieme anche al titolo dell'articolo relativo. Rispetto al gadget con il tooltip non occorre che il lettore ci passi sopra con il mouse per leggerne il titolo senza perdere il valore aggiunto della visualizzazione delle miniature della prima immagine presente nel post. Per i pochi che non lo sapessero ricordo che si definiscono simili o correlati due articoli che abbiano almeno una etichetta in comune. Naturalmente cliccando sul titolo o sulla miniatura apriremo il post a cui si riferiscono.

articoli-simili-miniature
E' pure presente un effetto hover che modifica i colori del testo e dello sfondo quando ci si passa sopra con il mouse. Come mia abitudine ho postato in rete un post esplicativo



Dopo aver salvato il template si va su Modello > Modifica HTML > Procedi e si espandono i modelli widget. Si cerca la riga </head> e, subito sopra, si incolla il seguente codice

<!--Articoli Simili con Miniature Inizio-->
<style type='text/css'>
#articoli-simili {float:center;text-transform:none;height:175px;background-color: #f6f6f6; box-shadow: 0 0 0 1px white inset; -moz-box-shadow: 0 0 0 1px #fff inset; -webkit-box-shadow: 0 0 0 1px white inset; padding:5px;}
#articoli-simili h2{padding: 10px 15px; font-family: Helvetica, Arial; line-height: 1.1em; font-weight: bold; text-shadow: 0 1px 0 white; font-size: 20px; letter-spacing: -1px;color:#333; background: #E4E4E4; border: 1px solid white;width:auto;box-shadow: 0 0 0 1px white inset; -moz-box-shadow: 0 0 0 1px #fff inset; -webkit-box-shadow: 0 0 0 1px white inset;}
#articoli-simili a{color:#191919;}
#articoli-simili a:hover {background-color: #191919;color: white; font-weight: bold; text-decoration: initial;}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://lh5.googleusercontent.com/-OUDrOT1ESZc/UQAFcgXyxTI/AAAAAAAAfQU/totXnEnIptk/s140/default-image.png&quot;;
var maxresults=7;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Articoli Simili&quot;;
</script>
<script src='https://sites.google.com/site/scriptperilblog/widget-1/articoli-simili-miniature.js' type='text/javascript'/>
<!--Articoli Simili con Miniature Fine-->

Si cerca poi la riga

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

e si scorre il codice fino a trovare i tag

</div></div>
</b:includable>


Tra le due righe colorate di rosso e quella colorata di viola si incolla il nuovo codice

posizione-secondo-codice
che è il seguente

<!-- Articoli Correlati con Miniature Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='articoli-simili'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=art_corr_min&amp;max-results=7&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);</script>
</div>
<div style='clear:both'/>
</b:if>
<!-- Articoli Correlati con Miniature Fine -->

Finalmente si salva il modello. Le personalizzazioni più importanti riguardano:
  1. Il numero delle miniature da visualizzare da settare sia nel primo sia nel secondo codice ( 7 ). Visto che il widget prende tutta la larghezza se ne può scegliere il numero ottimale.
  2. Il colore di sfondo e del testo che vengono scambiati quando si passa sopra con il cursore. Quello proposto è #191919 (vedi i codici dei colori)
  3. L'immagine di default da visualizzare quando nel post non siano presenti immagini
  4. Se si possiede un dominio personalizzato dobbiamo scaricare il javascript il cui URL è colorato di viola e che si trova su Google Sites. Dovrà essere caricato nella cartella Public di Dropbox o su un altro hosting di nostra proprietà.




59 commenti :

  1. Ciao Ernesto, bel widget questo.
    Secondo te tra tutti qual è quello più leggero, in termini di caricamento di pagina?

    RispondiElimina
  2. Molto bello. Ha soltanto un difetto: inserisce tra gli articoli simili anche quello che si sta guardando. Ritieni sia possibile escluderlo?

    RispondiElimina
  3. Molto, molto carino!
    Si può personalizzare il carattere della scritta "Articoli simili" ?
    Grazie.

    RispondiElimina
  4. @ Santiago San
    Bisognerebbe fare dei test con Page Speed o Pingdom
    @ Giancarlo Chieco
    Se è possibile non mi viene in mente come
    @ Start from scatch
    Nel CSS
    #articoli-simili h2
    sostituisci
    font-family: Helvetica, Arial;
    con altre famiglie di caratteri

    RispondiElimina
  5. Ciao, c'è modo di inserirlo anche nei modelli dinamici di blogger?
    grazie

    RispondiElimina
    Risposte
    1. @ DavideMarco
      Nei modelli dinamici sostanzialmente non si può fare nulla. Vanno presi così come sono.

      Elimina
  6. Ciao Ernesto! Ti seguo da poco, ma ho imparato un mondo dal tuo blog!! Grazie infinite!!
    Ho seguito le istruzioni e funziona tutto bene! L'unico problema è che per visualizzare il widget devo prima cliccare su 'commenti' alla fine del post... e la posizione dei commenti è impostato su 'integrato'. Come faccio a rendere commenti e widget 'articoli correlati' visibile sempre alla fine di ogni post?
    Grazie se vorrai rispondermi!! ;D
    Eugenia

    RispondiElimina
    Risposte
    1. @ Eugenia
      Prova a modificare la posizione del secondo codice. Inseriscilo subito dopo la riga
      div class='post-footer-line post-footer-line-3
      o subito prima di questa per vedere se allora funziona tutto regolarmente. Ricordati sempre di salvare il modello prima di ogni modifica

      Elimina
    2. Ho provato a spostarlo come mi hai suggerito, ma in entrambi i casi il risultato è sempre lo stesso... temo che il problema sia qualche impostazione nella visualizzazione proprio dei commenti! Puoi indicarmi la riga in cui vengono impostati i commenti integrati e come potrei provare a modificare?
      Almeno questo è quello che ipotizzo... dal 'basso' della mia conoscenza!!! ;D

      Elimina
  7. Ciao Enesto,
    Come devo fare per aumentare un pò la grandezza dei riquadri e aumentare le parole del titolo degli articoli?

    RispondiElimina
  8. @ Eugenia
    Vai su Bacheca > Impostazioni > Post e Commenti > Posizione commento > Incorporato e clicca su Salva Impostazioni. Prova anche con questo altro sistema
    http://www.ideepercomputeredinternet.com/2013/02/related-posts-with-thumbnails-for-blogger.html

    @ Redazione R. e D.
    Leggi quest'altro post in cui è possibile modificare le dimensioni delle miniature e dello spazio dei titoli (non della loro lunghezza)
    http://www.ideepercomputeredinternet.com/2013/02/related-posts-with-thumbnails-for-blogger.html
    Il widget funziona anche con domini personalizzati

    RispondiElimina
    Risposte
    1. Ma il link che mi hai postato è di questa pagina

      Elimina
    2. Ciao Ernesto! La posizione del commento è già impostata su 'incorporato'...

      Elimina
  9. @ Eugenia
    @ Redazione
    Provate con quest'altro sistema
    http://www.ideepercomputeredinternet.com/2013/02/related-posts-with-thumbnails-for-blogger_7.html

    RispondiElimina
  10. Ciao Ernesto, senti, come posso rimuovere installa il widget giù in basso a sinistra che rimanda al tuo sito?


    Piergiorgio

    RispondiElimina
    Risposte
    1. @# In questo widget non c'è nessun link che rimandi a questo post per installare il widget. Forse ti riferisci a un altro gadget

      Elimina
  11. Ciao Ernesto, grazie del widget, l'ho installato ma si vede solo con Chrome! A te risulta? Su Explorer e Firefox rimane un largo spazio bianco...grazie!!

    RispondiElimina
    Risposte
    1. @# La Demo si vede perfettamente con tutti e tre i browser. D'altra parte lo stesso widget è presente anche su questo sito. Prova a rendere compatibile il tuo blog anche con Internet Explorer
      http://www.ideepercomputeredinternet.com/2012/10/cross-browser-internet-explorer-ie9-blogger.html
      però con Firefox non me lo spiego.

      Elimina
  12. Ciao, ho provato questo e molti altri codici per articoli simili, ma nessuno funziona nel mio blog. Ho anche inserito lo smart layer di addthis e funziona tutto tranne il box degli articoli correlati, cosa posso fare?

    RispondiElimina
    Risposte
    1. Se non ti funzionano proprio gli Articoli Simili ho il sospetto che tu non abbia trovato il codice giusto visto che con questo nuovo Editor ci sono più righe identiche. Leggiti attentamente questo post e guarda il video e poi riprova
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      @#

      Elimina
  13. Ciao Ernesto, come posso risolvere questo problema. Ho inserito il gadget di smart layer di addthis e mi succede come "guadagniamo.net" si vedono tutti i bottoni per la condivisione, ma non si vede il box degli articoli correlati, il "Recommended for you", che si vedono perfettamente solo nelle anteprime dei post. Come posso fare per renderlo visibile anche nelle pagine? Sembra che manchi il pezzo finale della pagina in basso, che trovo invece nell'anteprima e con il box degli articoli correlati. Il blog è questo. http://il-trafiletto.blogspot.it/. Grazie.

    RispondiElimina
    Risposte
    1. Quello che posso dirti è di rivolgerti a AddThis :)
      Non posso essere a conoscenza di widget di terze parti :D
      Già è pesante cercare di mantenere funzionanti quelli che presento io!
      @#

      Elimina
  14. Ma... a voler ridurre la dimensione del carattere del titolo dei singoli post?

    RispondiElimina
    Risposte
    1. Puoi editare questo javascript
      https://sites.google.com/site/scriptperilblog/widget-1/articoli-simili-miniature.js
      con Notepad++ per poi caricarlo sui Google Sites o altrove oppure puoi seguire quest'altro post
      http://www.ideepercomputeredinternet.com/2013/02/related-posts-with-thumbnails-for-blogger_7.html
      in cui è il codice è palese e dove si possono editare i valori dei tag font-size:
      @#

      Elimina
  15. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  16. Non funziona, non si visualizza nessun gadget, ho provato e riprovato ma non va.
    Come mai da quando google ha cambiato i suoi parametri non c'è più un widget che funzioni?

    RispondiElimina
  17. Ciao Ernesto, ho provato a fare come descritto nel tuo post, ma non riesco a vedere nulla appena apro il post nel mio blog!Rimane come prima, ho provato più volte e con altri modelli desritti nel tuo ito ma il risultato è sempre lostesso!come mai?
    grazie

    RispondiElimina
    Risposte
    1. Non lo so... Prova con questo altro widget più recente
      http://www.ideepercomputeredinternet.com/2013/02/related-posts-with-thumbnails-for-blogger_7.html
      e cerca di incollare il codice nel modo adeguato. A questo scopo leggi questo
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      perché è possibile che tu inserisca il codice nella sezione del cellulare invece che del desktop
      @#

      Elimina
  18. Niente!ho provato anche con quello che mi hai suggeritoma non va!
    Può darsi che non trovo la riga
    div class='post-footer-line post-footer-line-3'
    e per questo non va?

    RispondiElimina
    Risposte
    1. Il widget che ti ho consigliato è lo stesso che c'è in questo blog quindi dovrebbe funzionare. Forse noin hai trovato la riga nella sezione giusta. Leggi il secondo post che ti ho linkato nel commento 17.a
      @#

      Elimina
    2. Ho ricercato di nuovo la riga che finisce con ....line-3>, ma nel modello trovo solo la ....line-2>!

      Elimina
    3. Puoi mettere il codice anche dopo quella riga sempre però scorrendo il codice fino a trovare gli altri tag come specificato nel post
      @#

      Elimina
  19. Perfetto, ci sono riuscita, grazie. Non funzionava nessun codice con il mio blog, neanche linkedin, non so per quale ragione, forse ho fatto troppe modifiche, ma con questa versione è andata bene!

    RispondiElimina
  20. Ciao Ernesto, grazie per le preziose istruzioni!
    Sarebbe possibile distanziare le miniature dei singoli post correlati in modo da creare uno spazio tra una e l'altra?
    Ora sono tutte attaccate e non riesco proprio a distanziarle.
    Grazie mille per l'aiuto!

    RispondiElimina
  21. ho un dominio personalizzato ma c'è il rischio che si superi la banda su Dropbox e che il widget non funziona più?

    RispondiElimina
  22. La riga div class='post-footer-line post-footer-line-3' non esiste nel Modello HTML. Come faccio?

    RispondiElimina
  23. Ciao Ernesto,
    è da diversi giorni che cerco di inserire un widget per gli articoli correlati nel mio blog, ho provato diverse tue guide che ho seguito alla lettera, il risultato è sempre lo stesso, solamente un widget vuoto senza contenuto.
    Non so proprio come risolvere il problema.

    RispondiElimina
    Risposte
    1. Hai un blog gratuito del tipo blogspot.com? Oppure hai un dominio personalizzato? In questo secondo caso leggi il punto 4).Se invece hai un blog gratuito hai provato il funzionamento in un blog di prova? C'erano abbastanza post? Hai visualizzato il widget in un post con etichette presenti in altri articoli? Se ritieni che sia tutto ok e però non ti funziona potrebbe essere un problema di modello oppure hai inserito il codice nella sezione mobile invece che in quella desktop. Quando go scritto questo post non c'era ancora quella suddivisione
      @#

      Elimina
    2. Se hai un blog con dominio acquistato prova questa seconda versione
      http://www.ideepercomputeredinternet.com/2013/02/related-posts-with-thumbnails-for-blogger_7.html
      La riga però la devi cercare nella versione desktop secondo queste istruzioni
      http://www.ideepercomputeredinternet.com/2013/10/blogger-versione-mobile-desktop-personalizzare-editor-html.html
      @#

      Elimina
    3. Grazie mille, ho un blog gratuito in effetti, dovrebbe essere tutto ok, secondo te il problema potrebbe essere dato dal fatto che ho solo 6 post al momento?

      Elimina
    4. Tra l'altro ho problemi anche se creo una pagina statica con mappa del sito, è come se il problema fosse legato in qualche modo all'utilizzo delle etichette, sempre stesso risultato, una pagina vuota.

      Elimina
    5. Prima pubblica un numero adeguato di post poi pensa ai widget
      @#

      Elimina
    6. Grazie mille seguirò il tuo consiglio :-)

      Elimina
  24. Le immagini di default mi sa che sono 72x72 come si possono aumentare le dimensioni? Il mio template è troppo largo
    Grazie e complimenti per el sito

    RispondiElimina
    Risposte
    1. Di questo stesso widget ne ho pubblicato anche una versione senza javascript esterni che puoi trovare qui
      http://www.ideepercomputeredinternet.com/2013/02/related-posts-with-thumbnails-for-blogger_7.html
      Nel codice presente nel post si possono settare le dimensioni delle miniature come illustrato e che sono proposte di 80 pixel in questa riga
      width:80px;height:80px
      @#

      Elimina
  25. grazie Ernesto, i tuoi suggerimenti son sempre molto utili!

    RispondiElimina
  26. Buonasera,
    Oggi nel mio blog sono spariti sia gli articoli simili (istallati tempo fa), sia i bottoni di condivisione dai post, senza che io li abbia rimossi.
    Ho provato a trovare una soluzione ma non ci sono riuscita, da cosa puo dipendere?
    Grazie, Un saluto.

    RispondiElimina
    Risposte
    1. Se non hai apportato alcuna modifica non ti saprei dire da cosa possa dipendere. Un tuo post è questo?
      http://theroaronthecatwalk94.blogspot.it/2014/08/rome-center-of-world-un-gioco-di.html
      È molto lento a caricarsi visto il gran numero di immagini. L'unica cosa di strano che vedo sono delle icone a fondo pagina al posto di Post più vecchio e Post più recente. Altro non so dirti mi spiace
      @#

      Elimina
  27. Ciao Ernesto, i miei titoli più lunghi non vengono visualizzati completamente, c'è un modo per risolvere il problema?

    P.S. Non ho un dominio personalizzato.

    RispondiElimina
    Risposte
    1. Sì. Vai in questo post
      http://www.ideepercomputeredinternet.com/2015/07/related-posts-widget-blogger-mobile-desktop.html
      Si tratta dello stesso widget ma con più personalizzazioni. Quella che ti interessa si trova nel n°14 L'altezza dello spazio del titolo del post in height:136px;
      @#

      Elimina
  28. Ottimo, vorrei però chiedere una cosa.....ho notato che i 7 "simili", sono gli ultimi 7 articoli con la stessa etichetta dell'articolo in esame.
    E' possibile randomatizzare il tutto? Far pescare "articoli a caso" all'interno di quella specifica etichetta?

    Grazie

    RispondiElimina
  29. Lo si può fare inserendo più di una etichetta per post. In questo mondo gli articoli vengono estratti da due o più insiemi di etichette. Inserire una randomizzazione nello script credo sia al di sopra delle mie possibilità.
    @#

    RispondiElimina
    Risposte
    1. In questo modo li pescherebbe a caso? Cioè se ho due etichette, prende gli ultimi 3 di una e gli ultimi 4 dell'altra? o può pescare anche il primo articolo fatto con un'etichetta?

      Elimina
    2. Fino a pochi giorni fa lo avevo anche io questo widget e mostrava articoli simili recentissimi e articoli simili vecchi di anni. Dipende anche dal numero di post che hai scritto. Se sono solo una ventina c'è poco da pretendere
      @#

      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.