Come personalizzare la data di Blogger per desktop e mobile.

Come personalizzare la data dei post di Blogger nella posizione, nei colori del testo e di sfondo, nella famiglia e nella dimensione dei caratteri, per la versione desktop e quella mobile modificando il template.

In calce a un post su come sostituire la data di Blogger con un calendario mi si chiede semplicemente di come spostarla sulla destra. Non è semplice spiegarlo in un commento quindi ho pensato di scrivere un post non solo su questa specifica modifica ma sulle altre principali personalizzazioni che si possono fare per la data operando sul modello di Blogger.

Prima di qualsiasi modifica al template di Blogger bisogna fare in modo di mettere in sicurezza le modifiche per un eventuale ripristino. Si va quindi in Bacheca -> Modello e si clicca su Backup/Ripristino in alto a destra quindi si clicca su Scarica Modello completo per scaricare il file del template in formato XML. Per un eventuale ripristino si clicca sempre su Modello -> Backup/Ripristino ma poi si va su Sceglie file e si seleziona il file .XML precedentemente scaricato per poi andare su Carica per ripristinarlo.

COME SPOSTARE LA DATA DI BLOGGER A DESTRA O AL CENTRO

La data di Blogger di default è mostrata sulla sinistra. Vediamo come si possa spostarla a destra o al centro. L'obiettivo è quello di ottenere un risultato come questo

Dopo aver salvato il template come illustrato in precedenza si va su Modello -> Modifica HTML e si cerca la sezione <b:skin> intorno alla decima riga. Si clicca sulla freccetta nera posta alla sua sinistra per visualizzarne tutto il codice che contiene. Si cerca l'ultima riga della sezione ]]></b:skin> con Ctrl+F quindi subito sopra a questa si incolla questo codice

h2.date-header {float:right; padding-right:12px;}
.post-title {padding-top:30px;}

Si salva il modello. Il tag float-right serve per posizionare la data sulla destra. Con padding-right:12px; si imposta la distanza della data dal margine destro mentre con padding-top:30px; si imposta la distanza tra data e titolo dell'articolo. I valori numerici sono puramente indicativi e possono essere modificati dopo aver testato questo codice sul proprio modello di Blogger.

Per posizionare la data al centro il codice da usare è invece il seguente

h2.date-header {text-align:center;}
.post-title {padding-top:10px;}

dove i 10 pixel indicano la distanza tra titolo e data. L'aspetto del post diventerà simile a questo

COME ALLINEARE A DESTRA O CENTRARE LA DATA NELLA VERSIONE MOBILE

Se volete avere la data sulla destra o centrata anche nella versione mobile di Blogger dovrete aggiungere un nuovo codice sempre sopra alla riga ]]></b:skin>. Per spostarla a destra il codice è

.mobile h2.date-header {float:right; padding-right:12px;}
.mobile .post-title {padding-top:30px;}

e produce questo risultato visivo con un iPhone 6 Plus

Anche per il mobile si possono modificare i parametri numerici colorati di rosso in modo indipendente da quelli del desktop. Per centrare la data si utilizza invece questo codice

.mobile h2.date-header {text-align:center;}
.mobile .post-title {padding-top:10px;}

con questo risultato ottenuto con Screenfly scegliendo sempre una visualizzazione da iPhone 6 Plus.

COME MODIFICARE COLORE E DIMENSIONE DELLA DATA

Oltre alla posizione si può modificare anche l'aspetto della data. In realtà con Blogger si potrebbe andare su Modello -> Personalizza per cambiare colori, font e dimensioni dei caratteri della data cliccando su Avanzato -> Intestazione Data. Se però abbiamo un modello molto personalizzato con questo sistema si potrebbero perdere le modifiche che abbiamo faticosamente introdotte. È quindi consigliabile operare sempre sul Modello aggiungendo dei CSS sempre subito sopra alla riga ]]></b:skin>.  Per esempio con questo codice possiamo inserire un colore di sfondo, modificare i font, il loro colore e la loro dimensione

.date-header span {
  background-color:#ddd !important;
  color:#f00 !important;
  font-family: Impact !important;
  font-size: 20px !important;
}

Dopo aver salvato il modello la data di Blogger da mobile avrà questo aspetto

Naturalmente si possono cambiare i parametri colorati di rosso per scegliere i codici dei colori e la famiglia di carattere che più si adattano al nostro layout. Un codice simile funziona anche per la modifica dell'aspetto della data nella versione mobile di Blogger

.mobile .date-header span {
  background-color:#ddd !important;
  color:#f00 !important;
  font-family: Impact !important;
  font-size: 20px !important;
}

che porta a questo risultato grafico



ottenuto sempre con Screenfly con visualizzazione da iPhone 6 Plus.