Pubblicato il 10/11/16e aggiornato il

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.




6 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

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.