Come mostrare un box con info sull'autore alla fine dei post su Blogger

Come mostrare alla fine degli articoli un riquadro con la foto e le informazioni biografiche dell'autore per aumentare l'autorevolezza del sito su Blogger

I recenti aggiornamenti dell'algoritmo di Google, riguardo ai risultati di ricerca, hanno penalizzato i siti con autori non precisamente individuabili. Come più volte illustrato nelle Linee Guida per Webmaster e nei vari tweet riconducibili a ingegneri che si occupano del posizionamento dei siti, uno dei fattori più rilevanti per il ranking delle pagine web è quello dell'autorevolezza dell'autore che le ha pubblicate.

A parità di altri fattori, è evidente che Google privilegerà nei risultati delle SERP quegli articoli che hanno un autore già conosciuto dal motore di ricerca, che abbia già pubblicato post sullo stesso tema e che goda di un buon seguito di follower sui vari social network. Per completare l'impianto è anche necessario che sul sito sia presente una pagina con le informazioni sull'autore.

Non occorre redigere una biografia esauriente ma bisogna dare almeno le informazioni necessarie per mostrare ai lettori, ma anche ai motori di ricerca, che chi ha scritto il post non è un raccattato per strada, che di punto in bianco si è messo a scrivere su argomenti di cui non è esperto, ma è uno che conosce la materia, sia per gli studi effettuati che per l'esperienza maturata in anni di lavoro o comunque di attività sul campo.

Gli utenti di Blogger possono aggiungere il widget del Profilo con le informazioni in esso contenute. Tale gadget è presente in tutte le versioni dei Temi di Blogger. Si va su Layout -> Aggiungi un gadget -> Profilo. Nella finestra di configurazione si lascia la spunta a Mostra Informazioni Personali, mentre Mostra Posizione può essere utile solo per i siti con un approccio locale, come quelli realizzati da professionisti, da imprenditori o da commercianti per reclamizzare la propria attività. Si va su Salva e si posiziona il gadget nella sidebar.

Se questa soluzione non vi piace, potete optare per quella che si vede spesso nel web. Alla fine del post viene infatti spesso mostrato un riquadro con una foto e la biografia dell'autore. In questo articolo illustrerò appunto come aggiungere una tale personalizzazione ai blog su Blogger che non siano Responsive.

Le brevi note biografiche potranno contenere una foto e vari link verso risorse sinergiche al sito, come i profili di altri social network. Dopo aver salvato il template, si va su Tema -> Modifica HTML e si cerca la riga </head> quindi, subito sopra a questa, si incolla il seguente codice:

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

Si cerca poi la riga

<b:includable id='post' var='post'>

e si scorre il codice verso il basso fino a trovare la riga

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

Subito sopra a questa riga, si incolla il seguente codice:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='info-autore'>
<div class='foto-autore'>
<img alt='author' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK8iQcVYqk9bfyHivX52aV21Z-nzOrG04tP1bVEM0CyI2_frSC2n1VGT0bAr9683ofa1bozOVS7ZBL5FiIlqAS0O62gW9yNnlu5Cf5_72vq-o0UG8bIM5mYu0ZmoHjtd_oQ-MJtiDeLdU/s160/profilo.jpg'/></div>
<h3><font color='#f2a136'>Questo post è stato scritto da:</font></h3>
<p><font color='#191919'><a href='https://www.blogger.com/profile/03393759575661143644' title='Profilo su Blogger'> Ernesto Tirinnanzi</a> che ha scritto più di seimila articoli su argomenti quali informatica, intrattenimento, finanza, politica e divulgazione scientifica. Ha una laurea in Matematica con orientamento generale, indirizzo fisico-matematico ed è da sempre un appassionato di tecnologia. 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>

Si salva il Tema e si apre un post per visualizzare il risultato della modifica.

Demo Clicca qui

Le personalizzazioni più importanti possono essere apportate ai seguenti parametri:

1. L'indirizzo della immagine del Profilo di Blogger può essere ricavata dallo stesso profilo cliccando sopra alla foto con il destro del mouse, per poi andare su Copia Indirizzo Immagine. Se ne possono settare anche le dimensioni agendo sul valore tra le due slash (nel codice /s160/ per una foto larga 160 pixel).
2. Si sostituiscono gli URL ai profili con quelli nostri e, opzionalmente, si possono eliminare quelli che non ci interessano e aggiungerne altri più rilevanti per la nostra attività.
3. Il padding è stato impostato con 5 pixel in tutte le direzioni (distanza del contenuto dal bordo). Il primo valore imposta la distanza dalla parte alta e gli altri nelle altre tre direzioni in senso orario.
4. Lo stile dei bordi del rettangolo e della foto possono essere personalizzati
5. La prima e l'ultima riga colorate di verde sono dei tag condizionali per non mostrare il box nelle pagine statiche. Opzionalmente possono essere eliminate per mostrarlo anche in quel caso.
6. Ho scelto di mettere la foto a destra (right) e il testo a sinistra (left) ma si può invertire la loro posizione.
7. Infine lo sfondo del box è stato impostato con un colore di codice #eeeeff;.