Pubblicato il 10/11/16 - aggiornato il  | 26 commenti :

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.

data-pubblicazione-aggiornamento

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 

stile-della-data-blogger


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

data-pubblicazione-su-mobile

Se invece avessimo incollato il codice precedente avremmo avuto questo risultato

data-aggiornamento-mobile

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.

data-pubblicazione-o-aggiornamento

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.


26 commenti :

  1. Grazie infinite per questo post, interessantissimo e già applicato con successo!

    RispondiElimina
  2. Ernesto, volevo chiederti se è possibile fare in modo che quando si fanno gli aggiornamenti agli articoli, questi si mettono in alto sulla bacheca come se fossero stati appena pubblicati.
    Grazie per la tua gentilezza

    RispondiElimina
    Risposte
    1. In alto nella Bacheca? Che vuol dire? Nella Homepage? È molto difficile. Non credo esista in rete nulla del genere. Gli aggiornamenti però spesso vengono mostrati nei Feed e nelle Newsletter
      @#

      Elimina
    2. No, scusa, mi sono spiegata male...
      I post sulla bacheca compaiono in ordine inverso alla pubblicazione. Quello più in alto è l'ultimo scritto.
      Mi chiedevo se fosse possibile far riconoscere la data di aggiornamento come se fosse un post appena scritto invece che farlo rimanere qualche anno indietro. Hai presente quando si scrive un commento nei gruppi di facebook? Il post si piazza in alto ogni volta che viene aggiornato.
      Questa era la domanda.

      Elimina
  3. Non si può fare. Quando aggiorno un post torno indietro con il browser quindi aggiorno la pagina per vedere se l'aggiornamento è riuscito.
    @#

    RispondiElimina
  4. Ciao Ernesto e grazie per i preziossissimi consigli del tuo blog. Volevo chiederti se era possibile:

    1) inserire "Ultimo aggiornamento...." alla fine del post o vicino ai commenti
    2) farlo comparire SOLO SE effettivamente un aggiornamento c'è stato, cioè senza far si che compaia data di pubblicazione e data di modifica (uguale a quella di pubblicazione se non 'cè modifica).

    Grazie in anticipo

    RispondiElimina
    Risposte
    1. La condizione di mostrare data e ora di aggiornamento solo se questo è stato effettivamente fatto non saprei come inserirla ma non escludo che uno più bravo di me ci riesca.
      Per il posizionamento in altro punto del layout invece si può fare. Devi copiare il codice a partire da <span style='float:right; font-size:10px !important; color:#191919 !important; line-height:10px;'>Aggiornato il<span ...
      Salvi il modello per sicurezza e cerchi la riga
      <b:includable id='main' var='top'>
      scorri il codice verso il basso fino a trovare
      <span class='post-author vcard'>
      quindi provi a incollarlo subito sotto e ovviamente salvi il Tema.
      @#

      Elimina
    2. Tralasci anche l'ultimo tag < h2 >
      @#

      Elimina
    3. Grazie Ernesto, ho risolto tutto e funziona perfettamente! Unica cosa vorrei modificare il timezone, dovrei inserire +2 per l'ora italiana, ma non riesco a settare correttamente i parametri. Hai per caso qualche suggerimento? grazie ancora per il prezioso aiuto.

      Elimina
    4. Cambia il Fuso orario nelle impostazioni
      @#

      Elimina
    5. Grazie, scusami....ma non riesco a trovare i parametri che dici...

      Elimina
    6. Vai su Bacheca -> Impostazioni -> Lingua e formattazione -> Fuso orario
      @#

      Elimina
    7. Grazie Ernesto per l'aiuto, ho imposta l'ora +1 per l'Italia, ma mi aggiorna sempre a due ore indietro, si vede che dipende dallo script forse, non saprei...

      Elimina
  5. Anche io ho avuto un problema simile per l'ora del computer. Da questo script non dipende di sicuro perché c'è solo il giorno.
    Forse è il modello scaricato da internet con impostazioni di altro paese. Puoi comunque scegliere un fuso orario sfalsato di due ore
    @#

    RispondiElimina
    Risposte
    1. Ho provato da impostazioni ad inserire +2 come fuso orario, ma prende sempre la stessa ora. Cmq questo script ha anche hh e mm come definito nelle variabili.

      Elimina
  6. Ottima funzione però ho orovato ad inserirla e ho notato che il "pubblicato" rimane a sinistra mentre "aggiornato" finisce all'estrema destra.
    Io lo vorrei come il tuo, come posso fare per diminuire la distanza tra i due?
    Ti ringrazio.

    RispondiElimina
    Risposte
    1. Bisogna provare e riprovare a cambiare i vari parametri. A seconda del modello bisogna aggiungere dei correttivi per mettere i due dati sulla stessa linea
      @#

      Elimina
    2. ma sempre all'interno di quel codice?Substring, quella cosa lì?

      Elimina
    3. @# Tanto per fare un esempio nel mio modello ho questo codice

      <h2 class='date-header'><span style='font-size:10px !important; color:#191919 !important; line-height:10px;'> Pubblicato il 10/11/16</span><span style='font-size:10px !important; color:#191919 !important; line-height:10px;'>&#160;-&#160;aggiornato il
      <span id='post-update-8359495503121607671' style='font-size:10px !important; color:#191919 !important; line-height:10px;' title='2016-11-10T10:23:35Z'></span>&#160;|
      </span><span class='comments' id='comments' style='font-size:10px !important; color:#191919 !important; line-height:10px;'>

      Elimina
    4. ok, grazie, lo confronterò con il mio e vedrò di capire la differenza.

      Elimina
    5. Ora ho capito, in pratica ad un certo punto del codice c'è scritto "float:right;". Ho tolto quello e ora è perfetto. Grazie ancora

      Elimina
  7. No. All'interno del campo di style per pubblicato e per aggiornato
    @#

    RispondiElimina
  8. Ciao Ernesto, è possibile inserire il nome dei mesi anzichè il numero del mese, per intenderci Luglio anzichè 07? grazie

    RispondiElimina
    Risposte
    1. Nei post è possibile scegliere lo stile della data. In questo caso no perché il javascript utilizzato prevede solo questo stile di data. Più precisamente in substring viene calcolata la posizione di ogni elemento che se si mette il nome invece del numero non può più funzionare.
      @#

      Elimina
  9. Ciao Ernesto, immaginavo...
    io trovato un altro codice se mi dici dove inviartelo te lo giro.

    Ma mi stampa la data in formato "Mese Giorno, Anno"

    Riesci a farla stampare come Giorno Mese Anno?

    RispondiElimina

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