Pubblicato il 27/10/14 - aggiornato il  | 12 commenti :

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

autore-etichette-blogger

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

codice-etichette

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
 
autore-sotto-titolo-post

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

autore-post-etichette-sotto-titolo-post

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

configurare-post-blogger

per poi salvare. Il risultato sarà il seguente

nome-autore-etichette-sotto-titolo

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.


12 commenti :

  1. Ottimo! Va bene anche per più utenti? E se uno volesse inserire un riquadro con una mini bio agganciata al nome di autore in fondo al post? Grazie come sempre per le tue spiegazioni chiare e utili!

    RispondiElimina
    Risposte
    1. Non ho testato ma dovrebbe funzionare. Nei casi che hai menzionato il codice per quello che riguarda l'autore dovrebbe essere più lungo ma il posizionamento dovrebbe comunque andare bene.
      @#

      Elimina
    2. Per la biografia dell'utente a fine post puoi metterci il profilo andando su Layout > Post sul blog > Modifica e mettendo la spunta al Profilo dell'autore. Puoi anche seguire questi tutorial
      http://www.ideepercomputeredinternet.com/2013/07/profilo-blogger-google-plus-sotto-post.html
      http://www.ideepercomputeredinternet.com/2014/02/google-plus-profilo-blogger.html
      @#

      Elimina
  2. L'avevo flaggato ma non me lo mostra...-_-
    Grazie ora mi leggo i post :D

    RispondiElimina
    Risposte
    1. Per un autore o per due autori puoi usare questo tutorial
      http://www.ideepercomputeredinternet.com/2012/08/box-informazioni-siti-multi-autore-blogger.html
      Comunque con la stessa sintassi puoi aggiungere anche più di due autori
      @#

      Elimina
  3. Cosa strana. Non mi esce "Pubblicato da:" vicino al nome dell'autore. Se non lo sposto di posizione (nel senso, se lo tengo sotto) mi comprare la scritta Pubblicato da. Altrimenti mi compare solo il nome dell'autore. Com'è?

    RispondiElimina
  4. Ma se inserisco le etichette visibili all'interno del post sopra il titolo dell'articolo vado a creare qualche problema nelll'indicizzazione dell'articolo?

    RispondiElimina
    Risposte
    1. Questa personalizzazione funziona con i vecchi modelli e non con quelli recenti di tipo responsive (Contempo, Emporio, ecc...). L'indicizzazione e la SEO non c'entra nulla con questa modifica
      @#

      Elimina
  5. Io sono riuscito ad inserire le etichette sopra il titolo del post nel modello Emporio

    RispondiElimina
    Risposte
    1. Mi fa piacere che questo codice funzioni anche con i nuovi temi responsive. La SEO non dipende minimamente dal posizionamento delle etichette anzi non dipende proprio dalle etichette che è solo un mezzo per organizzare i post
      @#

      Elimina
    2. Grazie di avermi sfatato questo articolare delle etichette. Comunque le tue guide sono molto utili grazie.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy