Mostrare la data di aggiornamento dell'articolo nel footer di Blogger.

Come mostrare nel footer di Blogger la data di aggiornamento del post in modo automatico dopo che viene ripubblicato con modifiche.

In Blogger esistono dei tag specifici che mostrano sia la data di pubblicazione del post sia quella dell'aggiornamento. Il tag che "stampa" la data e l'ora di pubblicazione del post è  data:post.timestampISO8601 mentre quello che "stampa" la data e l'ora dell'aggiornamento è data:post.lastUpdatedISO8601.

Blogger mostra in modo nativo la data e l'ora della pubblicazione  sempre che l'utente abbia scelto di farlo. Ricordo che aa questo scopo si va su Layout -> Post del blog -> Modifica. In Opzioni Pagina Post si mette la spunta alla data della pubblicazione scegliendone lo stile e eventualmente più in basso anche all'ora in cui questo è avvenuto.

L'orario di pubblicazione ha qualche importanza nei commenti in cui viene mostrato di default ma non è fondamentale nei post in cui basta il giorno di pubblicazione. Dopo ogni modifica bisogna ricordarsi di andare in basso alla finestra e cliccare su Salva.

La data di pubblicazione di un articolo di Blogger solitamente si trova in alto sopra al titolo del post. In questo tutorial vedremo come aggiungere la data di aggiornamento del post in modo automatico nel footer di Blogger dopo il nome dell'autore dell'articolo.

Dopo aver scelto le opzioni di visualizzazione di data e ora in Layout -> Post del blog si salva il modello per un eventuale ripristino andando su Tema -> Backup/Ripristino -> Scarica Tema.

DATA DI AGGIORNAMENTO NELLA VERSIONE DESKTOP

Si va su Bacheca -> Tema -> Modifica HTML e si cerca la riga

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

quindi si clicca sulla freccetta nera posta sulla sinistra per visualizzare tutto il codice della sezione desktop. Si scorre la pagina verso il basso fino a trovare la riga

<span class='post-author vcard'>

che è il tag che mostra il nome dell'autore del post.  Subito sotto a tale riga si incolla questo codice

<!-- Data aggiornamento - Inizio -->
<b:if cond='!data:blog.isMobile'>
<span style='float:right; font-size:12px !important; color:#191919 !important; line-height:12px;'>Post aggiornato il <span expr:id='&quot;post-update-&quot; + data:post.id' expr:title='data:post.lastUpdatedISO8601' style='font-size:14px !important; color:#003366 !important; line-height:14px;'/>
</span>
<script>
   var dateISO = &quot;<data:post.lastUpdatedISO8601/>&quot;;
   var postid = &quot;post-update-<data:post.id/>&quot;;
   // <![CDATA[
     var JJ = dateISO.substring(8,10);
     var MM = dateISO.substring(5,7);
     var AA = dateISO.substring(0,4);
     var hh = dateISO.substring(11,13);
     var mn = dateISO.substring(14,16);
     var dateJMAhm = JJ+"/"+MM+"/"+AA;
     document.getElementById(postid).innerHTML=dateJMAhm;
   // ]]>
</script>
</b:if>
<!-- Data Aggiornamento - Fine -->

Si salva il Tema. Lo script trasforma il tag dell'update che abbiamo visto all'inizio in una data e in una ora. Viene però mostrata solo la data (JJ+"/"+MM+"/"+AA).

L'espressione Post aggiornato il può essere modificata a piacere. Ho inserito il tag float:right; per mostrare l'aggiornamento sulla destra del layout. Ho anche formattato diversamente con colore e dimensione dei caratteri l'espressione personalizzabile e la data di aggiornamento vera e propria. Tutti i parametri in rosso possono essere modificati secondo le regole dei codici dei colori. Infine le due righe evidenziate di giallo servono per mostrare l'aggiornamento solo nella versione desktop.

COME MOSTRARE ANCHE L'ORA DELL'AGGIORNAMENTO

Se volete mostrare anche l'ora in cui il post è stato aggiornato in questo modo



basterà sostituire

JJ+"/"+MM+"/"+AA;    con    JJ+"/"+MM+"/"+AA+" alle ore "+hh+":"+mn;

e salvare nuovamente il Tema.

DATA DI AGGIORANAMENTO NELLA VERSIONE MOBILE

Chi volesse inserire la data di aggiornamento nella versione mobile all'inizio dell'articolo può seguire le istruzioni di questo post. Per aggiungere la data di aggiornamento nel footer  si possono togliere le due righe evidenziate di giallo oppure incollare il codice senza le due righe nella sezione del mobile che inizia con la riga

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

CONCLUSIONE

Per mostrare la data di aggiornamento solo nei post e non in homepage si devono aggiungere gli appositi tag condizionali subito sotto a quelli delle due righe evidenziate di giallo. Vedrò in un eventuale prossimo post se sia possibile aggiungere la data di aggiornamento anche ai Nuovi Temi Responsive di Blogger.