Come mostrare il Profilo dell'autore sotto ai post di Blogger.

Come mostrare il Profilo di Blogger (o di Google Plus) alla fine dei post di Blogger e come personalizzarlo.

Ho già pubblicato un articolo su come si possa mostrare il Profilo dell'autore alla fine di ogni articolo su Blogger ma ultimamente sono stati introdotti dei nuovi Tag di Blogger che rendono questa opzione più facilmente personalizzabile. Si tratta di <data:post.authorPhoto.url/> e <data:post.authorAboutMe/> che sono delle "variabili" da inserire nel codice del template che mostrano rispettivamente l'avatar e le informazioni sull'autore. Il box autore introdotto tramite le funzioni di Blogger sarà visibile in tutte le pagine ivi comprese la Homepage, le pagine d'archivio e quelle delle etichette. L'obiettivo di questo post sarà quello di inserire il Profilo dell'autore solo alla fine dei singoli post per non appesantire troppo l'apertura delle pagine che contengono più elementi.

Dopo aver salvato il template si va su Layout > Post sul blog > Modifica e si mette la spunta a Mostra profilo autore sotto il post. Si termina andando su Salva

Il profilo mostrato sarà quello di default di Blogger. Per cambiarlo si clicca su Modello > Modifica HTML > Vai al widget > Blog1

Con Ctrl+F si cerca la sezione <b:includable id='post' var='post'> e se ne visualizza l'intero codice cliccando sulla freccetta nera posta alla sinistra. Sempre con Ctrl+F o scorrendo il codice adesso ci cerca l'altra riga <div class='post-footer'> e, subito sopra, si incolla quest'altro codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.author-box{margin:10px 0;background:#90b6f2;}
.author-avatar{float:left;width:30%;height:auto;}
.author-info{float:left;padding-left:1%;width:65%;}
.author-name{padding-left:25px;color:#fff !important;}
.author-name h3{display:inline;margin:0;padding:0;font-size:22px;}
.author-about{margin:0;padding:10px 0;color:#111 !important; text-align:justify;}
</style>
<div class='author-box'>
<!---->&lt;img alt=&#39;<data:post.author/>&#39; class=&#39;author-avatar&#39; src=&#39;<b:if cond='data:post.authorPhoto.url'><data:post.authorPhoto.url/><b:else/>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaz8I7BX52g4H3gZDUbB_-X6Z0LepCWZW8nut6a8AznF_s_G5k0FWZUIpe_Jkho0C4OFzfmKDSvCeH_Z4kU9Q8zpS-RiNE3H_XA6Uc4tAnk0eLrT-K8udx254bJv2qNXvxvJznwNkj-5A/s96/senzanome.png</b:if>&#39; title=&#39;<data:post.author/>&#39;/&gt;<!---->
<div class='author-info'>
<!---->&lt;a class=&#39;author-name&#39; style=&#39;background:left no-repeat url(<b:if cond='data:post.authorProfileUrl'>http://www.google.com/images/icons/ui/gprofile_button-16.png)&#39; href=&#39;<data:post.authorProfileUrl/><b:else/>http://www.blogger.com/img/logo-16.png)&#39; href=&#39;<data:post.authorUrl/></b:if>&#39; rel=&#39;author&#39; target=&#39;_blank&#39; title=&#39;<data:top.authorLabel/>&amp;nbsp;<data:post.author/>&#39;&gt;<!----><h3><data:post.author/></h3><!---->&lt;/a&gt;<!---->
<b:if cond='data:post.authorAboutMe'>
  <p class='author-about'><data:post.authorAboutMe/></p>
</b:if>
</div>
<div style='clear:both'/>
</div>
</b:if>

Oltre ai tag di Blogger menzionati sopra sono state utilizzate le icone ufficiali di Blogger e di Google+. Le dimensioni percentuali e i codici dei colori possono essere modificati secondo i nostri gusti così come l'URL della immagine del profilo se non è presente quella dell'autore. Dopo aver salvato il modello se adesso si apre il blog si vedrà in homepage il profilo ufficiale di Blogger mentre nei post si vedranno due box. Oltre a quello di Blogger si visualizzerà anche quello che abbiamo aggiunto manualmente.

È evidente che dovrà essere tolto quello di Blogger. Si torna quindi su Modello > Modifica HTML > Vai al widget > Blog1 e si cerca sempre la sezione <b:includable id='post' var='post'> all'interno della quale con Ctrl+F si  trova la riga che inizia così

<div class='author-profile'  ….. 

A tale riga si aggiunge un nuovo selettore in questo modo

<div class='author-profile' id='profilo-autore'  ….

come mostrato da questo screenshot

Adesso si cerca la riga che determina la fine dei CSS ]]></b:skin> e, subito sopra, si incolla la nuova riga

#profilo-autore {display:none;}

Si salva nuovamente il modello.



Se ora si apre la Homepage non si vedrà il profilo di Google Plus che invece sarà visibile alla fine del post ma non comparirà più duplicato insieme agli altri elementi del footer.