Pubblicato il 07/11/09 - aggiornato il  | 19 commenti :

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

Il widget LinkWithin è presente in moltissimi blog sulla piattaforma Wordpress e su Blogger. Dai commenti agli articoli che ho dedicato a questo gadget ho potuto constatare che non funziona correttamente in tutti i modelli. Le difficoltà riscontrate sono state


 1)Impossibilità di cambiare la posizione del widget con il mouse

 2)Impossibilità di resettarlo per modificare il numero delle miniature da visualizzare
 3)In alcuni post non appaiono le miniature ma solo dei link a degli articoli
 4)Le miniature mostrate sono un mix tra articoli correlati da medesime etichette e post casuali
 5)Le possibilità di personalizzazione sono minime
    Una validissima alternativa a questo gadget è stata creata da Aneesh di  Blogger Widget alla metà di Agosto e, nel momento in cui scrivo, ha già ricevuto 268 commenti. Questo metodo, contrariamente a LinkWithin, si basa esclusivamente sulle etichette e le miniature visualizzate saranno quelle delle immagini dei post che hanno la medesima categoria.
    Per inserirlo andiamo su Layout > Modifica HTML e, come al solito, Salviamo il modello completo. Cerchiamo la riga
    </head>
    e, immediatamente sopra, inseriamo il seguente codice


    <!-- Articoli Simili -->
    <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:5px;
    padding-left:5px;
    }
    #related-posts h2{
    font-size: 1.6em;
    font-weight: bold;
    color: #191919; /* Colore del Titolo */
    font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
    margin-bottom: 0.75em;
    margin-top: 0em;
    padding-top: 0em;
    }
    #related-posts a{
    color:black;
    }
    #related-posts a:hover{
    color:black;
    }
    #related-posts a:hover {
    background-color:#FDBCB7;
    }
    </style>
    <script src='https://sites.google.com/site/scriptperilblog/widget-1/articoli-simili-miniature.js' type='text/javascript'/>
    </b:if>
    <!-- Articoli simili -->
    Le personalizzazioni da fare riguardano il colore del titolo delle miniature (#191919) e quello di sfondo delle stesse quando vengono puntate con il mouse (#FDBCB7). Possiamo anche scaricare il file Javascript il cui URL è evidenziato di rosso e caricarlo su un nostro hosting per averne sempre il controllo in caso di blackout del sito su cui è caricato o superamento della larghezza di banda da parte degli utenti.
    Adesso cercate una delle seguenti righe (la prima dovrebbe essere presente in quasi tutti i modelli, altrimenti cercate la seconda)

    <div class='post-footer-line post-footer-line-1'>
    oppure
    <div class='post-footer-line post-footer-line-2'>
    e, immediatamente dopo alla linea che avete trovato, tra le due indicate, inserite quest'altro codice
    <!-- Articoli Simili -->
    <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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
    <script type='text/javascript'>
    var currentposturl=&quot;<data:post.url/>&quot;;
    var maxresults=4; /* Numero di Articoli Simili */
    var relatedpoststitle="Ti potrebbero anche interessare:";
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs();
    </script>
    </div><div style='clear:both'/>
    </b:if>
    <!-- Articoli Simili -->
    Le personalizzazioni in questo caso riguardano
    1. Il numero di miniature da mostrare: si può sostituire a 4 un numero più piccolo o più grande in var maxreults
    2. Il titolo del widget che ho inserito identico a quello di LinkWithin "Ti potrebbero anche interessare" e può essere ovviamente modificato.
    Salvate il modello e guardate il widget in azione. Le miniature che vengono visualizzate provengono esclusivamente dalle immagini postate negli articoli. Nel caso in cui un articolo non abbia nessuna immagine al suo interno sarà mostrata la miniatura "No Image" come mostrato nel seguente screenshot

    screenshot-widget
    Per cambiare l'immagine, che si trova a questo indirizzo, con una personalizzata, si può scaricare il file 
    https://sites.google.com/site/scriptperilblog/widget-1/articoli-simili-miniature.js
    sostituire l'URL dell'immagine con quello di un'altra che abbiamo precedentemente caricato nel web. Successivamente si ricarica il Javascript su un hosting che lo supporta, tipoDropBox o Google Sites, e si inserisce il suo indirizzo nella prima parte del codice al posto del file Javascript che abbiamo modificato.
    Concludo sottolineando che questo widget sarà visibile solo alla fine dei singoli articoli mentre non si vedrà in Homepage e nelle pagine di archivio. Coloro che hanno difficoltà con il widget LinkWithin e hanno un blog con immagini in quasi tutti i post, possono passare a questo widget che non presenta nessuna difficoltà di installazione e di personalizzazione.
    Aggiornamento: Coloro che avessero difficoltà con questo codice, che è vecchio e non risiede nei miei spazi, possono provare quello nuovo presentato nell'articolo "Il widget degli articoli correlati con miniature". Questo potrebbe avere problemi di superamento di bandwidth che non si dovrebbero ripresentare con il codice più recente.




    19 commenti :

    1. Ciao, ho messo le miniature negli articoli correlati..... grazie infinite. :-)))

      sei bravissimo

      RispondiElimina
    2. ciao...è da un pò che ti seguo ma non ho mai postato commenti perchè i tuoi post sono stati sempre ottimi...ma adesso ho un problemino.
      Anche se seguo i tuoi consigli passo passo gli articoli correlati proprio non appaiono nel mio blog!! :(

      P.S. ho provato diverse volte...ma niente.

      Spero in un piccolo aiuto...

      RispondiElimina
    3. ...ho provato anche linkWithin ma mi appare tutto in inglese al posto del test "Ti potrebbero anche interessare: "...sai come risolvere uno dei due metodi? Ritengo che avere gli alìrticoli correlati sia molto importante nei blog...per questo insisto...

      RispondiElimina
    4. @Nik
      Per quello che riguarda l'inserimento di questo widget l'ho testato su modelli classici di Blogger. Può darsi che in uno personalizzato non funzioni, questo l'ho ripetuto diverse volte.
      Invece LinkWithin ti dovrebbe apparire in italiano. Se questo non accade è forse perché hai un blog su Blogger ma con dominio acquistato negli USA attraverso Google ma può essere che la scritta appaia in italiano dopo un po' di tempo

      RispondiElimina
    5. ciao.
      ho provato a mettere questo codice nel mio blog e funziona. ho caricato il file javascript su MyDataNest, dato che ho modificato il link all'immagine dentro il file. il problema è questo: il widget viene visualizzato soltanto quando sono loggato in MyDataNest, ma appena esco non me lo visualizza più.
      la cartella dove ho messo il file è "hidden" ma ho provato a metterla "public" e non cambia niente. sai a cosa può essere dovuto?
      grazie mille e complimentoni per il blog! ormai è diventato una droga per me! ;-)

      RispondiElimina
    6. @Mattia
      togli lo script da MyDataNest e inseriscilo in Google Sites come spiegato alla fine di questo post
      http://parsifal32.blogspot.com/2009/11/google-sites-aggiunge-nuovi-modelli-per.html

      RispondiElimina
    7. evvai!! funziona! grazie mille! complimenti ancora per il blog!

      RispondiElimina
    8. Uffa, faccio tutto perbenino, ma...NULLA! Perchè?
      Ho il modello semplice di Jon Peterson.
      L'unico dubbio è se devo espandere i modelli widget, prima di inserire i codici. Ma se non lo faccio, non mi trova la seconda stringa. Per trovarla uso da tastiera Ctrl+F, ma spesso si inceppa e non capisco perchè; c'è un altro metodo?
      Grazie, hai fatto un lavoro grandissimo per Blogger, fatti pagare, ;-).

      RispondiElimina
    9. @seleneqcvs
      Farmi pagare? Neppure sanno che esisto!!!
      Prova con l'adattamento in italiano che ho fatto per questo widget. Lo puoi trovare qui
      http://www.ideepercomputeredinternet.com/2010/01/il-widget-degli-articoli-correlati-con.html
      Può essere che lo script in versione inglese abbia superato la larghezza di banda del server.
      Ciao

      RispondiElimina
    10. Ciao,
      Ho fatto la prima parte (head), però nella seconda parte, non ho trovato nessuna di queste due righe nei miei codici.
      Come è possibile?
      Grazie mille!

      RispondiElimina
    11. @Ester
      Hai metto la spunta a espandi modelli widget?
      Se sì prova a trovare qualche riga simile tipo
      < div class='post-footer-line post-footer-line-2' > o
      < div class='post-footer-line post-footer-line-3' >
      o anche
      < div class='post-footer' >
      N.B Ho inserito gli spazi prima e dopo i segni di maggiore e minore altrimenti non mi avrebbe salvato il commento

      RispondiElimina
    12. Ho messo come hai detto te, però non viene.
      Forse perchè il mio blogger è in portoghese...
      Grazie per la tua disponibilità e complimenti per il tuo blog!

      RispondiElimina
    13. Il fatto che sia in portoghese non c'entra nulla. Il linguaggio del modello è sempre e comunque in inglese. Dovresti trovare la riga giusta da sola guardando la posizione degli altri elementi e facendo delle prove, sempre salvando il modello per sicurezza

      RispondiElimina
    14. Scusa se la domanda non ha molto a che vedere con l'argomento.. ma c'è un modo per mettere a lato di un blog un post dove si possono aggiungere dei commenti? Tipo un Guestbook dove però chiunque può commentare senza iscriversi. Grazie...

      RispondiElimina
    15. @Giuseppe
      Si può mettere una chat tipo Cbox o Xat
      http://www.ideepercomputeredinternet.com/2009/01/come-mettere-una-chat-nella-homepage.html
      http://www.ideepercomputeredinternet.com/2009/01/come-inserire-una-chat-nel-blog-per.html

      RispondiElimina
    16. Ciao, intanto complimenti perché sei sempre molto chiaro. Ho provato, seguito passo dopo passo, guardato anteprima ma non compare. Devo prima salvare? Grazie

      RispondiElimina
      Risposte
      1. Forse non hai fatto caso all'ultimo paragrafo in cui c'è un aggiornamento. Questo widget non è più funzionante perché l'hosting su cui aveva caricato il codice il suo autore ha superato il limite di banda o è stato tolto. Segui quest'altro post
        http://parsifal32.blogspot.com/2010/01/il-widget-degli-articoli-correlati-con.html
        R @

        Elimina
    17. ciao ho qualche problema con l inserimento degli articoli correlati....;creod di aver inserito i codici ma non riesco a visualizzare lo spazio dove poter correlare gli articoli...come dovrei fare,ho forse sbagliato qualcosa?aspetto risposte grazie

      RispondiElimina
      Risposte
      1. Non posso sapere se hai sbagliato qualcosa. Purtroppo non ho ancora sviluppato doti divinatorie. Il post però è molto vecchio. Ti consiglio di provare con un articolo più recente
        http://www.ideepercomputeredinternet.com/2013/02/related-posts-with-thumbnails-for-blogger_7.html
        che è il widget degli articoli simili con miniature presente attualmente su questo sito
        @#

        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.