Dopo aver presentato il gadget degli Articoli Correlati ho provato a installarlo in questo blog e, con sorpresa, ho visto che non funzionava. Come test avevo usato un template del Designer Modelli e lo avevo provato solo uno dei vecchi template. Mi sono quindi messo all'opera per risolvere la questione e per rendere il widget esteticamente ancora più apprezzabile. Coloro che avessero quindi delle difficoltà di installazione possono seguire questi passaggi invece del tutorial di cui al post citato. La differenza sostanziale sta nell'inserire i CSS direttamente nella sezione <b:skin> invece di inglobarli in <head> dentro il tag <style>. Con questo metodo è stato infatti possibile visualizzare correttamente il widget.
Si va su Design > Modifica HTML e si salva il modello completo. Si mette la flag su espandi modelli widget e si cerca la riga ]]></b:skin>. Immediatamente sopra si incolla questo codice
/* Articoli Correlati Inizio */
#articoli_correlati { float : left; width : 750px; margin-top:20px; margin-left : 5px; margin-bottom:15px; font : 11px Trebuchet MS; margin-bottom:10px; } #articoli_correlati .widget { list-style-type : none; margin : 4px 0 4px 0; padding : 0; } #articoli_correlati .widget h2, #articoli_correlati h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #articoli_correlati a { text-decoration : none; } #articoli_correlati a:hover { text-decoration : none; } #articoli_correlati ul { border : medium none; margin : 10px; padding : 0; } #articoli_correlati ul li { display : block; background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijXNgaL68ZQOJxp0sWcxEz06yygqcvKhKHIhAO2rsg_AYwg6BrlkI04dWjUPm56NplVyOAD4nynGdT9ZtdwZbTxtUDgu0KPl6h92Pj41vMySjTBwsdD7FOG2rjpiyx25IsHk8yKad3xM8/) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #003366; }
/* Articoli Correlati Fine */
Per le personalizzazioni vi rimando all'articolo precedente ricordando che
- width : 750px; è la larghezza del widget
- L'URL evidenziato di rosso è quello della icona
visualizzata sulla sinistra di ogni titolo e che può essere cambiata
- border-bottom:1px dotted #003366; è lo stile del bordo di ciascun titolo di articolo simile
Successivamente si cerca la riga </head> e si incolla subito sopra quest'altro codice
<!-- Articoli Correlati Inizio -->
<script src='https://sites.google.com/site/scriptperilblog/javascript-2/articoli-correlati2.js' type='text/javascript'/>
<!--Articoli Correlati Fine - www.ideepercomputeredinternet.com -->
Si salva il modello. Adesso dobbiamo inserire la parte visibile del widget che può essere immessa o subito sotto la riga <data:post.body/> o immediatamente prima della linea <div class='post-footer'>. Il codice da incollare è il seguente
<!-- Articoli Correlati Inizio -->
<b:if cond='data:blog.pageType == "item"'>
<div id='articoli_correlati'>
<font color='#067ACA' face='Arial' size='4'><b>Articoli Simili: </b></font><span style='display:none;'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=articoli_simili&max-results=5"' type='text/javascript'/></b:if></b:loop> </span>
<script type='text/javascript'> articoli_duplicati(); stampa_etichette();
</script>
</div></b:if>
<!-- Articoli Correlati Fine - www.ideepercomputeredinternet.com -->
Le personalizzazioni riguardano il colore della scritta del titolo del widget (#067ACA), il titolo del gadget (Articoli Simili:), la dimensione del titolo (size='4') e il numero massimo di articoli da mostrare per ogni etichetta del post (5). Verranno cioè visualizzati gli ultimi post che hanno almeno una etichetta identica a quelle inserite nell'articolo. L'aspetto del gadget sarà simile a questo
e si visualizzerà immediatamente sotto ciascun articolo. Non sarà visibile in homepage, nelle pagine statiche e in quelle delle etichette. Si può anche inserire dopo il codice dell'iFrame del Mi Piace di Facebook e del bottone ufficiale di Twitter visto che si trovano nella stessa posizione. Proprio in chiusura mi sono accorto che con questo metodo il widget si visualizza correttamente solo su Chrome mentre non si vede con Firefox e IE 
Ottimo, grazie mille! Stavo impazzendo perché con un blog funzionava e con un altro no. Grazie ancora per le tue guide davvero utilissime e sempre aggiornate! :)
RispondiEliminaPS: a me con Firefox funziona.
RispondiEliminaHo firefox e funziona,grazie
RispondiEliminaciao
RispondiEliminami funziona solo firefox
su google e explorer mi appare solo la scritta "Articoli simili"
puoi darmi un consiglio?
grazie
Auguri di buona pasqua
metto un link così se vuoi dare un occhiata
RispondiEliminahttp://www.tuotrading.com/2011/04/video-di-berlusconi-censurato-dai.html
@michele
RispondiEliminaAnche a me sarebbe piaciuto moltissimo inserirlo ma mi dà dei problemi con IE. Purtroppo siamo sempre alle prese con i browser che mostrano cose diverse gli uni dagli altri. In questi casi si può scegliere se metterlo lo stesso e lasciare che il widget sia visto da chi ha il browser giusto oppure evitare di installarlo.
@Ernesto T.
RispondiEliminapensavo di averlo inserito male
ok grazie
complimenti hai creato un blog veramento molto interessante e utile
ciao, volevo chiederti tu che widget hai usato per mettere gli articoli simili ?
RispondiEliminagrazie
@Sairos
RispondiEliminaQuesto blog è su un vecchio modello e gli articoli simili sono installati con il widget più antico
http://www.ideepercomputeredinternet.com/2008/07/inserire-gli-articoli-correlati-in.html
Adesso è difficile trovare un template compatibile.