Pubblicato il 14/03/12e aggiornato il

Come mettere un calendario al posto della data in Blogger.

Avevo già postato un articolo su come sostituire la asettica data di Blogger con una immagine che somigliasse a un calendario ma è di due anni e mezzo fa quindi forse è il caso di pubblicare un nuovo post sull'argomento visto che da allora sono cambiati parecchio anche i codici del template di Blogger. Occorre innanzitutto avere abilitato la visualizzazione della data andando su Layout > Post sul blog > Modifica e aver messo la spunta alla data in Opzioni pagina di post.

opzioni-pagina-post

L'obiettivo è quello di mostrare in tutti gli articoli una data con questo aspetto

data-calendario

Per prima cosa bisogna andare su Modello > Backup/Ripristino e salvare il modello completo se le cose non andassero a buon fine e comunque per avere in una cartella sempre una copia del template con la vecchia data. Si va su Impostazioni > Lingua e formattazione > Formattazione e si setta il Formato intestazione data del tipo 14 Marzo 2012 come nello screenshot seguente

 

formato-intestazione-data

Ora si va su Modello > Modifica HTML > Procedi e si espandono i modelli widget. Si cerca la seguente linea di codice pigiando su F3 o su Ctrl+F

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

Attenzione che ce ne dovrebbero essere due di linee come questa. A noi interessa la seconda, quella che dovrebbe stare subito sotto l'altra riga

<b:if cond='data:post.dateHeader'>

Cancelliamo la riga colorata di rosso e la sostituiamo con questo blocco di codice

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

Adesso cerchiamo la riga </head> e, subito sopra incolliamo quest'altro 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://lh5.googleusercontent.com/-bg8A4gN0y-c/T2C1HcmP8GI/AAAAAAAAW04/5JhbqwBNhpE/s60/calendario04.png) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 5px 2px 0 0px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}
.data_mese {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#191919; /* Colore  mese */
}
.data_giorno {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#191919; /* Colore giorno */
}
.data_anno {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#191919; /* Colore anno */
}
</style>
</b:if>

dove i parametri da modificare sono colorati di rosso e hanno dei commenti in verde. Rappresentano i colori di mese, giorno e anno nel calendario e il margine a destra (0 di default) in cui inserire la data

data-blogger

Le dimensioni dei caratteri sono state calcolate in funzione della icona caricata su Picasa il cui URL può essere modificato. Si può scegliere un'altra icona scaricando questo file ZIP in cui ce ne sono 14 di forma simile ma di colori diversi per adattarsi a tutti i layout. Finalmente si Salva il modello e si vede che aspetto ha preso il nostro blog. Concludo ricordando che è presente un tag condizionale che ci permetterà di non visualizzare la data nelle pagine statiche. Questo articolo mi è stato ispirato da Ciudad Blogger di cui sono debitore anche delle icone del calendario.





16 commenti :

  1. Ciao Ernesto,
    di recente sono stata insignita del premio "Il Blog Affidabile" e avendo avuto la possibilità di menzionare altri 5 blog a cui assegnare il premio a mia volta, ho scelto il tuo. Qui trovi il mio articolo in proposito: http://recensionicosmetiche.blogspot.com/2012/03/recensioni-cosmetiche-premiato-da.html
    E qui invece trovi informazioni per capire meglio di cosa si tratta: http://www.gliaffidabili.it/a/altro/il-premio-il-blog-affidabile
    Sperando di aver fatto cosa gradita ti saluto e ti abbraccio.

    RispondiElimina
  2. @LaDamaBianca
    Grazie del graditissimo premio. Essere considerato "affidabile" è un bel complimento ^^

    RispondiElimina
  3. io mi perdo nel passaggio "adesso cerchiamo head"...

    RispondiElimina
    Risposte
    1. @Valy
      In Modello > Modifica HTML clicca su F3 e incolla nel rettangolo che si apre questo tag
      /head
      Vedrai che lo troverai immediatamente

      Elimina
  4. ho messo anche questo widget , per favore puoi controllare se è posizionato in modo corretto? grazie!

    RispondiElimina
    Risposte
    1. @Caterina
      Lo hai inserito in linea con il post. Prova a vedere come viene mettendolo più a sinistra cioè modificando la riga
      margin: 5px 2px 0 0px;
      con
      margin: 5px 2px 0 -25px;

      Elimina
    2. fatto guarda un po se adesso va!

      Elimina
    3. @Caterina
      Non lo so forse stava meglio prima :P
      Prova con
      margin: 5px 3px 0px -55px;

      Elimina
  5. stava malissimo e l'ho tolto , pace ,grazie comunque!

    RispondiElimina
  6. Scusami, vedo che questo è un post vecchio e probabilmente le cose sono cambiate, ma sto provando a seguire la procedura e al momento di cercare nell'html la stringa corrispondente alla data mi dice che non la trova!

    RispondiElimina
    Risposte
    1. Prova a cercare il codice con questa procedura
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      @#

      Elimina
  7. sarebbe possibile mettere la data di fianco (a sinistra) al titolo del post?

    RispondiElimina
    Risposte
    1. Tutto è possibile però dipende molto dal modello. La data può essere spostata sotto al post con questa procedura
      http://www.ideepercomputeredinternet.com/2013/05/data-under-post-title-blogger.html
      Poi per allinearla al titolo però le cose si complicano
      @#

      Elimina
    2. Si avevo già visto l'articolo sul come spostare la data sotto il titolo del post, ho provato anche a spostare lo stesso codice di cui si parla nell'articolo qua e là, ma non sono riuscito ad ottenere mai l'effetto data-titolo :(

      Elimina
    3. Sono riuscito a mettere sulla stessa linea il calendario prima del post del titolo semplicemente andando a modificare alcune le distanze nel css, dopo aver settato la voce position:absolute per il calendario

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.