Come mostrare automaticamente il Profilo sotto i post di Blogger nei blog con 2 o più autori.

Come mostrare in automatico insieme al post anche il Profilo dell'autore che lo ha pubblicato in un blog nella piattaforma Blogger.

Riprendo il discorso iniziato nel precedente post riguardo alla creazione di blog su Blogger con più autori. La piattaforma Blogger mette a disposizione degli utenti il widget del Profilo che nel caso di più autori diventa il widget dei Collaboratori. Si tratta come vedremo di una gadget minimalista con soltanto i link ai singoli profili. L'obiettivo principale di questo post è invece quello di mostrare il profilo giusto magari sotto il contenuto di ciascun articolo. Mediante i tag condizionali si possono imporre delle condizioni per associare il Profilo dell'autore agli articoli che ha effettivamente pubblicato.

AGGIUNGERE IL WIDGET DEI COLLABORATORI

In un blog con più autori se si va su Layout > Aggiungi un gadget > Base > Profilo viene installato il widget dei Collaboratori che avrà questo aspetto

Accanto ai link degli Autori si visualizzeranno le icone di Blogger e Google+ a seconda che si sia o meno unificato il Profilo di Blogger a quello di Google+. 

AGGIUNGERE IL PROFILO DI BLOGGER ALLA FINE DEL POST

Adesso vediamo invece come aggiungere il giusto profilo alla fine di ciascun articolo. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga </head>. Subito sopra si incollano i CSS che determineranno l'aspetto del box dell'autore

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

Questo codice è stato pensato per soli due autori. Se fossero di più occorrerebbe aggiungere dopo la virgola altre classi di stile sul tipo .info-autore3, .info-autore4, .foto-autore3, .foto-autore4, ecc. Però se ne può fare anche a meno e usare solo queste classi. La diversificazione è stata introdotta nel caso si volesse personalizzare l'aspetto del rettangolo del profilo per ciascun autore in modo diverso.  Si cerca quindi la riga iniziale del layout per il desktop che è la seguente 

<b:includable id='post' var='post'>
 
e si scorre il codice verso il basso fino a trovare la riga

<data:post.body/>
 

Subito sotto a questa si incolla questo codice di esempio che poi spiegherò meglio 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == "Ernesto"'>
<div class='info-autore1'>
<div class='foto-autore1'>
<img alt='author' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAWjnLpTszz1lH1rx20pOyt5funrbfIhlzbBcJvF6FHoZvV4neZ1NNjVYtH676jtBF1gqVpwFilvzdaCcE-N2kjzo5V0JSVfOkOVrDE7vk3kUJdddC1K6dU7iq1QZZFsRg2SvrA2sWlsA/s120/Picture%252057.jpg'/></div>
<h3><font color='#f2a136'>Questo post è stato scritto da:</font></h3>
<p><font color='#191919'><a href='URL_PROFILO' 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-autore2'>
<div class='foto-autore2'>
<img alt='author' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeZyY4_2D_UoTKWOaejCcSgunEymJQiuKtP7L1ZGp8Ifbrutv48i-Tiows_9BjkJOmjFQpTGw02h5SHLyRz8gjYQ63d0LmIAhF4lmz4OZDYbh3TVQtyVBDTKbH-7ia854JsUyqjbzpKR4/s120/Profilo.png'/></div>
<h3><font color='#f2a136'>Questo post è stato scritto da:</font></h3>
<p><font color='#191919'><a href='URL_PROFILO' title='Profilo su Google Plus'>Ernesto</a> che oltre a scrivere post come Ernesto Tirinnanzi pubblica anche articoli con il nome Ernesto. 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>

Si salva il modello.  Come esempio ho inserito come detto due autori i cui rispettivi codici sono stati evidenziati di giallo e evidenziati di verde. Come test ho usato i due username Ernesto e Ernesto Tirinnanzi. Si possono quindi usare anche dei nomi utente di due parole. Bisogna però ricordarsi che tale elemento è case sensitive vale a dire che le maiuscole vengono considerate diverse dalle minuscole. Se vogliamo inserire questa personalizzazione in un blog con tre autori dobbiamo inserire un altro codice come i due presentati subito sopra della ultima riga evidenziata di beige.

In ciascuno di questi codici si può editare il contenuto inserendo i link ai profili sui social network che vogliamo pubblicizzare. Per quello che riguarda le immagini dei profili ricordo che si può postare una nostra foto su Picasa per poi ottenerne il link diretto. Si possono settare anche le dimensioni semplicemente modificando l'URL. Nel codice proposto la larghezza della immagine è di 120 pixel perché nell'URL c'è s120. Se si vuole portarla a 150 pixel basta sostituire s120 con s150.

Alla fine di ciascun articolo sarà visualizzato l'avatar e le info sull'autore che ha scritto il post in modo automatico. Concludo ricordando che si possono modificare i codici dei colori del riquadro in cui viene visualizzato il profilo e anche la sua larghezza cambiando il parametro  width: 560px;. In  un  prossimo articolo vedremo come mostrare widget diversi in funzione dell'autore e come aggiungere banner pubblicitari dell'account collegato all'autore del post.