Come spostare la Data sotto il Titolo del post su Blogger.

Come spostare la data dell'articolo sotto il titolo del post nei modelli di Blogger usando il nuovo Editor HTML.

Nell'articolo su Blogger Buzz di introduzione del nuovo Editor HTML di Blogger si fa esplicito riferimento alla possibile personalizzazione di spostare la data dell'articolo sotto il titolo del post come una modifica resa più semplice da questo nuovo Editor. La data sotto il titolo dell'articolo è una prerogativa dei template a Visualizzazione Dinamica che in questo modo può essere adottata anche nei modelli normali. Mi ero riproposto di pubblicare un tutorial in merito ma poi me ne ero sempre dimenticato fino a 15 minuti fa quando ho letto un commento proprio su questo tema.

Come sempre prima di iniziare qualsiasi modifica occorre salvare una copia del template. Vi consiglio anche di non cancellare i file dei template salvati ma di rinominarli inserendo anche la data e di conservarli all'interno di una cartella di backup visto che potrebbero tornare utili in futuro.

Si va quindi su Modello > Modifica HTML > Vai al widget > Blog1

Occorre quindi cliccare sulla freccetta nera posta a sinistra del widget per visualizzarne tutto il codice

I numeri delle righe ovviamente non corrisponderanno a quelli dello screenshot perché ogni modello ha comunque una sua struttura. Visualizzerete tutta una serie di righe di codice con la relativa freccetta

Quello che ci interessa solitamente è il primo ed è quello della riga

<b:includable id=’main’ var=’top’>...</b:includable> 

Anche in questo caso si clicca sulla freccetta posta a sinistra. Adesso cercate il blocco di codice della data che sarà molto simile se non identico a questo 

<b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>

Tale codice dovrà essere selezionato, copiato in un file di testo quindi cancellato



Scorrendo il codice in basso dovreste trovare le due righe
<div class=’post-header-line-1’/>
</div>

Il codice copiato e eliminato dalla parte superiore va incollato subito sotto queste righe



Adesso si va su Anteprima modello per verificare la correttezza della modifica

Volendo si può provare a incollare il codice della data in un qualsiasi altro punto del template in cui sia sintatticamente possibile inserirlo. Questo hack è stato direttamente ricavato dal già citato articolo di Blogger Buzz che si può sempre consultare nel caso ci fossero dei dubbi.