Come personalizzare o nascondere il nome dell'autore nella versione mobile di Blogger.

Come personalizzare o nascondere il nome dell'autore di un blog su Blogger nella versione mobile.

Per rispettare le regole di Google e evitare Errori Blogposting bisogna mostrare il nome dell'autore sia nella versione mobile sia nella versione desktop. Per questa configurazione si va su Layout -> Post del blog -> Modifica e si mette la spunta su Pubblicato da ... nella sezione Opzioni pagina post. In questo modo il nome utente sarà visibile alla fine del post di Blogger nella versione desktop e in quella mobile. Chi avesse unificato il Profilo di Blogger con quello di Google+ invece del nome utente avrà alla fine dell'articolo il proprio nome completo.

In un precedente articolo ho mostrato come spostare il nome dell'autore insieme a quello delle etichette subito sotto il titolo e prima del contenuto del post. Questa modifica però è fattibile solo per la versione desktop. Nella versione mobile il nome autore rimarrà alla fine dell'articolo. Vediamo come modificarlo nel modo mostrato nei due screenshot seguenti ottenuti con il tool Screenfly

Andiamo però per gradi. Come prima opzione illustrerò come nascondere il nome autore.

COME NASCONDERE IL NOME DELL'AUTORE NELLA VERSIONE MOBILE DI BLOGGER

Si va su Modello -> Modifica HTML, si cerca la riga </head> quindi, subito sopra, si incolla 

<b:if cond='data:blog.isMobile'>
<style>
span.post-author.vcard &gt; span &gt; a {display:none;}
</style>
</b:if>

Si salva il template. Nella maggior parte dei modelli verrà nascosto il nome dell'autore mentre non ci sarà Errore Blogsposting visto che il nome dell'autore è comunque presente nei Dati Strutturati.

COME PERSONALIZZARE IL NOME AUTORE

Prima di procedere occorre verificare di aver impostato correttamente la versione mobile. Si va su Modello -> Cellulare e si clicca sulla icona della ruota dentata. Si mette la spunta sul Sì per abilitare la versione mobile quindi si sceglie il Modello Personalizza e si salva l'impostazione.

Poi dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca la riga

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

che è l'inizio della sezione mobile. Si scorre il codice verso il basso fino a trovare questo blocco

<span class='post-author vcard'>
                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>                      
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                       <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <span itemprop='name'><data:post.author/></span>
                    </span>
                  </b:if>
                </b:if>
              </span>

che potremo modificare in questo modo

<span class='post-author vcard'>
                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                       <span style='font-size:10px; color:#191919;'>Pubblicato da </span>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                       <span itemprop='name' style='font-variant:small-caps;'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <span itemprop='name' style='font-variant:small-caps;'><data:post.author/></span>
                    </span>
                  </b:if>
                </b:if>
              </span>

in cui abbiamo aggiunto i codici evidenziati di giallo. Il testo Pubblicato da può essere modificato a piacere. Dopo aver salvato il modello vedremo un risultato simile a quello dello screenshot iniziale. Si potranno impostare codici dei colori diversi così come diverse dimensioni di carattere. Lo stile aggiunto al nome dell'autore con le due righe

style='font-variant:small-caps;'

servono per mostrare il nome in maiuscoletto. Oltre a questa riga di codice ne possiamo aggiungere altre per cambiare il colore, modificare la dimensione o addirittura aggiungere uno sfondo.