Pubblicato il 18/08/12e aggiornato il

Come inserire in ogni post un riquadro con le informazioni sull'autore in siti di Blogger con più autori.

Come mostrare un box di informazioni con avatar, link ai social network e una breve nota biografica in ciascun post a seconda dell'autore che lo abbia scritto nei siti di Blogger con più autori.
Questo articolo è un compendio a quello che avevo pubblicato tempo fa sull'inserimento di un box alla fine di ogni post con una breve nota biografica dell'autore e i link ai suoi account nei principali social network. In un commento mi è stato chiesto come si poteva fare se si aveva un blog in cui scrivevano più persone. I blog collaborativi d'altra parte sono sempre più numerosi e una tale personalizzazione è certamente più utile per siti su cui scrivono più autori rispetto a blog personali.

In questo modo il lettore potrà visualizzare le informazioni essenziali su chi ha scritto l'articolo e eventualmente decidere di seguirlo sui vari social network. Userò lo stesso codice integrato con dei tag condizionali per mostrare il box di ciascun autore solo nei post che abbia effettivamente scritto.
Dopo aver salvato il template si va su Modello > Modifica HTML > Procedi e si mette la spunta a Espandi i modelli widget. Si cerca la riga </head> e, subito sopra, si incolla il seguente codice

<style>
.info-autore {
        float: left;
        width: 405px;
        padding: 10px 5px 0px 2px;
        border: 1px solid #ddd;
        margin-bottom: 10px;
        margin-top: 10px;
        background: #eeeeff;
}
.info-autore h3 {
        margin-bottom: 10px;
}
.foto-autore {
        float: right;
        margin: 0 0 0 10px;
}
.foto-autore img {
        border: 1px solid #fff;
}
</style>

