Come aggiungere la data di aggiornamento del post a quella di pubblicazione in Blogger.

Come mostrare nella versione desktop o mobile di Blogger la data di pubblicazione di un post e quella di aggiornamento in una stessa riga.

Nel pubblicare le guide per blog sulla piattaforma Blogger vado a periodi un po' come Picasso anche se sono totalmente negato per la pittura. Ho scritto una serie di articoli su come ottimizzare le immagini per velocizzare il sito quindi mi sono occupato dei Dati Strutturati con i post sugli errori BlogPosting e su come installare i BreadCrumbs.

Da ieri ho preso a occuparmi di come ottimizzare lo spazio nel layout per cercare di aggiungere più contenuto possibile e eliminare tutto quello che è superfluo. Ho scritto infatti un articolo su come nascondere l'Header di Blogger quando la pagina viene aperta con un cellulare. 

Oggi proporrò un hack che ho applicato anche sul mio sito per sostituire la data di pubblicazione di un post che in genere è piuttosto invasiva con una riga più piccola ma più lunga in cui oltre alla data di pubblicazione viene mostrata anche quella di aggiornamento. Questa modifica può essere applicata solo alla versione desktop oppure anche a quella mobile. Avevo già pubblicato degli articoli per creare dei CSS per personalizzare l'aspetto e la posizione della data ma adesso vediamo qualcosa di diverso.

Sulla sinistra si visualizzerà la data di pubblicazione mentre sulla destra quella di aggiornamento che potrà essere la stessa se il post non fosse mai stato aggiornato. Prima di iniziare la modifica del modello occorre andare su Bacheca -> Layout -> Post del blog -> Modifica quindi si mette la spunta alla data in Opzioni Pagina Post e si sceglie un formato del tipo gg/mm/aa 

quindi si va su Salva.

DATA DI AGGIORNAMENTO SULLA VERSIONE DESKTOP DI BLOGGER

Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca la riga

<b:includable id='main' var='top'>

quindi si scorre il codice verso il basso fino  trovare quest'altra riga

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

che è quella che configura la data di Blogger. Si cancella e si sostituisce con questo codice

<h2 class='date-header'><span style='font-size:10px !important; color:#191919 !important; line-height:10px;'> Pubblicato il <data:post.dateHeader/></span><span style='float:right; font-size:10px !important; color:#191919 !important; line-height:10px;'>e aggiornato il<span expr:id='&quot;post-update-&quot; + data:post.id' expr:title='data:post.lastUpdatedISO8601' style='font-size:10px !important; color:#191919 !important; line-height:10px;'/>
</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>
</h2>

Si salva il modello. Oltre ai codici dei colori si possono settare la dimensione dei caratteri e il valore dell'interlinea. Si possono usare anche dimensioni e colori diversi per le varie parti della riga mentre nel codice di esempio si è privilegiato avere lo stesso stile. Le espressioni colorate di blu possono anche modificate secondo i propri gusti.

COME APPORTARE LA MODIFICA ANCHE ALLA SEZIONE MOBILE DI BLOGGER

Sempre in Modello -> Modifica HTML si cerca la riga

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

quindi subito sotto si trova la stessa riga trovata nella versione desktop

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

che possiamo sostituire con il codice già visto, magari diminuendo la dimensione dei caratteri da font-size:10px a font-size:8px. Un'altra opzione è quella di mostrare solo la data di pubblicazione senza quella di aggiornamento quando il post viene aperto da mobile. In questo caso il codice con cui sostituire l'ultima riga diventa il seguente

<h2 class='date-header'><span style='font-size:8px !important; color:#191919 !important; margin-top:-5px;'> Pubblicato il <data:post.dateHeader/></span><span style='float:right; font-size:8px !important; color:#191919 !important;'/></h2>

che porterà a questo risultato



Se invece avessimo incollato il codice precedente avremmo avuto questo risultato

Si tratta di due scelte valide. Anche il quest'ultimo codice si possono personalizzare i codici dei colori e si può anche diminuire o aumentare la distanza con gli altri elementi del layout inserendo un tag come quello evidenziato di giallo con margin-top per l'alto e margin-bottom per la parte bassa.

Come ultima opzione per la versione mobile propongo questo codice

<h2 class='date-header'><span style='font-size:8px !important; color:#191919 !important; line-height:8px;'> Pubblicato o aggiornato:<span expr:id='&quot;post-update-&quot; + data:post.id' expr:title='data:post.lastUpdatedISO8601' style='font-size:8px !important; color:#191919 !important; line-height:8px;'/>
</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>
</h2> 

con cui viene mostrata solo la data dell'ultimo aggiornamento che può essere anche la stessa di quella della pubblicazione nel caso in cui il post non fosse mai stato modificato.

Si tratta di una soluzione che indica al lettore l'ultima volta che l'autore ha modificato il post rendendolo edotto della freschezza o meno del contenuto pubblicato.