Pubblicato il 05/07/11e aggiornato il

Come avere avatar diversi per blog dello stesso account Google.

Ho già trattato un tema simile in questo articolo ma dai commenti è risultato che l'hack, pur giusto nella sua impostazione teorica, non portava a risultati pratici almeno in taluni modelli. Ho quindi pensato di pubblicare una alternativa e di rendere il codice più semplice da personalizzare. La necessità di questa modifica è limitata in primo luogo a quei blogger che hanno cambiato foto del Profilo e che adesso vorrebbero la stessa immagine anche nei commenti passati.  Dai primi commenti avuti in questo post sembra però che anche questo tentativo non abbia ottenuto buoni risultati. Ho quindi pensato di riadattare l'articolo e di fare delle verifiche visto che in genere sono abituato a testare tutte le mie personalizzazioni. Stavolta non lo avevo ancora fatto perché non avevo mai mutato immagine del Profilo. Adesso ho fatto in modo di avere in un blog un avatar nei commenti diverso da quello di tutti gli altri blog del mio account. In secondo luogo quindi la personalizzazione può interessare proprio coloro che hanno più blog che trattano tematiche diverse e che sentono l'esigenza di avere immagini diverse nei commenti di ciascun sito.

Ho testato il funzionamento in questo blog di prova che fa parte del mio stesso account e nel quale dovrei quindi avere lo stesso avatar. La cosa invece non è così come si evince dallo screenshot sottostante

commenti avatar blogger 

in cui ho commentato una volta con l'account Google e un'altra come anonimo. L'avatar è  quello che ho attualmente su Facebook ed è diverso da quello presente nei commenti di questo blog che è uguale a quello del mio Profilo come deve accadere per Blogger. Si va su Design > Modifica HTML e si salva il modello completo per un eventuale backup di ripristino. Si espandono i modelli widget e si cerca il seguente blocco di codice

<b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>

che è presente nei vecchi template e in quelli recenti del Designer Modelli. Si cancella il codice e si sostituisce con il seguente

<b:if cond='data:blog.enabledCommentProfileImages'>
<b:if cond='data:post.author == &quot;Ernesto T.&quot;'>
<b:if cond='data:comment.authorUrl == &quot;http://www.blogger.com/profile/03393759575661143644&quot;'>
<div class='avatar-image-container'>
<img src='https://lh6.googleusercontent.com/-mNvzfxT19T8/ThMJaccdcQI/AAAAAAAATsQ/Bksjt_PuS5w/avatar-FB.jpg' style='height:100%; width:100%;'/>
</div>
<b:else/>
<data:comment.authorAvatarImage/>
</b:if> </b:if>
</b:if>

dove ho voluto mantenere il codice che ho materialmente inserito nel template per evitare fraintendimenti e per rendere più agevole la sostituzione dei parametri che sono

  1. Il nome dell'autore del blog che è case sensitive
  2. L'URL del Profilo in Blogger
  3. L'indirizzo della immagine caricata su Picasa che deve abbastanza quadrata ma anche di dimensioni superiori. Io ne ho caricata una di 122x126px

Nel caso in cui questo metodo non funzionasse significa che il template ha uno strano comportamento o che si è sbagliato nel personalizzare il codice inserendo i dati in modo non corretto. In conclusione riassumo i casi in cui può essere utile questa personalizzazione

  1. Per avere la stessa foto a lato dei commenti se si è cambiata più volte
  2. Per avere avatar diversi in blog distinti dello stesso account.

Ricordo infine che si può inserire anche un avatar personalizzato per i commenti anonimi incollando questo codice

/* Avatar */
.avatar-image-container img {
background:url(URL_Immagine);
width:45px;
height:45px;
}

subito sopra alla riga ]]></b:skin> dove al posto di URL_Immagine si mette l'indirizzo della foto che si è scelta da visualizzare accanto ai commenti anonimi.

