Come inserire un calendario con la data prima dei titoli degli articoli in Blogger.

Come ho già detto più volte sono tutt’altro che bravo nei programmi di grafica quindi l’immagine del calendario che sono riuscito a creare, scopiazzandola anche un po’, lo ammetto, è visibile nel mio account Skydrive

• Immagine di sottofondo del calendario -

Il colore in alto ha il codice #940F04 che è poi quello dei colori del mio blog (pubblicità, menù, ecc.). Il colore del giorno e dell’anno è #191919 che è quello del testo del blog, mentre quello del mese è #FFFFFF che è il colore del testo delle voci principali del menù espandibile. Volendo naturalmente si può scegliere un’altra immagine con colori diversi . Si può crearla anche di diverse dimensioni, chiaramente poi le scritte dovranno essere centrate agendo sui pixel dei margini che verranno introdotti nel modello. Ecco l’aspetto di questo articolo dopo la pubblicazione e l’inserimento di questo nuovo formato per la data

Se volete anche voi crearvi questa personalizzazione o comunque una che segua questa falsariga dovete innanzitutto avere qualche accorgimento

1. Salvare il modello prima di iniziare le modifiche
2. Ricordarsi che le personalizzazioni su modelli già ampiamente personalizzati non sempre riescono
3. Andare su Impostazioni > Formattazione > Formato intestazione data e scegliere come tipo di formattazione “27 Agosto 2009” (o analoga ovviamente visto che cambia data con il passare dei giorni), quindi Salvare le impostazioni

 

Andate su Layout > Modifica HTML > Espandete i modelli widget e cercate la seguente riga di codice

<data:post.dateHeader/>

e rimpiazzatela con quest’altro codice

<div id='date'>
<script> replace_date(&#39;<data:post.dateHeader/>&#39;);
</script>
</div>

come mostrato nei seguenti screenshot

      

 

E’ il momento di cercare la riga di codice

</head>

e immediatamente sopra incollarci il seguente codice

<style>
/* To view the year change the &quot;none&quot; to &quot;block&quot; */
#date {
display: block;
float:left;
margin: 3px 5px 0px 3px;
padding: 1px 15px 15px 10px;
color: #191919;
background: transparent url(http://fb647g.blu.livefilestore.com/y1pjzptE7uMRyG3-K1Owt2wNqvynVCtdvteimQAVeajge06cXQGMhl3p6Kiuk8HPRtgNjJ0N18U7UBY7UN5ndWGQi2KAjC7xR7-/Calendario5.png) no-repeat;
border: 0;
text-transform: uppercase;
}

.month {
margin: 0px 5px 0px 5px;
color: #ffffff;
display: block;
font-size: 16px;
font-weight:bold;
}

.year {
margin: 0px 5px 0px 4px;
display: block;
font-size: 14px;
}

.day {
margin: 5px 5px 0px 7px;
display: block;
font-size: 22px;
font-weight:bold;
}
</style>

I dati scritti in rosso possono essere personalizzati, oltre ad altri ovviamente che mi sembrano però non essenziali. Il tag margin indica i margini che deve avere quel determinato elemento nel layout;  operando quindi con questi numeri possiamo centrare il mese, giorno e anno all’interno dell’immagine di background (month, day, year) e possiamo spostare il calendario con precisione nel punto che ci piace di più, ovviamente sempre sulla sinistra del titolo del post.

Se vi piace sulla destra basta sostituire left con right però, in questo caso, bisogna riconsiderare tutti i margini. Ricordo che i quatto numeri che seguono il tag margin rappresentano la distanza che deve intercorrere con i vari lati del layout. Il primo numero rappresenta la distanza dall’alto, il secondo dalla parte destra, il terzo dal basso e il quarto dalla parte sinistra. Si parte cioè dall’alto per poi spostarci in senso orario nelle quattro direzioni. I numeri associati al primo tag margin sono quelli relativi all’immagine di sottofondo per posizionarla al meglio, mentre gli altri rappresentano le distanze di mese, anno e giorno all’interno dell’immagine stessa. Il lunghissimo URL scritto in rosso rappresenta naturalmente il background del calendario ed è l’indirizzo dell’immagine di cui ho parlato all’inizio del post.

Sono importanti anche le dimensioni dei font dei caratteri con cui verranno visualizzati i tre dati (rispettivamente 16px, 14px, 22px). Ecco lo screenshot relativo all’introduzione di questo codice nel modello di questo blog

E’ il momento di cercare la riga di codice

<body> 

e, immediatamente sotto, bisogna incollare il seguente script

<!--sfondo immagine data-->
<script>
function replace_date(d)
{
var da = d.split(&#39; &#39;);
month = &quot;<div class='month'>&quot;+da[1].slice(0,3)+&quot;</div>&quot;;
day = &quot;<div class='day'>&quot;+da[0]+&quot;</div>&quot;;
year = &quot;<div class='year'>&quot;+da[2]+&quot;</div>&quot;;
document.write(month+day+year);
}
</script>
<!--sfondo immagine data-->

come mostrato in questo screenshot

Non abbiamo ancora terminato perché dobbiamo togliere l’intestazione della data che c’era precedentemente nel nostro blog. Questa varierà da modello a modello e sarà di questa forma

h2.date-header {
  border-bottom: none;
  font-size: 130%;
  text-align:$startSide;
  margin-top:20px;
  margin-bottom:14px;
  padding:1px;
  padding-$startSide:17px;
  color:  #003366;
  font-weight: large;
  font-family: Trebuchet MS, Verdana, Sans-serif;
  background-color: #FDBCB7;
}

Potrà essere anche molto diversa ma inizierà certamente con la riga h2.date-header { e terminerà con la parentesi graffa di chiusura dello stile. Tutto questo blocco di codice va semplicemente eliminato; vi consiglio di copiarlo e di salvarlo in un file di testo per eventualmente ripristinarlo in un futuro. Occorre sempre essere prudenti e previdenti con i modelli .

Finalmente è giunto il momento di Salvare il template. Ho già controllato che questa personalizzazione funziona, oltre che con Firefox anche con Opera, Chrome e soprattutto con il famigerato Internet Explorer.

Aggiornamento: Per fare in modo che il numero del giorno sia sempre a due cifre occorre scegliere in Impostazioni > Formattazione il formato data con la virgola cioè del tipo 28 Agosto, 2009 contrariamente a quanto detto all’inizio del post. In questo modo il giorno sarà sempre centrato in mezzo all’immagine di background