Come inserire le informazioni e l'avatar dell'autore alla fine dell'articolo.

In molti temi Wordpress è presente alla fine del post un rettangolo che mostra le informazioni sull'autore dell'articolo insieme a un suo avatar. Su Blogger al massimo si può personalizzare il classico Pubblicato da attraverso la finestra per configurare il post. Il nostro obiettivo sarà quello di mostrare alla fine di tutti gli articoli un rettangolo di informazioni come questo

Nel box delle informazioni sull'autore possono anche essere inseriti dei link a Profili, a altri siti, a pagine fan, a social network, ecc. Si possono naturalmente personalizzare i colori dello sfondo e i colori e le dimensioni dei caratteri. Per prima cosa editate il testo del vostro box informazioni tramite un Editor HTML che può essere quello di Blogger o anche Windows Live Writer. Copiate il codice HTML in un file di testo e salvatelo. Caricate su Picasa anche l'avatar che volete compaia nel box e acquisitene il link diretto.

Andate su Modello > Backup/Ripristino > Scarica modello completo per un backup di sicurezza. Sempre su Modello > Modifica HTML > Procedi, mettete la spunta su Espandi i modelli widget. Cercate questo codice

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'>
<data:post.author/>
</span>
</b:if>
</span>

e cancellatelo. Si può anche lasciare e effettuare questa operazione in un secondo momento. Si tratta del codice che mostra la scritta Pubblicato da … e quindi la sua eliminazione serve per evitare una duplicazione delle informazioni sull'autore. Adesso cercate la riga

<div class='post-footer'>

Ce ne potrebbero essere due identiche. Nel caso voi scegliete la prima. Immediatamente sotto incollate questo codice

<div class='aboutauthor'>
<img border='0' src='URL_AVATAR' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>SCRITTO DA</span> <strong><data:post.author/></strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante</p>
</div>

dove dovrà essere incollato l'URL dell'avatar e configurate le sue dimensioni. Al posto della scritta colorata di verde si incolla il codice del testo che avevamo editato e che avevamo precedentemente salvato. Il codice in questione deve necessariamente iniziare con <p> e terminare con </p> (oppure rispettivamente <div> e </div>). Si può anche modificare l'espressione SCRITTO DA con un'altra più originale. Sempre nel template adesso si cerca la riga

   ]]></b:skin>

e, immediatamente sopra, si incolla quest'altro codice

/* AUTORE DEL BLOG */
.aboutauthor {
background:#DEEAEA; /* Colore dello sfondo */
border:1px solid #CCCCCC; /* Stile del bordo */
letter-spacing:normal;
color:#313131; /* Colore del testo */
text-transform:none;
font-size:12px; /* Dimensioni caratteri */
padding:5px;
margin:10px 0 10px 0;
}
.aboutauthor strong {
color:#191919; /* Colore del nome dell'autore */
font-weight:bold;
font-size:14px; /* Dimensioni carattere autore */
padding-left:5px;
}

Accanto ai parametri in rosso sono visibili i commenti in verde che illustrano a quale personalizzazione si riferiscono. I meno esperti possono leggersi i post sui codici dei colori e sullo stile dei bordi. Finalmente si salva il modello e si visualizzerà il box informazioni nella parte finale del post. Se ci fossero degli inestetismi si può configurare l'aspetto del post per esempio togliendo l'ora di pubblicazione.

 

Caso di blog su Blogger con più autori

Questo box di informazioni è particolarmente importante quando abbiamo a che fare con blog scritti da più persone e quindi un box informativo alla fine del post è ancora più utile. Vediamo come si possa visualizzare automaticamente il box dell'autore alla fine di ogni post che ha pubblicato. Facciamo l'ipotesi di due autori ma possono essere anche di più. Per ciascuno di essi occorre editare l'HTML del testo di informazione e caricare l'avatar su un hosting quale Picasa. Il codice da incollare subito sotto alla riga <div class='post-footer'> in questo caso sarà 

<div class='aboutauthor'>
<b:if cond='data:post.author == &quot;Autore1&quot;'>
<img border='0' src='URL_AVATAR1' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>SCRITTO DA</span> <strong><data:post.author/></strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>
</b:if>
<b:if cond='data:post.author == &quot;Autore2&quot;'>
<img border='0' src='URL_AVATAR2' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>SCRITTO DA</span> <strong><data:post.author/></strong>
<p>Duis at metus nec nisi laoreet luctus. Nullam eu ligula ac est dignissim euismod. Aenean erat ligula, vehicula laoreet suscipit a, ultricies ac lectus. In hac habitasse platea dictumst. Fusce mauris erat, semper ac lacinia vitae, tristique et magna. Pellentesque at massa at sem blandit vulputate sed quis diam.</p>
</b:if>
</div>

In questo codice si fa uso dei tag condizionali per i singoli autori e dovranno essere inseriti

1. I nickname degli autori rispettando maiuscole, minuscole e eventuali spazi
2. I link diretti ai rispettivi avatar
3. Il codice HTML del testo di presentazione con eventuali link

Nel caso di più di due autori, incollate altri blocchi di codice con la stessa sintassi dei due inseriti tra le righe <div class='aboutauthor'> e </div> che delimitano il contenitore principale. Chiudo osservando che non c'è bisogno di javascript e che quindi questo procedimento incide solo marginalmente sulla velocità di caricamento della pagina. Si tratta di caricare in più solo una piccola immagine e pochissimo testo.