Pubblicato il 11/04/11e aggiornato il

Widget degli Articoli Simili o Correlati per Blogger funzionante con tutti i browser.

Widget degli articoli simili per Blogger completamente personalizzabile e visualizzabile in un elenco con icone.
Il problema maggiore non è tanto quello di creare dei widget quanto quello di fare in modo che il gadget risulti visibile nello stesso modo con tutti i browser. Soprattutto con Internet Explorer ci sono spesso delle difficoltà insormontabili che speriamo diminuiscano con la nuova versione IE9, ma ci credo poco. Sono un paio di giorni che mi sono incaponito con il widget degli Articoli Simili o Related Posts, se vogliamo usare una espressione anglosassone.
Dopo un primo tentativo, con il widget risultato non visibile con IE e dopo una seconda versione, che aveva problemi anche con Firefox, ecco che finalmente ho trovato la quadra, come direbbe un conosciutissimo politico lombardo. La visualizzazione del gadget non è perfettamente identica con tutti e tre i principali browser. Con Internet Explorer vengono mostrati più articoli correlati che con Chrome e Firefox; comunque funziona anche con IE, ad abundantiam. Non chiedetemi per quale ragione con IE si vedono più post perché non la so. Ecco come sarà l'aspetto del widget dopo l'installazione.

articoli simili widget[4]
Potrà essere posizionato subito sotto il testo dell'articolo per invogliare il navigatore a leggere altri post con argomento simile. Si procede come al solito andando su Design > Modifica HTML e salvando il modello completo per un eventuale backup di ripristino. Si mette la flag a espandi modelli widget e si cerca la riga </head>. Subito sopra si incolla il codice

<!--Articoli simili CSS -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:4px;
padding-left:2px;
}
#related-posts .widget{
padding-left:4px;
margin-bottom:8px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Trebuchet MS, Georgia, Times New Roman, Times;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
color:#003366;
}
#related-posts a{
color:#003366;
}
#related-posts a:hover{
color:#0A82B0;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:11px;
text-color:#0A82B0;
}
#related-posts ul li{
background:transparent url(https://lh4.googleusercontent.com/_nT13UtBmmiU/TaFuHBEyZUI/AAAAAAAASyk/nUPZVEIflA0/freccia-16.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 10px;
padding-left: 20px;
padding-top:0px;
border-bottom:1px dotted #0A82B0;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Articoli Simili:&quot;;
</script>
<script src='https://sites.google.com/site/scriptperilblog/javascript-2/widget-articoli-simili.js' type='text/javascript'/>
</b:if>
<!--Articoli Simili CSS Fine-->

Adesso si cerca la riga <div class='post-footer'> oppure l'altra <data:post.body/>. Il codice può essere incollato sopra alla prima riga o sotto la seconda. In questa zona ci possono essere anche i bottoni del Mi Piace di Facebook, il pulsante di Twitter o dei banner pubblicitari. Dobbiamo quindi regolarci caso per caso per scegliere dove visualizzare l'elenco dei post con almeno una etichetta uguale a quello che si è aperto. Ecco il codice da incollare

<!-- Articoli Simili Codice Inizio-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>
</b:if>
<!--Articoli Simili Codice Fine-->

Le personalizzazioni che si possono fare riguardano il colore del link (color:#003366;), il colore del link puntato dal mouse (color:#0A82B0;), le dimensioni dei caratteri (font-size:11px;), l'URL della icona a forma di freccia (16x16 pixel), i vari margini, lo stile del bordo sotto ogni link (linea punteggiata border-bottom:1px dotted #0A82B0;) e il titolo del widget (Articoli Simili:). Nel secondo codice possiamo scegliere il numero massimo di post per ciascuna etichetta (5). Si salva il modello. Il gadget sarà ovviamente visibile solo nei singoli post e non in homepage e nelle pagine statiche.
Se volete vedere questo widget in azione, aprite un qualsiasi post del mio blog scientifico La Nuova Atlantide che non aggiorno più da quasi quattro anni.

Aggiornamento: Alla fine dell'elenco degli articoli simili si visualizzerà un link "Get Widget" che porta a  questo post e che serve per inviare i lettori che lo desiderino installare direttamente nella pagina di istruzioni. Mi rendo conto che a qualcuno possa non piacere. Coloro che vogliano nascondere tale collegamento, devono andare su Modello > Modifica HTML > Procedi e cercare la riga
 ]]></b:skin>
Subito sopra va incollato questo semplice codice
#ascredit {display:none;}
quindi si salva il modello.
Fonte principale | Blogger Plugins -




