Come inserire un box con le informazioni sull'autore alla fine di un post di Blogger.

Nei blog su Blogger è presente di default il widget del Profilo in cui vengono inserite le note biografiche, professionali e le informazioni sulla attività web dell'autore del blog. Per evidenziare maggiormente questo aspetto si può anche inserire un box con tali note alla fine di ciascun articolo che viene pubblicato.

In tale contenitore può essere inserita una immagine o un avatar, tutto il testo e tutti i link che vogliamo. E' opportuno inserire dei tag condizionali per mostrare tale rettangolo solo nei post per non appesantire troppo la homepage. Ecco un esempio di come potrebbe essere un tale box dell'autore

• Demo del box dell'autore in calce al post -

Per la sua installazione si va su Modello > Backup/Ripristino e si salva il modello completo per sicurezza. Si torna su Modello > Modifica HTML > Procedi, si espandono i modelli widget, ponendo la flag nel relativo quadratino, e si cerca la riga </head>. Subito sopra si incolla il codice

<style>
.info-autore {
        float: left;
        width: 480px;
        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 i parametri in rosso che concernono dimensioni, colori, allineamento del box, allineamento della immagine e stili dei bordi.

Adesso si cerca la riga

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

e, subito sopra, si incolla quest'altro codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>

dove la prima e l'ultima riga rappresentano i tag condizionali. Il testo con i riferimenti e i link sono stati inseriti come semplice esempio e possono essere modificati a piacere.

I due codici esadecimali #f2a136' e #191919' determinano rispettivamente il colore del titolo del box e quello del testo immesso e possono essere sostituiti da altri più in tono con gli altri colori del blog. Si va su Salva modello per terminare l'installazione.