Aggiornamento: Dopo essermi spremuto le meningi sono giunto a una soluzione del problema davvero brillante (mi scuso per l'immodestia). Si tratta di imporre un tag condizionale che mostri l'avatar prescelto quando l'autore del blog è lo stesso dell'autore del commento. Una tale condizione si scrive in HTML per Blogger in questo modo

 <b:if cond='data:comment.author == data:post.author'>

Partendo da questo presupposto il codice da sostituire a quello eliminato diventa

<b:if cond='data:blog.enabledCommentProfileImages'>
<b:if cond='data:comment.author == data:post.author'>
<div class='avatar-image-container'>
<img src='https://lh6.googleusercontent.com/-mNvzfxT19T8/ThMJaccdcQI/AAAAAAAATsQ/Bksjt_PuS5w/avatar-FB.jpg' style='height:100%; width:100%;'/>
</div>
<b:else/>
<data:comment.authorAvatarImage/>
</b:if> </b:if>

dove deve essere personalizzato l'URL dell'avatar colorato di rosso. Mi attendo commenti da chi testasse questo codice sul proprio blog.





11 commenti :

  1. Tempestivo nel trovare la soluzione al nostro discorso di ieri. Ti farò sapere.

    Ciao Parsi. :)

    LeNny.

    RispondiElimina
  2. @LeNny
    Non so se funziona perché ho sempre avuto lo stesso avatar e non posso testare :)

    RispondiElimina
  3. Scusami Ernesto se sono davvero fuori discorso ma, il
    id='content-wrapper'>
    e il
    id='main-wrapper'>
    non li ritrovo nel mio codice HTML... forse per i nuovi modelli di Blogger vengono chiamati in un'altro modo? Grazie!

    RispondiElimina
  4. I lettori che ti meriti sono proprio incontentabili ed esosi :)))

    questo per dire che ho provato ancora, ma viene cambiato anche l'avatar degli altri commentatori, col risultato che hanno tutti la stessa faccia (nel mio caso di orso), cosicché sembra che io sia una povera pirla che si scrive i commenti da sola, si fa le domande e si dà anche le risposte come un qualunque ospite di Gigi Marzullo :D

    scusa il tono ironico, è rivolto a me e non all'utilissimo lavoro che fai per tutti noi che ti seguiamo con piacere, ciao :)

    RispondiElimina
  5. @Nintendo
    Dipende dai modelli ma in genere
    content-wrapper diventa
    content-outer o
    content-inner

    @Myrò
    Ho riadattato il post e l'ho reso più semplice da personalizzare. Se poi in dei template non funziona ...

    RispondiElimina
  6. Ehm, continua a non funzionarmi :)))

    Ipotesi n.1) io sono particolarmente imbranata che non mi riesce di aggiustare 'sto benedetto codice per far si che mi compaia 'sto benedetto avatar uguale in tutti i miei commenti passati e presenti

    Ipotesi n.2) la fortuna è cieca ma la sfiga ci vede benissimo (copyright Paolino Paperino, credo...)

    Ipotesi n.3) ho un template talmente modificato che non ne può più di tutti i miei aggiustamenti e ha deciso di mandarmi a quel paese

    La prima ipotesi mi sembra la più plausibile, ma non escludo un mix diabolico di tutte e tre le opzioni :))

    Mi arrendo, ciao :)

    RispondiElimina
  7. Come sempre....grazie milleee! Solo un'altra cosa ti chiedo e poi la smetto di importunarti di domande inutili: hai già creato un tutorial su un menù che si trova proprio in cima alla pagina? Un esempio e quello che ha la Nintendo America, che secondo me è uno dei più pratici e comodi menù esistenti! (Link per la Nintendo America http://www.nintendo.com/)...

    RispondiElimina
  8. @Nintendo
    Ti ricordo che sei su Blogger, un servizio gratuito, e non hai a disposizione gli strumenti sofisticati di un dominio personale con la possibilità di inserire il CMS che ti pare.
    Questo non vuol dire che anche su Blogger non si possano creare menù. Se ti riferisci al mio lo puoi trovare qui
    http://www.ideepercomputeredinternet.com/2010/01/come-inserire-un-menu-orizzontale.html
    Un elenco di possibili menù è in questa pagina
    http://www.ideepercomputeredinternet.com/2011/03/i-migliori-menu-per-blogger.html
    Tutti i menù presentati nel blo si possono consultare in questa etichetta
    http://www.ideepercomputeredinternet.com/search/label/menu

    @@Myrò
    Se non ti funziona neppure con il codice che vedi dopo l'Aggiornamento allora non ci sono speranze ... Almeno io ho esaurito tutte le idee sul tema :)

    RispondiElimina
  9. E almeno, è possibile creare una navbar con link da me definiti e, se proprio uno vuole strafare, anche con un immagine?

    RispondiElimina
  10. Non lo so esattamente cosa vuoi dire ma mi sembra al di sopra delle mie capacità

    RispondiElimina
  11. Ho trovato un qualcosa di simile dentro al tuo sito (http://www.ideepercomputeredinternet.com/2011/02/menu-orizzontale-personalizzabile-da.html) quindi grazie mille per il tuo contributo!

    RispondiElimina

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.