dove possono essere personalizzati diversi parametri. I più importanti sono stati colorati di rosso e riguardano la posizione (left), la larghezza (405 pixel) e il colore di sfondo del box (#eeeeff). Adesso dobbiamo scegliere la posizione in cui mostrare il rettangolo. Nel caso optassimo per la fine di ogni articolo, dovremo cercare nel modello questa riga di codice

<div class='post-footer-line post-footer-line-1'>

e, subito sopra, incollare quest'altro blocco di HTML

<b:if cond='data:post.author == "Ernesto"'>
<div class='info-autore'>
<div class='foto-autore'>
<img alt='author' src='https://lh4.googleusercontent.com/-SYEWZCjQY7c/T2Wf_5YvRKI/AAAAAAAAW7A/dMjdEKgB5fU/s124/immagine-autore.jpg'/></div>
<h3><font color='#f2a136'>Questo post è stato scritto da:</font></h3>
<p><font color='#191919'><a href='https://plus.google.com/111056841635962157738/posts?hl=it' title='Profilo su Google Plus'>Ernesto Tirinnanzi</a> che ha scritto più di tremila articoli su argomenti quali informatica, intrattenimento, finanza, politica e divulgazione scientifica. Puoi seguire Ernesto su <a href='http://twitter.com/parsifal32'>Twitter</a>, su <a href='http://www.facebook.com/parsifal32'> Facebook</a>, o su <a href='http://www.youtube.com/user/parsifal32'> Youtube</a></font><br style='clear:both;'/></p>
</div>
</b:if>
<b:if cond='data:post.author == "Ernesto Tirinnanzi"'>
<div class='info-autore'>
<div class='foto-autore'>
<img alt='author' src='https://lh3.googleusercontent.com/-TH_r4-byUVo/UC9Wt52wBRI/AAAAAAAAZzE/JqCiaiz3pM4/s125/autore2.jpg'/></div>
<h3><font color='#f2a136'>Questo post è stato scritto da:</font></h3>
<p><font color='#191919'><a href='https://plus.google.com/111056841635962157738/posts?hl=it' title='Profilo su Google Plus'>Ernesto Tirinnanzi</a> che ha scritto più di tremila articoli su argomenti quali informatica, intrattenimento, finanza, politica e divulgazione scientifica. Puoi seguire Ernesto su <a href='http://twitter.com/parsifal32'>Twitter</a>, su <a href='http://www.facebook.com/parsifal32'> Facebook</a>, o su <a href='http://www.youtube.com/user/parsifal32'> Youtube</a></font><br style='clear:both;'/></p>
</div>
</b:if>

In questo esempio sono stati inseriti solo due autori ma ne possiamo mettere quanti ne vogliamo basta incollare altri blocchi di codice che inizino con la riga

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

e che terminino con </b:if>. Ovviamente debbono essere personalizzate le note biografiche e modificati gli URL dell'avatar e dei social network oltre ai codici dei colori del testo. Ciascun autore avrà quindi il suo box personale alla fine di ogni articolo che abbia pubblicato o che pubblicherà

box-autore-siti-multiautore

Come test ho utilizzato un mio vecchio blog in cui potete vedere un articolo a firma Ernesto e un altro invece con la mia firma solita. Ricordo che i nickname sono case sensitive e che quindi i nomi vanno scritti comprensivi di eventuali maiuscole o minuscole. Se si volesse inserire il riquadro all'inizio dell'articolo, il secondo codice andrebbe incollato subito sopra la riga <data:post.body/>.

Per visualizzare il box con la biografia dell'autore solo nei post occorre aggiungere all'inizio del secondo codice questa riga

<b:if cond='data:blog.pageType == &quot;item&quot;'> 

e il tag </b:if> alla fine dello stesso codice. Se si vuole impedire che il box si veda nelle pagine statiche occorre aggiungere altri due tag condizionali, vale a dire le righe

 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

e

</b:if>

da incollare rispettivamente all'inizio e alla fine del secondo codice. Se si decide di visualizzare il box biografico solo nei post e non nelle pagine statiche occorre quindi inserire due righe all'inizio e due righe alla fine del secondo codice.




29 commenti :

  1. Grazie mille!!! ho sempre desiderato inserire questo box nel mio blog, ma non sono mai riuscito a farlo con più autori...

    RispondiElimina
  2. Ho seguito tutto passo passo, ma non mi compare il box negli articoli...

    RispondiElimina
    Risposte
    1. @KevinMaggi
      Se non ti compare significa che hai sbagliato a inserire il nome degli autori. Sono case sensitive quindi devono avere le giuste maiuscole e i giusti spazi. Per esempio nel caso del nick con cui hai commentato deve essere
      <b:if cond='data:post.author == "Kevin Maggi"'>

      Elimina
    2. si lo so, sono stato attento... Ho ripetuto la procedura per ben 2 volte e non compare lo stesso...
      Siccome modifico molto l'HTML, può essere qualche incompatibilità con altre cose?

      Elimina
    3. Però ho notato anche un'altra cosa... Hai presente il pannello da cui puoi modificare cosa vedere sotto i post (i pulsanti di condivisione, il numero dei commenti, le etichette)?
      Praticamente io inserisco anche il nome dell'autore, ma nei effettivamente in fondo ai post non mi appare... Può essere che Blogger abbia difficoltà a riconoscere gli autori nel mio blog?

      Elimina
    4. @KevinMaggi
      Questo hack funziona con i modelli ufficiali di Blogger. In quelli scaricati da internet molto spesso gli autori tralasciano intere parti di codice per far prima. Da quanto mi hai detto è probabile che nel tuo caso non esista proprio il blocco di codice che serve per indicare chi sia l'autore del post quindi non c'è nulla da fare. Solo l'autore del template potrebbe aiutarti ma non lo fanno mai (o quasi).

      Elimina
    5. ma il mio è un modello ufficiale di blogger....

      Elimina
    6. correggo quanto detto prima... (senza il bio box) il nome dell'autore appare nella versione mobile, ma NON appare nella versione desktop...

      Elimina
  3. @KevinMaggi
    Allora prova a metterlo in un'altra posizione prima di

    <data:post.body/>

    oppure prima di

    <div class='post-footer'>

    RispondiElimina
    Risposte
    1. Questo vale per il secondo codice, il primo va sempre incollato prima di /head

      Elimina
    2. Ho notato che hai fatto qualche modifica al codice... probabilmente era quello... adesso il box me lo visualizza, ma solo nella versione mobile.... Molto probabilmente mi sa che (non so come) manca il codice per il riconoscimento dell'autore nella versione desktop... sai come posso risolvere?

      Elimina
    3. @KevinMaggi
      La modifica al codice riguarda solo il tag condizionale per visualizzare il box solo nei post che adesso ho tolto, non c'entra nulla. Non saprei come potresti risolvere.

      Elimina
    4. ok... vedrò da solo come risolvere, però ho vist oche nella versione mobile, il box me lo mette anche nelle pagine statiche... è possibile toglierlo, lasciandolo solo nei post?

      Elimina
    5. @KevinMaggi
      Ho aggiunto una breve spiegazione alla fine del post di cosa fare per mostrare il box solo negli articoli e non nelle pagine statiche.

      Elimina
    6. Ultima domanda, poi prometto di non romperti più. Ho provato a mettere anche la miniatura accanto ai post e l'icona con il numero dei commenti, ma non appaiono. A questo punto ho pensato che sarebbe opportuno ripristinare completamente il layout dei post. Sai come posso fare?

      Elimina
    7. @KevinMaggi
      Mi dici che hai un modello ufficiale di Blogger ma forse sono state fatte delle modifiche che lo hanno un po' incasinato. Forse ti conviene ripartire da un altro modello e reinserire widget e personalizzazioni da capo.

      Elimina
    8. ho reinstallato il modello da capo e adesso funziona...

      Elimina
  4. Ciao Enrico, dopo aver lasciato un template di logger perorientarmi su uno scaricato da internet, che mi piace di più, ho notato però che non mi visualizza la data e soprattutto la firma (aaaargh! ne va della mia Google Autorship!).
    Come posso ovviare? Se inserisco io un pò di codice avrò un risultato soddisfacente (per GoogleAutorship, ovvio ...)? E il codice può essere quello che hai postato tu in questo articolo?

    Grazie di esistere.

    RispondiElimina
    Risposte
    1. @EdoardoOsti
      Grazie della considerazione (mi chiamo Ernesto ...). Venendo alla tua domanda, ti rispondo nello stesso modo che agli altri. Se si usa un template scarioato da internet bisogna che vada bene completamente perché le eventuali modifiche sono molto problematiche e anche difficili da fare perché ciascun autore usa un codice diverso dagli altri e crea dei CSS particolari quindi i codici spesso non vanno bene. Per la data e la firma puoi però provare a andare su Layout > Post sul blog > Modifica, mettere la spunta sulla firma e configurare la forma della data prima di salvare.

      Elimina
    2. Oooops... perdona il refuso, è che verso in un letto di dolore con la gola in fiamme e la febbre alta ( se non basta come scusa ho un buon repertorio, che va dalle cavallette alla tremenda inondazione ...). Per data e firma sono andato più volte su Layout come suggerisci tu, e l'ho fatto più volte provando a fare piccole modifiche nella speranza che me le prendesse, ma nulla di fatto.
      Proverò a vedere nel codice se trovo qualcosa ...

      Elimina
  5. Ci ho provato sia nel mio template leggermente modificato, sia in uno "vanilla" di Blogger, ma non mi appare nulla. Ho tolto tutti gli if, sia quelli per farlo apparire solo nei post, sia quelli per farlo apparire solo nei post di un determinato autore, ma non appare proprio nulla. Come potrei risolvere?

    RispondiElimina
    Risposte
    1. Non conosco la ragione perché non ti funziona. Posso dire che nel test come vedi ha funzionato bene :(
      @#

      Elimina
    2. Uhm... potrebbe essere un problema del modello "Fantastico S.p.A." che uso io? O qualcosa legato al fatto che uso Google + e non l'account blogger limitato?

      Elimina
    3. No. È più probabile che tu non abbia inserito il codice nel posto giusto. L'articolo è vecchio di tre anni e da allora il codice è cambiato. Leggi questo post
      http://www.ideepercomputeredinternet.com/2013/10/blogger-versione-mobile-desktop-personalizzare-editor-html.html
      Forse hai incollato il codice nella sezione per il mobile che è prima di quella per il desktop
      @#

      Elimina
    4. A pensarci bene... potrebbe essere benissimo! Se il codice è lo stesso ma si trova prima, penso proprio che sia quello l'errore XD

      Grazie della dritta, appena mi rimetto a smanettarci ti faccio sapere, e comunque ti ringrazio per i vari tutorial, mi accorgo solo ora di essere sembrato un po' brusco nei commenti sopra XD

      Elimina
  6. Salve, non riesco a far funzionare questo codice in nessun modo. avevo già questo tipo di box ma si limitava a riconoscere un solo autore, da quando il mio blog è in collaborazione con un'amica non potevo più tenere una descrizione unica, per cui ho eliminato quella parte del codice e ho inserito il codice che si legge in questo post. sono stata molto scrupolosa... cosa potrei aver sbagliato?

    RispondiElimina
    Risposte
    1. Devi essere molto precisa nell'inserire i nomi utente che sono quelli che si vedono prima dei commenti anche con maiuscole, minuscole e spazi. Un altro errore tipico è quello dell'aver inserito il codice nella sezione mobile invece che in quella desktop visto che nel template viene prima. Quando ho scritto questo post non c'era ancora. Prova a incollare questo stesso codice seguendo queste istruzioni
      http://www.ideepercomputeredinternet.com/2013/10/blogger-versione-mobile-desktop-personalizzare-editor-html.html
      In sostanza le righe le devi cercare in questa sezione
      <b:includable id='post' var='post'>
      e non in quest'altra
      <b:includable id='mobile-post' var='post'>
      @#

      Elimina
  7. Grazie mille, ci proverò appena possibile! Non penso di aver confuso le versioni, perché ho disabilitato quella per cellulari in modo da mostrare il template allo stesso modo sia su desktop che su mobile... il problema è che continuo a vedere il box che avevo prima, nonostante cancelli la parte di html che lo riguarda, mentre di tutto questo blocco di codici neanche l'ombra. Grazie della disponibilità comunque, ti farò sapere :)

    RispondiElimina
  8. Grazie mille, ci proverò appena possibile! Non penso di aver confuso le versioni, perché ho disabilitato quella per cellulari in modo da mostrare il template allo stesso modo sia su desktop che su mobile... il problema è che continuo a vedere il box che avevo prima, nonostante cancelli la parte di html che lo riguarda, mentre di tutto questo blocco di codici neanche l'ombra. Grazie della disponibilità comunque, ti farò sapere :)

    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.