Pubblicato il 27/08/09 - aggiornato il  | 11 commenti :

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

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

data-calendario-blogger

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

 

formato-intestazione-data

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

formato data       formato-data

 

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

image

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

data-script-modello

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 Smile.

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

formato-data

 



11 commenti :

  1. Ma come posso ringraziarti!!!!!!!!
    L'ho sempre detto ke sei un amico! Grazie di cuore x il messaggio.
    Non capisco cosa possa essere successo o x lo meno mi sorge un dubbio:avevo aperto l'altro giorno un blog x la classe ma avevo tenuto non disponobile il profilo ,ma solo x quel blog.
    Può essere stato questo? me lo ha nascosto su tutti?
    Infatti stasera lo ho reso visibile e nn so se si è messo tutto a posto.
    Non è ke potresti controllare?
    Povero Ernesto....quanto ti faccio lavorare!
    Almeno un bacione te lo meriti e te dono con tutto il cuore :-)
    Lella

    RispondiElimina
  2. complimenti, veramente bel post, fatto bene e ... utile. Data inserita nel mio blog.

    Ciao
    ferrOnline

    RispondiElimina
  3. per caso sai anche come duplicare la data se ci sono più post nello stesso giorno ?

    RispondiElimina
  4. @valemarie
    Se si apre un post la data si vede sempre. Non è visibile solo in Homepage quando ci sono più di un post al giorno, ma è una cosa irrilevante dato che la maggior parte dei visitatori arriva attraverso i singoli post.
    Comunque la risposta è "non lo so se c'è un metodo affidabile per inserirla sempre e comunque".
    Ciao

    RispondiElimina
  5. ci sono riuscita inserendo uno script. grazie

    RispondiElimina
  6. Seguo il tutorial però non compare l'immagine del calendario. la data si vede come se dovesse entrare nell'immagine però lo sfondo immagine nn si vede. consigli?

    RispondiElimina
  7. @Saverio92
    Anche io l'ho dovuto togliere dal blog perché dopo aver fatto una modifica non mi è stato più possibile ricaricarlo, nel senso che ha smesso di funzionare :-(
    Peccato perché è un widget bellissimo

    RispondiElimina
  8. e come mai nei tuoi post compare sempre la data? hai usato un altro metodo?

    RispondiElimina
  9. @Saverio92
    scusa credevo ti riferissi a questo post
    http://www.ideepercomputeredinternet.com/2009/12/il-fantastico-widget-dell-con-il.html
    delle volte rispondo ai commenti troppo velocemente :-(
    Non so perché non ti appaia l'immagine di sottofondo. Si trova qui
    http://fb647g.blu.livefilestore.com/y1pjzptE7uMRyG3-K1Owt2wNqvynVCtdvteimQAVeajge06cXQGMhl3p6Kiuk8HPRtgNjJ0N18U7UBY7UN5ndWGQi2KAjC7xR7-/Calendario5.png
    Puoi scaricarla, caricarla da un'altra parte, acquisire l'URL e sostituirlo. Come sai ci possono sempre essere delle incompatibilità nei vari modelli.
    Ciao

    RispondiElimina
  10. ho provato a ricaricare l'immagine ma nulla... la formattazione della data va bene ma non compare l'immagine del calendario. si vede che non è compatibile... non c'è un altro metodo per fare la stessa operazione?' e si potrebbe mettere u'icona ancge ai commenti?

    RispondiElimina
  11. @Saverio92
    Per le icone nei commenti prova a leggere qui
    http://www.ideepercomputeredinternet.com/2010/01/come-numerare-i-commenti-in-un-blog-su.html se ho interpretato bene quello che chiedi
    Poi ci sono molti modelli che hanno un calendario all'inizio del titolo. Si può scaricare uno di quelli senza altre personalizzazioni.
    Ciao

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy