Pubblicato il 25/07/14 - aggiornato il  | 17 commenti :

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

calendario-data

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

sezione-alta-del-blog

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

calendario-data-blogger

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ì
calendario-data-blogger[5]

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


17 commenti :

  1. salve, perdonate se pongo la domanda qui anche se non è attinente al blog..ma esiste un modo per rimuovere disquis da blogger e utilizzare il sistema di commenti proprio di blogger?
    grazie e scusate il disturbo!

    RispondiElimina
    Risposte
    1. Certo. Basta effettuare il procedimento inverso a quando lo hai inserito. Se non te lo ricordi leggi qua
      http://www.ideepercomputeredinternet.com/2011/05/come-integrare-disqus-per-gestire-i.html
      Se non ti riesce ugualmente, procedci in questo modo
      1) Salvi il modello
      2) Vai su Layout e elimini l'elemento pagina Disqus andando su Modifica quindi su Rimuovi
      3) Se non basta vai su Modello > Modifica HTML e cerca Disqus con Ctrl+F
      4) Troverai un widget che inizierà così
      < b:widget id='HTML...' locked='false' title='Disqus...
      5) Devi camcellare tutto il codice da < b:widget fino alla chiusura /b:widget >

      @#

      Elimina
    2. La ringrazio, veramente gentile!
      Appena trovo tempo..proverò!
      Immagino però che se rimuovo diquis di conseguenza verranno cancellati tutti i commenti giusto?
      Esiste un modo per permettere a chiunque di commentare..anche a chi non è iscritto a blogger o google+?
      La ringrazio per la disponibilità e mi scuso per il disturbo!

      Elimina
    3. Puoi lasciare la possibilità anche di commentare in modo anonimo se vuoi. Vai in Impostazioni > Post e commenti > Chi può inserire commenti
      @#

      Elimina
  2. Ciao Ernesto, prima di tutto ti faccio i complimenti per questo tuo blog diventato ormai una guida preziosa dai contenuti sempre più utili e interessanti. Poi volevo ringraziarti per la tua professionalità e grande disponibilità verso tutti.
    Tornando all'argomento del post...volevo chiederti se è possibile spostare la data a destra del titolo del post, perché io ad esempio, io ho sia la data che la miniatura dell'anticipazione della prima foto, entrambe a sinistra del titolo del post e mi sembra che insieme stiano male. Mi piacerebbe appunto dividerle, spostando la data a destra. Come posso fare?
    Grazie mille e a presto.
    Emanuela
    e-manualmente blog

    RispondiElimina
    Risposte
    1. È difficle dire. In questo momento non posso testare. Prova in questo blocco di codice

      width:60px;
      height:60px;
      float: left;
      margin: 5px 6px 1 0px;

      a sostituire left con right però non sono in grado di dirti se funzionerà o meno.

      @#

      Elimina
    2. Grazie mille Ernesto! Appena posso ci provo e ti faccio sapere.
      A presto.
      Emanuela

      Elimina
  3. Ciao Ernesto posso chiederti un consiglio ? Io avevo centrato titolo post e data. Ora mi piacerebbe cambiare e tornare ad avere entrambe a sinistra, ho provato cambiando in modifica HTML da center a left, per il titolo post ci sono riuscita, mentre per la data, ho un problemino, nelle anteprime me la visualizza perfettamente allineata, nel blog la decentra e non capisco l motivo, anche cambiando il formato della data, resta sempre così, potresti darmi un consiglio su come risolvere il problema ? Grazie infinite

    RispondiElimina
    Risposte
    1. Per eventuali algtre domande ricordati di incollare l'URL del tuo sito perché non ho doti divinatorie e non posso conoscere il problema senza osservarlo direttamente. In questo sito
      http://www.mapetithome.com/2014/07/etereo-e-delicato-blog-design-per-le.html
      ho visto che il codice della data è giusto per l'allinemanto a sinistra

      h2.date-header {
      text-align: left;
      }
      @#

      Elimina
  4. E' possibile cambiare il tipo di scrittura della data, senza però cambiare l'intero testo della pagina?
    Grazie!

    RispondiElimina
  5. Se hai un modello ufficiale puoi andare su Personalizza > Avanzato > Intestazione data e modificare i colori del testo e dello sfondo. Se hai un template scaricato da internet puoi chiedere al suo autore
    @#

    RispondiElimina
  6. Ciao Ernesto, volevo chiederti se è possibile allineare l'icona del calendario al titolo del post in modo che vengano alla stessa altezza. Se guardi il mio blog l'icona è più alta rispetto al titolo. Vorrei che venisse alla stessa altezza perchè mi sembra esteticamente migliore.
    Ho provato a modificare i valori in marging e padding ma non ci sono riuscito- Intanto grazie.
    Il mio blog è questo:
    http://runnerinvenice.blogspot.com

    RispondiElimina
    Risposte
    1. Prova a sostituire
      margin: 5px 6px 1 0px;
      con
      margin: 20px 6px 1 0px;

      per abbassare il calendario poi può darsi che tu debba intervenire anche con le altre distanze comunque il risultato mi sembra già buono. Ricordati di salvare il template
      @#

      Elimina
    2. Grazie Ernesto, ho provato ma non succede niente, non si sposta....boh

      Elimina
  7. Ciao Ernesto grazie per la guida, vorrei sapere gentilmente se è possibile spostare semplicemente la data originale di blogger tutta a destra anziché a sinistra. Grazie Jack

    RispondiElimina
    Risposte
    1. Mantenendo quindi la data come la offre Blogger

      Elimina
    2. Se ho capito bene vorresti solo spostare la data a destra. Non te lo posso spiegare in un commento ma visto che il tema potrebbe interessare altri ci farò un post subito. Seguimi
      @#

      Elimina

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