Come mostrare il nome dell'autore e l'elenco delle etichette sotto il titolo dell'articolo in Blogger.

Come mostrare sotto il titolo dell'articolo, e personalizzare, il nome dell'autore del post e le etichette inserite in un blog su Blogger.

Il nome dell'autore e le etichette aggiunte a un articolo nei blog su piattaforma Blogger vengono mostrati in calce all'articolo. Si può in qualche modo personalizzare il loro posizionamento andando su Layout -> Post del Blog -> Modifica per mettere la spunta agli elementi che si vogliono visualizzare e per toglierla a quelli che non vogliamo vedere.

Con il drag & drop si possono spostare i vari elementi per poi andare su Salva per salvare il nuovo posizionamento. Questa personalizzazione non funziona troppo bene nei modelli ufficiali e funziona molto male in quelli modificati dal webmaster. L'obiettivo di questo post è quello di mostrare come spostare la visualizzazione delle etichette e dell'autore dell'articolo dalla parte bassa del post alla parte alta subito sotto il titolo.

La situazione iniziale è dunque la seguente

Si va su Modello -> Backup e Ripristino e si salva il template se le modifiche al modello non andassero a buon fine. Si va quindi su Modello -> Modifica HTML e si cerca questa riga

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

che come i lettori assidui di questo sito ormai sapranno non è altro che l'inizio della sezione desktop del modello. Si scorre il codice verso il basso fino a trovare questa riga

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

che è la riga in cui inizia la seconda parte del footer che solitamente si trova subito sotto all'inizio del footer determinato dalla riga  <div class='post-footer'>. Subito sotto si trova questo codice

<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>

visibile in questo screenshot

Tale codice va copiato e incollato in un file di testo quindi va cancellato dal modello. Ora scorriamo il codice verso il basso fino a trovare il codice delle etichette che sarà simile a questo

<span class='post-labels'>
        <b:if cond='data:top.showPostLabels and 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='not data:label.isLast'>,</b:if>
          </b:loop>
        </b:if>
      </span>

e che si trova solitamente tra la seconda e la terza riga del footer

Anche questo codice va selezionato, copiato e incollato in un file di testo subito sotto al codice copiato precedentemente. Subito dopo va cancellato dal modello. Il codice complessivo che è stato copiato nel Blocco Note in due passi successivi sarà quindi simile al 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:top.showPostLabels and 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='not data:label.isLast'>,</b:if>
          </b:loop>
        </b:if>
      </span>

Ora si cerca, sempre nella stessa sezione per il desktop scorrendo il codice verso l'alto, la riga

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

che è l'inizio della intestazione del post. Il codice precedente si incolla subito sotto a questa. Finalmente si salva il modello e si apre un post per vedere il risultato ottenuto

con il nome dell'autore e quello delle etichette visibile sotto il titolo dell'articolo.

PERSONALIZZAZIONI SUCCESSIVE

Si può andare su Layout -> Post del blog -> Modifica per modificare le espressioni

Pubblicato da e Etichette:. Si va su Salva per rendere le modifiche effettive.

Per una ulteriore personalizzazione si può tornare su Modello -> Modifica HTML e cercare la riga </head> quindi, subito sopra a questa incollare questo codice

<style>
span.post-labels, span.post-author.vcard {font-size:13px; font-style:italic;}
a.g-profile {font-variant:small-caps; font-weight:bold; font-size:15px;}
</style>

che unitamente all'inserimento della metadescrizione del post porterà a questo risultato finale

che è di sicuro esteticamente più valido e professionale di quello iniziale. Concludo ricordando che small-caps è l'attributo per il maiuscoletto del nome dell'autore dell'articolo, italic è il corsivo mentre font-size determina la dimensione dei font di autore e etichette.