Aggiungere l'ora di pubblicazione alla data nei post di Blogger.

Mi è stato chiesto in un commento di affrontare l'argomento della visualizzazione dell'ora di pubblicazione di un post insieme alla data. Presenterò due versioni a seconda che si voglia mostrare l'ora in una seconda linea sotto alla data oppure che si voglia visualizzare tutto nella stessa riga.

Ecco nel mio blog di prova come appare la data in condizioni normali

Andiamo su Design > Modifica HTML e salviamo il modello completo. Dopo aver messo la flag a espandi modelli widget, cerchiamo con F3 o Ctrl+F la seguente stringa

<h2 class='date-header'>

Dobbiamo prendere in considerazione tutto il codice presente fino alla chiusura del tag h2. Nel modello Simple del Designer Modelli troviamo questa riga

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

In altri modelli potrebbe essere leggermente diversa ma voi prestate attenzione alla parte iniziale, che serve per trovare il blocco di codice e alla chiusura del tag che è la zona in cui inserire la personalizzazione.

Visualizzare l'ora di pubblicazione sotto la data

In questo caso occorre aggiungere questo codice

<h2 class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
&lt;span style=&quot;color:#2288bb&quot;&gt;ALLE ORE &lt;/span&gt;
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</h2>

subito dopo </h2> della riga che è stata individuata in precedenza. Le personalizzazioni riguardano il testo da visualizzare prima dell'ora e il colore della scritta. Il codice del colore della data si può facilmente trovare cercando nel modello date.header.color, che si trova nella sezione delle variabili, e acquisendo il colore presente in value. A titolo di esempio posto il codice trovato nel modello Simple

<Variable name="date.header.color" description="Text Color" type="color"
         default="$(body.text.color)" value="#2288bb"/>

Dopo aver salvato il modello ecco come appariranno tutti i post

Si possono fare alcune considerazioni. L'ora avrà lo stesso colore del titolo e avrà un collegamento al permalink del post che si potrà aprire cliccandoci sopra per esempio in home page, nelle pagine di etichette e di archivio. L'ora di pubblicazione sarà visibile non solo in tutti gli articoli che vi accingerete a pubblicare ma anche in tutti quelli che avete già postato.

Visualizzare l'ora di pubblicazione accanto alla data

Questa è forse esteticamente la scelta migliore visto che si vedono data e ora nella stessa riga. Il codice da inserire è lo stesso di prima senza la prima riga, solo che stavolta va incollato prima del tag di chiusura </h2>. Per il modello Simple si ha cioè questo HTML

<h2 class='date-header'><span><data:post.dateHeader/></span>
<b:if cond='data:top.showTimestamp'>
&lt;span style=&quot;color:#2288bb&quot;&gt;ALLE ORE &lt;/span&gt;
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</h2>

dove il codice preesistente è di colore blu mentre quello aggiunto è di colore rosso. Anche in questo caso si può procedere alle personalizzazioni come illustrato in precedenza, che sono in grassetto e riguardano colore e scritta. In questo caso l'aspetto del post sarà così


I blogger che scrivono più post al giorno possono trovare interessante visualizzare anche l'orario in cui gli articoli vengono pubblicati. Se si era precedentemente inserita la personalizzazione che mostra la data in tutti i post di Blogger potrebbero sorgere delle incompatibilità tra le due modifiche anche se è comunque sempre presente la riga su cui operare.