Pubblicato il 11/04/11 - aggiornato il  | 9 commenti :

Widget degli Articoli Simili per Blogger.

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://lh4.googleusercontent.com/_nT13UtBmmiU/TaGnc29XyAI/AAAAAAAASys/Hub0D5RhfGc/blue-arrow.png) 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

  1. width : 750px; è la larghezza del widget
  2. L'URL evidenziato di rosso è quello della icona arrow visualizzata sulla sinistra di ogni titolo e che può essere cambiata
  3. 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 == &quot;item&quot;'>
<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 != &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=articoli_simili&amp;max-results=5&quot;' 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

widget articoli simili

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 Triste. Un'ora e più di lavoro per nulla!!! I blogger sono sempre in bilico tra grandi soddisfazioni e cocenti delusioni.  Ormai il post lo avevo già scritto…



9 commenti :

  1. 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! :)

    RispondiElimina
  2. ciao

    mi funziona solo firefox
    su google e explorer mi appare solo la scritta "Articoli simili"
    puoi darmi un consiglio?
    grazie

    Auguri di buona pasqua

    RispondiElimina
  3. metto un link così se vuoi dare un occhiata
    http://www.tuotrading.com/2011/04/video-di-berlusconi-censurato-dai.html

    RispondiElimina
  4. @michele
    Anche 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.

    RispondiElimina
  5. @Ernesto T.

    pensavo di averlo inserito male
    ok grazie
    complimenti hai creato un blog veramento molto interessante e utile

    RispondiElimina
  6. ciao, volevo chiederti tu che widget hai usato per mettere gli articoli simili ?
    grazie

    RispondiElimina
  7. @Sairos
    Questo 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.

    RispondiElimina

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