52 commenti :

  1. Ho messo questo widget ed e grandioso...ma ho un problema ho le frecce troppo attaccate alle scritte, come lo si puo vedere in questoa articolo http://tuttoconilpc.blogspot.com/2011/04/per-gli-appassionati-di-gta-ecco-voi.html

    Come posso risolvere il problema?

    RispondiElimina
  2. @Rubel
    Metti
    padding-left: 30px;
    al posto di
    padding-left: 10px;
    nella parte finale del primo codice. Poi, facendo delle prove, trovi la distanza giusta.

    RispondiElimina
  3. Come Sempre un Post Utilissimo!! :D
    Grazie per il tuo lavoro... Questa proprio mi mancava. Avevo perso le speranze qualche tempo fa dopo la brutta esperienza con "linkwithin", Ad oggi, preferisco avere tutto tutto sottocontrollo nel mio blog. Evito d'affidarmi a "terze parti". Questa è un ottima Soluzione ad esempio :) Anche lo scripts è leggerissimo!!
    Come sempre ho cercato di plasmarlo quanto più al mio blog "ammorbidendolo graficamente" :P
    Niente di che, ho apportato solo qualche modifichetta. Qui puoi vedere il winget in azione http://ilmontespushermusic.blogspot.com/2011/03/gianfranco-violi-aka-dj-erick-violi.html Ps: Sinceramente lo testato con explorer 7/Firefox/Chrome non c'è nessuna differenza per quanto riguarda il numero degli articoli elencati. Ho scelto come "maxresult" 6... e 6 se ne visualizzano in tutti e 3 i browser. Ad ogni modo Grazie ancora.. Alla prossima!!

    RispondiElimina
  4. @IL Montes
    Meglio così. Può darsi che quella differenza tra IE e gli altri browser esista solo per il modello in cui l'ho testato.

    RispondiElimina
  5. Ciao parsifal, avevo già postato un commento sul fatto che non funzionava più il widget degli articoli correlati con miniature dopo il passaggio al dominio personalizzato ".net". Ho letto con molto interesse gli articoli che mi avevi proposto. Adesso sto tentando di installare come alternativa al widget precedente questo degli "Articoli simili". Ma non riesco a visualizzare proprio per niente il widget, con nessuno dei browser, pur avendo controllato più volte di aver caricato correttamente il codice del widget. Esiste un problema per i domini con .net per i widget?. è solo questione di tempo, visto che il passaggio al nuovo dominio è di pochi giorni? o cosa altro. Grazie tante Parsifal, e come sempre complimenti per il tuo lavoro.

    RispondiElimina
  6. @TexBlogger
    Prima di sostituire i widget aspetta qualche giorno, magari anche 15. Non è che ci sono delle incompatibilità. Solo che sui domini personalizzati gli script caricati su servizi Google come Google Sites spesso smettono di funzionare. Si tratta probabilmente della scelta di Google di non fare da hosting gratuito a siti appartenenti ad altri (il dominio personalizzato non è più di Google ma tuo).
    Con molti widget si può risolvere caricando gli script su DropBox. Nel caso di questo post dovresti farlo con questo file
    https://sites.google.com/site/scriptperilblog/javascript-2/widget-articoli-simili.js
    Le istruzioni per caricare file su DropBox e acquisirne il link diretti le trovi qui
    http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html

    RispondiElimina
  7. Grazie Parsifal per i tuoi sempre puntuali e preziosi consigli... ciao

    RispondiElimina
  8. Ciao, non riesco a trovare nessuna delle due stringhe indicate nel codice Html, per inserire la seconda parte del codice. E' normale?

    RispondiElimina
  9. ovvero div class='post-footer' e data:post.body/

    RispondiElimina
  10. @Luca Scialò
    Forse non hai messo la spunta su espandi modelli widget. E' l'unica spiegazione perché si tratta di due righe del codice essenziali.

    RispondiElimina
  11. Sì infatti, ho risolto, era per quello, non lo trovavo. Ne avevo trovato un altro che in più portava le immagini del post ma aveva l'inconveniente che gli articoli segnalati non avessero nulla di attinente col post (apparivano in modo casuale). Se questo avesse pure le immagini, staremmo a cavallo :D Grazie

    RispondiElimina
  12. ho installato il widget ma non appare la scritta : articoli simili , appaiono solo i link delle ricette, come mai? grazie !!!!

    RispondiElimina
    Risposte
    1. @Catrina
      E' lo stesso widget che ho anch'io nel blog. Forse non hai copiato bene questa riga
      var relatedpoststitle="Articoli Simili:";

      Elimina
    2. ho controllato la riga è identica a quello che hai scritto sopra e cioè:var relatedpoststitle="Articoli Simili:"; ma niente non si vede

      Elimina
    3. @Catrina
      Delle volte ci sono cose che non mi spiego, questa è una di quelle :) perché al limite dovrebbe vedersi male ma se lo scritto c'è non dovrebbe sparire :P

      Elimina
  13. allora aspetto tuoi suggerimenti, hai qualcosa di simile? grazie intanto lascio questo anche senza titolo

    RispondiElimina
    Risposte
    1. @Catrina
      Questo widget mi risulta essere molto utilizzato dai lettori
      http://www.ideepercomputeredinternet.com/2010/01/il-widget-degli-articoli-correlati-con.html
      Si vede anche dal Page Rank della pagina (PR3)

      Elimina
    2. grazie moltissimo ! ho subito installato il widget è perfetto ,e devo dire si adatta di più al blog , grazie grazie grazie! buon fine settimana!

      Elimina
  14. Scusa ho provato a mettere questo widget e non mi si visualizza, l'unica cosa che vedo sotto il post è "get widget"; ho provato anche ad usare quello con le miniature ma niente da fare, posso risolvere?
    BLOG: http://ps3gameita.blogspot.com/

    RispondiElimina
    Risposte
    1. @Manager
      Prova a scaricare questo file
      https://sites.google.com/site/scriptperilblog/javascript-2/widget-articoli-simili.js e a caricarlo sulla cartella Public di Dropbox quindi sostiruisci l'URL nel codice.

      Elimina
  15. ma lo devo scaricare Dropbox?

    RispondiElimina
    Risposte
    1. @Manager
      Certo che sì. Segui questo post
      http://www.ideepercomputeredinternet.com/2009/10/dropbox-per-caricare-gratis-nel-web.html

      Elimina
    2. Ciao poi ho provato però non mi si visualizza comunque, pk? non credo sia il mio template...

      Elimina
    3. @Manager
      Questo widget lo uso anche io e come puoi vedere il codice funziona quindi probabilmente hai fatto qualche errore. Prova a reinstallarlo.

      Elimina
  16. Grazie, bellissimo widget!
    Preso, modificato a piacere e inserito al posto di Linkwithin.
    Anche a me non funzionava, ma caricando il file .js sul mio Dropbox si è risolto tutto. Tra l'altro ho notato che, a differenza di Linkwithin (che in effetti spesso perdeva colpi) aggiorna automaticamente i titoli degli articoli quando vengono modificati.
    Proprio ben fatto, grazie ancora! :)

    RispondiElimina
    Risposte
    1. @GiulianaMosetti
      E' il widget che anche io uso in questo blog.

      Elimina
  17. Con chrome appare la scritta get widget, che non riesco a togliere; mentre con IE 9 non si vede proprio tutto il gadget.
    Come si potrebbe risolvere almeno uno di questi due problemi?

    RispondiElimina
    Risposte
    1. @Andrea
      In alcuni modelli ci sono delle incompatibilità con IE.

      Elimina
  18. Io ho quello Simple semplice.
    Comunque il link finale che appare get widget che porta a questo blog posso toglierlo oppure l'hai messo di proposito?

    RispondiElimina
  19. @andrea
    Quei link come vedi sono presenti anche nei widget di questo blog come gli ultimi articoli e i top commentatori. Li metto per favorirne l'installazione. Lo puoi anche togliere

    RispondiElimina
  20. [[Con chrome appare la scritta get widget, che non riesco a togliere]]
    Non so' toglierla, ci ho provato a "tentativi" ma non riesco proprio (sono un asino in materia).
    Quando puoi potresti indicarmi più o meno quale parte dovrei levare?

    RispondiElimina
    Risposte
    1. @Andrea
      Ho inserito in calce al post un aggiornamento che spiega come fare per eliminare l'attribuzione.

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

    RispondiElimina
  22. Adesso va bene, però volevo segnalare che negli articoli simili spesso mette lo stesso articolo su cui abbiamo messo il widget esempio a te appare questo, quando in realtà non c'era bisogno che apparisse perché già ci troviamo su questo post...

    - Come inserire il widget degli articoli simili con miniature completamente personalizzabile.

    RispondiElimina
  23. Ciao nella seconda parte della guida non riesco a trovare div class='post-footer' o data:post.body provato con il search di firefox ctrl+f

    RispondiElimina
    Risposte
    1. @comixnhentai
      Se non li trovi significa che non hai messo la spunta a Espandi i Modelli Widget.

      Elimina
  24. Ho notato anch'io il problema segnalato da Andrea. E' possibile che dipenda dal reindirizzamento? A me sembra che gli articoli siano prelevati dai feeds come .com ma messi a confronto con un post.url che è .it, eludendo un'istruzione condizionale nel codice js.
    Quindi lo stesso articolo viene visto con due url diversi e riproposto come "simile".
    In ogni caso servirebbe anche a me una soluzione.

    Grazie per la disponibilità.

    RispondiElimina
    Risposte
    1. @puntodisvista
      Non credo sia il dominio localizzato .it perché delle volte è una cosa che succede anche in questo blog che ha il dominio personalizzato. Francamente non lo vedo come un grande problema visto che ci sono comunque altri titoli visualizzati. In teoria si potrebbe mettere una condizione per non mostrare i feed dell'ultimo post ma solo in teoria perché il problema continuerebbe a porsi per gli altri articoli del blog. Comunque quando si sono pubblicati molti articoli l'eventualità diventa sempre più rara.

      Elimina
    2. Avrei preferito diversamente ma hai ragione, non è un grosso problema.

      Grazie.

      Elimina
  25. @Ernesto Tirinnanzi Grazie mille, era quello il problema xD

    RispondiElimina
  26. Ciao, torno a scriverti. Siccome mi sono trovato benissimo con questo widget, lo sto usando anche per un mio secondo blog aperto di recente. Solo che vorrei cambiare il colore del link, che si confonde con lo sfondo. Leggo che i codici sono color:#003366 color:#0A82B0;, solo che non so come poter scegliere altri colori, ovvero quali siano i codici corrispondenti. Ora è azzurrina, la vorrei ad esempio rossa o altro.
    Non c'è una lista? Grazie mille

    RispondiElimina
    Risposte
    1. @LucaSialò
      Leggiti questi due post
      http://www.ideepercomputeredinternet.com/2008/12/come-conoscere-il-codice-numerico-dei.html
      http://www.ideepercomputeredinternet.com/2010/02/tabella-interattiva-in-italiano-dei.html
      Il primo è di informazione generale (un po' vecchio) e il secondo è proprio quello che cerchi.

      Elimina
  27. improvvisamente su 3 blog diversi, nello stesso giorno ha smesso di funzionare questo widget, ho provato sia con chrome che con firefox ma niente. Ho reincollato i codici ma non funzionano, eppure da te vedo che funziona benissimo...

    RispondiElimina
    Risposte
    1. @AndreaSapuppo
      Se sei passato a un dominio personalizzato i widget con i javascript caricati su Google Sites non funzioneranno più. Scarica questo file
      https://sites.google.com/site/scriptperilblog/javascript-2/widget-articoli-simili.js
      quindi ricaricalo su DropBox o su Google Code.

      Elimina
    2. Dopo 1-2 giorni scompare dal blog, però su dropbox il file è ancora lì. Sono così costretto a cancellarlo e caricarlo nuovamente. Io carico il file che mi hai linkato in quest'ultimo commento. Secondo te che può essere?

      Elimina
    3. @ I sintomi sono quelli di un superamento della larghezza di banda. Però ti dovrebbero aver inviato una email all'indirizzo di posta che hai scelto in fase di registrazione. Prova a togliere dalla cartella Public quello che non sia fondamentale e che può essere spostato altrove

      Elimina
  28. grandissimo Ernesto...come sempre... Con dominio personalizzato ho caricato il javascript su Dropbox e ora funziona correttamente :)

    RispondiElimina
  29. Ciao. Ti riscrivo poiché volevo inserire il widget su un altro blog che però usa come Modello "Viaggi". Ho notato che non appare sotto i post inserendo il primo codice, così come non riesco a trovare div class='post-footer' e data:post.body/ per inserire la seconda parte (questa volta ho tolto le spunte).
    Forse per quel tipo di Modello non è visualizzabile?
    Grazie

    RispondiElimina
    Risposte
    1. Non ti so dire come viene il widget ti posso però indicare come procedere per testare. Leggi questo post per trovare le righe di codice e per scegliere le sezioni giuste
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      http://www.ideepercomputeredinternet.com/2013/10/blogger-versione-mobile-desktop-personalizzare-editor-html.html
      @#

      Elimina
    2. Grazie. Stringhe trovate ma ahimé il widget non appare, anche inserendo entrambi i codici. Forse non è utilizzabile per quel tipo di Categoria di template.

      Elimina
    3. Può essere cche dipenda anche dal fatto che il codice è piuttosto vecchiotto. Ci sono altre soluzioni più recenti come quella che uso in questo sito
      http://www.ideepercomputeredinternet.com/2013/02/related-posts-with-thumbnails-for-blogger_7.html
      @#

      Elimina
    4. Risolto, grazie! E complimenti per l'implementazione del nuovo codice anche con le miniature ;)
      Peccato solo per il quadrante che le ospita, che rimane bianco con Chrome e Firexox (su un blog va bene perchè è di stesso bianco, ma l'altro è grigio). Però sono dettagli, è già tanto.

      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.