Come sostituire la data del post con un calendario in Blogger.

Come mostrare un calendario con icona al posto della data e accanto al titolo nei blog di Blogger.

La grafica di tutti i modelli ufficiali di Blogger pone la data del post al di sopra del suo titolo e la mostra una sola volta quando si pubblichi più di un articolo al giorno. L'aspetto della data può essere personalizzato utilizzando i tool Ispeziona Elemento di Chrome o Analizza Elemento di Firefox.

La data può anche essere spostata sotto al titolo del post e in questo articolo vedremo come possa essere sostituita da un calendario. In Blogger ci sono diversi modi di configurare la data e prima di iniziare a modificare il modello dobbiamo scegliere quello giusto. Si va su Bacheca > Impostazioni > Lingua e formattazione > Formato intestazione data  e si sceglie il formato 20 Novembre 2015 oppure 20 nov 2015 quindi si va in alto su Salva impostazioni

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca questa riga di codice

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

Si scorre la pagina verso il basso fino a trovare questo nuovo blocco di codice

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

Si lascia la riga colorata di blu, si cancella la riga evidenziata di giallo e si sostituisce con

<div id='DataNuova'>
<script>cambiarData(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='DataNuova'>
<script>cambiarData(&#39;&#39;);</script>
</div>

in questo modo

Ora si cerca la riga </head> e, subito sopra, si incolla questo ultimo codice

<script type='text/javascript'>
//<![CDATA[
var Calendario;
function cambiarData(d){
if (d == "") {
d = Calendario;
}
var da = d.split(' ');
giorno = "<strong class='data_giorno'>"+da[0]+"</strong>";
mese = "<strong class='data_mese'>"+da[1].slice(0,3)+"</strong>";
anno = "<strong class='data_anno'>"+da[2]+"</strong>";
document.write(mese+giorno+anno);
Calendario = d;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'><style type='text/css'>
#DataNuova {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJmvwhxbY1K0JdhpgL09bU4VIqSPiC2o4bK9lR8GOMxw5xhKW1QPSessIDC1qtYSRsJhZmLhyphenhypheniUiU5Av8t95Q1LaVuyAzb7kg7WHBOxeu7JgXKB5fDRbLoE9nWvbDMr2vSoOjR2hiRyt8/w60-h59-no/calendario11.png) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 5px 6px 1px 0px;
padding: 0 4px 4px 0px; /* Distanziare calendario da post */border: 0;
text-transform: uppercase;
}
.data_mese {
display: block;
font-family: Georgia;
font-size: 15px;
font-weight:bold;
margin-top:-1px;text-align:center;
color:#191919; /* Personalizzazioni del mese */}
.data_giorno {
display: block;
font-family: Georgia;
font-size: 22px;
font-weight:bold;
margin-top:-9px;
text-align:center;
color:#191919; /* Personalizzazioni del giorno */}
.data_anno {
display: block;
font-family: Georgia;
font-size: 14px;
margin-top:-7px;
text-align:center;
color:#191919; /* Personalizzazioni dell'anno */
}
</style>
</b:if>

Finalmente si salva il modello. La data dei post prenderà questo aspetto

PERSONALIZZAZIONI DEL CALENDARIO DI BLOGGER

Lo sfondo del calendario è dato da una icona il cui URL è colorato di rosso. Si può scegliere anche una icona di colore diverso scegliendola nella cartella che ho zippato e caricato su Google Drive 

Download
Clicca qui

L'icona prescelta deve essere caricata su Picasa, se ne deve ottenere il link diretto e sostituirlo a quello del codice. Quando si personalizza il calendario la prima cosa da fare è quella di scegliere la famiglia di caratteri (Georgia) perché questo potrebbe modificare il posizionamento. Come seconda cosa si sceglie la dimensione dei font di ciascuno dei tre elementi del calendario.

Per il mese ho scelto font-size:15px;, per il giorno font-size: 22px; e per l'anno  font-size: 14px; mentre si possono scegliere anche codici dei colori diversi. Dopo queste operazioni si deve pensare al corretto posizionamento verticale di mese, giorno e data. Ho evidenziato rispettivamente di giallo, verde e beige il parametro per l'allineamento verticale. Per fare un esempio se il mese fosse troppo in basso rispetto alla icona si deve sostituire margin-top:-1px; con margin-top:-3px; mentre se fosse troppo in alto con margin-top:0px; o margin-top:1px;.

Le due righe evidenziate di grigio sono i tag condizionali che servono per non mostrare la data nelle pagine statiche come del resto è normale per i blog su Blogger. Le distanze del calendario dal resto del post sono invece determinate dalle due righe evidenziate di marrone.  Con il parametro margin: 5px 6px 1px 0px; è stata configurata una distanza di 5 pixel dalla parte alta, di 6 pixel dalla parte destra, di 1 pixel dal basso e di 0 pixel dalla sinistra. In sostanza con il tag margin si inizia con la direzione top per poi andare in senso orario con le atre tre direzioni. Se vogliamo per esempio aumentare la distanza del calendario dal titolo del post basterà modificare tale parametro con margin: 5px 10px 1px 0px; dove il valore cambiato è stato colorato di rosso.