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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqfz17Bxz18BbhKjYI_mytTy1WjcVcETHGH7kvWMrQ4cbYyfQYkJH614QX5LovW1y2CGkNC3MoOKDmDbFHKd_TTxMjTDM3k-yoLSi3bIK63ma7b3sTUMzLcf8ScpHyrL3JEVpF0YNuRqs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUbZmP6MsJAo3AOWuE0xNaKrwBO9hlgijsU1piE8x0gcCQuR8bUHQruiWh5qd9O2ZVTYUlG2mQEwv2vEQ6OG-LCv9OOUXQr7f2nekaJ1MNNYHTvi6sTKfpDsJrjDhQu6a7WDV0V_HUMew/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à

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.