Come mostrare un calendario invece della data in Blogger.

Come installare un calendario con sfondo personalizzato e che mostra giorno, mese e anno al posto della data nei blog di Blogger.

Nei modelli di Blogger indubbiamente la data è uno di quegli elementi per cui i programmatori di Google si sono meno impegnati per la loro realizzazione. Si tratta di una semplice riga con il numero del giorno, il nome del mese e il numero dell'anno. Molti webmaster propendono per un template scaricato da internet proprio per la maggiore accuratezza e qualità estetica della data.

Vediamo come sia possibile convertire la data classica presente in un template ufficiale di Blogger in una sorta di calendario multicolore. Il test di funzionamento l'ho fatto per il modello Semplice ma ritengo che possa funzionare anche per altri template di Blogger.

Prima di iniziare occorre come sempre salvare il template per questioni di sicurezza e per provvedere a un eventuale ripristino. Successivamente bisogna scegliere il formato di data specifico per questo hack. Recatevi su Impostazioni > Lingua e formattazione > Formattazione > Formato intestazione data e scegliete il formato con una data del tipo  25 Luglio 2014

Si va in alto a destra su Salva impostazioni qualora sia stato modificato il formato. Si va quindi su Modello > Modifica HTML e si cerca la riga <b:includable id='main' var='top'>. Si clicca eventualmente sulla freccetta nera posta a sinistra per visualizzare tutto il codice di questa sezione

Si scorre tale codice fino a trovare queste due righe 

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

Si cancella solo la riga colorata di rosso e si sostituisce con questo codice

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

come mostrato nel seguente screenshot

Ora si cerca la riga </head> e, subito sopra, si incolla questo nuovo 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 1 0px;
padding: 0 4px 4px 0px;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. Se ora si apre la homepage o un singolo post la data si mostrerà così

Possono essere modificati molti parametri. Per facilitare il lettore ho evidenziato di colori diversi i parametri per configurare il giorno, il mese e l'anno. Per ciascuno di questi elementi si può scegliere la famiglia di caratteri, la dimensione dei font e il colore. Attraverso il tag margin-top si può anche settare al meglio la loro posizione verticale. Le due righe evidenziate di grigio servono per distanziare l'icona del calendario dal resto del post. Ricordo che i tag margin e padding determinano rispettivamente le distanze esterne e interne dei vari elementi. I quattro numeri accanto a ciascun tag rappresentano la distanza dalla parte alta e delle altre tre direzioni procedendo in senso orario. 

L'icona il cui URL è colorato di rosso è lo sfondo del calendario. Si può scegliere una icona con un colore diverso scaricando questo file ZIP caricato su Google Drive

• Icone dello sfondo del calendario -

Tale file può essere scaricato e scompattato con 7-Zip o anche con il tool nativo di Windows 7 / 8 e contiene 14 sfondi di calendario con vari colori adatti per tutti i layout. Concludo ricordando che ci sono due tag condizionali colorati di viola per non mostrare calendario e data nelle Pagine.