Come mostrare il nome dell'autore e quello delle etichette sotto il titolo del post in Blogger.

Come spostare il nome dell'autore e quello delle etichette dal footer di Blogger a sotto il titolo dell'articolo.

Nei modelli ufficiali di Blogger il nome dell'autore del post e quello delle etichette scelte per l'articolo vengono visualizzate nel footer sotto tutto il contenuto del post. Il footer di un blog su Blogger può essere personalizzato aggiungendo o togliendo elementi andando su Layout > Post sul blog > Modifica e mettendo o togliendo la spunta agli elementi che rispettivamente si vogliono o non si vogliono visualizzare. Nel footer sono presenti anche il numero di commenti, l'ora di pubblicazione, le reazioni, i pulsanti di condivisione, la posizione, i pulsanti ufficiali di condivisione, i link al post e il Quick Edit che è quella icona per modificare il post al volo che può essere vista solo da un amministratore del sito.

In  molti template scaricati da internet il nome dell'autore e le etichette sono mostrate sotto il titolo invece che nel footer mutuando un tipo di impaginazione della stampa cartacea dove ovviamente non ci sono le etichette. Vediamo come procedere per questa personalizzazione. Si parte quindi da una situazione simile alla seguente con autore e etichette alla fine del post

La prima cosa da fare quando si opera nel modello è sempre quella di salvare il template e in questo caso è ancora più necessario data la delicatezza delle righe di codice su cui opereremo. Si va su Modello > Modifica HTML e con Ctrl+F si cerca la riga

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

che è l'inizio del codice per la versione desktop del sito. Si clicca sulla freccetta nera posta alla sinistra per visualizzare tutto il codice di questa sezione. Si scorre in basso fino a trovare la riga

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

Subito sotto visualizzeremo il codice che mostra l'autore del post e che sarà simile a questo

<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <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 class='g-profile' 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>

Selezioniamolo, copiamolo in un file del Blocco Note e cancelliamolo. Scorriamo il codice ancora in basso fino a trovare il codice delle etichette che potrà essere come questo 

<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span>

e che dovrà essere selezionato, copiato e cancellato come il precedente



Questo secondo codice si troverà subito sotto alla riga

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

I due codici copiati e cancellati si incollano uno di seguito all'altro in un file di testo. Il risultato ottenuto dovrebbe essere simile a quello seguente

<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <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 class='g-profile' 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>
<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span>

Ora si scorre il codice in alto fino a trovare la riga

<div class='post-header-line-1'/>

Tutto il codice precedente si incolla subito sotto a questa
 


Finalmente si salva il modello. Si avrà un risultato finale come questo



Volendo si può andare adesso su Layout > Post su blog > Modifica e cambiare le impostazioni



per poi salvare. Il risultato sarà il seguente

Dal punto di vista SEO non credo che questa modifica abbia una particolare influenza ma mostrare all'inizio del post il nome del suo autore e gli argomenti trattati può essere un modo per diminuire la frequenza di rimbalzo e aumentare il numero medio delle pagine aperte da ciascun visitatore. In un prossimo articolo vedremo come personalizzare nelle dimensioni e nei colori il nome dell'autore e quello delle etichette e come eventualmente aggiungere una linea orizzontale di divisione.