immagin top

8.10.13

Blog design: Inserire la data come un calendario

8.10.13

Un po' di tempo fa, mi fu chiesto questo tutorial, ma per via del mio shop, nel quale avevo dato anche questo servizio, non avevo esaudito la richiesta... ora visto che lo shop non esiste più e che è difficle che mi venga fatta una richiesta del genere da una mia qualunque ex cliente straniera, eccomi qui che esaudisco tale richiesta.

Qual'era? Mi fu chiesto come inserire la data, così com'è presente nel mio blog.

Sembra difficile, ma in realtà è semplice se si segue passo, passo il procedimento, e senza paura.
Ricordate che prima di mettere mano bisogna fare il backup del proprio modello (ovvero salvarne una copia, ogni tanto fatene una anche del vostro blog, con i post i commenti...anzi finito lo faccio pure io!) e poi premendo CTRL+Z si può sempre fare qualche passo indietro all'interno del codice, cancellando le modifiche, ma funziona SOLO se non si chiude MAI la pagina delle modifiche dell'HTML.

Copia lo script qui sotto:

<script type='text/javascript'>
//<![CDATA[
var DateCalendar;
function changeDate(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
day = "<strong class='date_day'>"+da[0]+"</strong>";
year = "<strong class='date_year'>"+da[2]+"</strong>";
document.write(day+month+year);
DateCalendar = d;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Calendar style date
----------------------------------------------- */
#Date {
display: block;
width:40px;
height:40px;
border-radius: 100px;
-moz-border-radius:100px;
float: left;
margin: 5px 2px 0 -45px;
border: 0;
text-transform: uppercase;
position:absolute;
z-index:1;
padding:5px;
font:normal &#39;Courier New&#39;, Arial, Helvetica;
color:#ffffff;
font-size: 11px;
text-align:center;
background:#000;
}
.date_month {
display:block;
margin-top:-2px;
text-align:center;
line-height:100%;
}
.date_day {
text-align:center;
line-height:100%;
padding-top:-2px;
}
.date_year {
padding:0;
line-height:100%;
display:block;
text-align:center;

}
</style>
</b:if>

Da questo codice potete modificare lo sfondo del cerchio, cambiando il 'background' in #Date.

Vai in MODELLO -> MODIFICA HTML e incollalo come nell'immagine.

Dal pulsante 'Vai al widget' scegli 'Blog1'


Poi premi CTRL+F (per la ricerca veloce in una pagina) e cerca questa riga:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
Evidenzia la riga e sostituiscila con questo codice:
<div id='Date'>
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate(&#39;&#39;);</script>
</div>

Ultimo passo (altrimenti non si vede nulla) è andare in LAYOUT e cambiare lo stile della data, scegliendo la penultima.

PER APPROFONDIRE
In #Date trovi 'margin: 5px 2px 0 -45px;' ... questi valori indicano i margini di distanza che l'oggetto ha rispetto a ciò che lo circonda, e i riferimenti si muovono in senso orario: il primo si riferisce al margine verso in alto, il secondo a destra, il terzo in basso e il quarto a sinistra.
I valori in positivo e in negativo indicano quanto l'oggetto si sposta rispetto al punto indicato. Es. noi abbiamo il primo valore '5px' che riguarda il margine in alto; il valore in positivo allontanerà dal punto in alto di 5px l'oggetto (quindi lo vedrai abbassarsi)...il valore '0' lo riporterai nella sua posizione originale... il valore in negativo '-5px' lo sposterà all'interno verso ilpunto indicato (in questo caso lo vedrai alzarsi).

Se doveste avere problemi commentate pure :)

42 commenti:

  1. Mi piace questo tutorial! L'unica cosa non ho ben capito come cambiare colore: devo sostituire la parola background con # Date? E poi di che colore verrà?
    Scusami Simona, so di essere una frana!

    RispondiElimina
    Risposte
    1. ciao Giorgia! No dove sta scritto #Date {.......... trovi 'background: #000' al posto degli zeri scrivi il codice del colore che desideri :)

      Elimina
    2. Ora ho capito Simona. Appena ho un attimo di tranquillità voglio provarci!
      Grazie per la tua disponibilità :-)

      Elimina
  2. Complimenti per la nuova grafica, simpaticissima!!!

    RispondiElimina
  3. Simona, a me continua a dispiacere questa cosa dello shop... davvero!
    Stavo pensando di provare a mettere la data così come la proponi o comunque in modo molto simile, è proprio carina! Non mi piace quando la data prende tutta una riga, infatti sul mio blog l'avevo tolta del tutto...
    Ti ringrazio quindi per aver condiviso questo tutorial! Buona serata!

    RispondiElimina
    Risposte
    1. Grazie Silvia, ma ormai mi sta quasi passando :D

      Elimina
  4. ciao ti ho conosciuta attraverso il link BlogPal di Novembre , mi piace il tuo blog molto utile.

    RispondiElimina
    Risposte
    1. ciao Maria Luisa, grazie mille per essere passata :)

      Elimina
  5. Ciao Simona! bella la tua nuova grafica mi piace molto sei bravissima, la trovo molto originale! Grazie per aver condiviso con noi quest'altra "chicca" della data. Io ci volevo provare, ma ho visto che i miei codici htlm passano dall' 840 all' 871, che vuol dire? non ho il codice 867 e adesso come faccio? E' grave? Mi piaceva tanto l'idea di mettere la data in quel modo...potresti aiutarmi?
    Grazie mille
    Emanuela

    RispondiElimina
    Risposte
    1. Grazie Emanuela :D
      Il nuovo stile dei codici è un po' strano, ma in realtà lo è solo all'inizio, finchè non si capisce che a sinistra della riga c'è una freccina e che cliccandoci su il codice si espande :)

      Elimina
  6. Tu non sai quante prove ho fatto in passato per personalizzare la data dei miei post. Non la inserivo in un cerchietto come fai tu ma in una mini pagina di calendario. Nonostante i 2000 tutorial che ho provato a seguire, mi sembravano sempre bruttine e quindi lasciavo la mia data cosi' com'era....

    Poi pero' quando passavo dalle mie amiche in WordPress mi veniva su un nervoso a vedere la data post cosi bellina.. adesso finalmente posso personalizzarla, ed e' tutto grazie a te! Grazie Simona, sei un geniaccio dell'html!!!

    Mi hai messo di buon umore! Grazie mille! Alex

    RispondiElimina
    Risposte
    1. Grazie Alex *_* Sarà che io sono 'nata' con Wordpress e quindi sta cosa della data dovevo cambiarla per forza :D

      Elimina
    2. Ma davvero sei nata con WordPress? allora mi manca proprio una fetta del tuo passato... mi sembrava che anche l'altro tuo blog creativo, che poi hai accorpato a questo, fosse su piattaforma Blogger. Quindi parliamo di prima ancora?

      Elimina
    3. sisi , quello stava su Blogger, ma io quando lavoro uso Wordpress, ho pure un sacco di template fatti da me riposti in un angolo del mio pc :(
      Wordpress è stato il mio primo amore, mi piace modificarlo e anche stravolgerlo, come per esempio questo template che ho fatto qualche anno fa, per un blog/magazine nato per uno sfizio mio e di una mia amica... ne vado orgogliosa, ho preso un template e l'ho trasformato radicalmente :D.. ti lascio il link se volessi vederlo: http://trendyg.altervista.org/

      Elimina
  7. Sii! Simona, ci sono riuscita!!! L'unica cosa che non mi piace molto è che, mentre la tua data è allineata al titolo del post, la mia è un po' spostata verso il basso e non mi piace molto. Posso chiederti come fare?
    Grazie mille
    P.S. Vedere due maghe della grafica come te e Alex scambiarsi i complimenti è troppo bello!! Prima o poi vi dedicherò un post sul mio blog...promesso.
    Un grande abbraccio
    Emanuela

    RispondiElimina
    Risposte
    1. Grazie Emanuela *_* Beh, quel che è giusto, è giusto e Alex si merita davvero tutti i complimenti ;)
      La data è venuta bellissima sul tuo blog!!! Per alzarla e spostarla leggermente a sinistra (così non si sovrappone al titolo) devi fare così...
      In #Date trovi 'margin: 5px 2px 0 -45px;' ... questi valori indicano i margini di distanza che l'oggetto ha rispetto a ciò che lo circonda, e i riferimenti si muovono in senso orario: il primo si riferisce al margine verso in alto, il secondo a destra, il terzo in basso e il quarto a sinistra. (vedrò di aggiungere questa spiegazione anche al tutorial).
      I valori in positivo e in negativo indicano quanto l'oggetto si sposta rispetto al punto indicato. Es. noi abbiamo il primo valore '5px' che riguarda il margine in alto; il valore in positivo allontanerà dal punto in alto di 5px l'oggetto (quindi lo vedrai abbassarsi)...il valore '0' lo riporterai nella sua posizione originale... il valore in negativo '-5px' lo sposterà all'interno verso ilpunto indicato (in questo caso lo vedrai alzarsi).
      Detto ciò (per non complicarti la vita, ti suggerisco di inserire questi valori 'margin: 0 2px 0 -50px;'...
      vedi come va, in caso prova a fare le modifiche da sola, io ho imparato così :D

      Elimina
    2. Grazie Simona...sono un po' spaventata da tutti questi numeri, ma proverò e ti farò sapere.
      Un abbraccio
      Emanuela

      Elimina
    3. Grazie ragazze, anche se in ritardisismo di mesi fa paicre leggere le vostre parole. Grazie di cuore entrambe. Bacioni a Simona che e' bravissima e si vede! Alex

      Elimina
  8. Grazie Simona per questo tutorial, lo cercavo da tanto, ora spero di riuscirci perché il risultato è molto carino !

    RispondiElimina
    Risposte
    1. Grazie Carla, prova e dimmi se hai bisogno di aiuto :)

      Elimina
  9. eeee finalmente *_* grazie mille per questo tutorial!! In tanti siti di template ho trovato questo calendarietto simpaticissimo ma una volta che lo applicavo a blogger mi dava irrimediabilmente UNDEFINED, che odio ._.'

    RispondiElimina
  10. Ho utilizzato questo tutorial per abbellire il mio blog, è stato utilissimo e sono riuscita al primo colpo nonostante sia un pò imbranata con i codici!
    Ti ho ringraziata pubblicamente nel mio post di "ritorno":
    http://hobbyssimo.blogspot.it/2013/10/hobbyssimo2.0siricomincia.html
    Se vuoi fare un salto a vedere il risultato dei tuoi consigli ne sarei ben felice!
    Un bacio e ancora grazie!
    SimoQ

    RispondiElimina
    Risposte
    1. Grazie ancora per le tue belle parole :)

      Elimina
  11. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  12. Ciao Simona,
    grazie mille per questo tutorial! Non sai da quanto lo cercavo! Posso chiederti una cosuccia che proprio non riesco a capire?!
    Io vorrei avvicinare il testo al titolo, ossia eliminare gran parte dello spazio che c'è tra il titolo e l'inizio del post. Che valore devo cambiare? Perché li ho provati davvero tutti ma non si avvicina di un millimetro! Grazie mille anticipatamente! Ylenia

    RispondiElimina
    Risposte
    1. Ciao Ylenia!
      Dunque negli stili devi cercare la voce '.post-body '... all'interno della sua parentesi graffa devi aggiungere: ' margin-top: -20px; '
      Il valore numerico lo cambi a seconda di quanto vuoi ridurre lo spazio.
      Se non cambia nulla fammelo sapere, così vediamo di trovare la soluzione :)

      Elimina
  13. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  14. Ciao, io ne avrei uno fatto da un altro utente, con l'immagine l'ora e delle scritte che scorrono, come faccio?

    RispondiElimina
    Risposte
    1. Ciao Alena, perdonami, ma non ho capito bene la domanda...vuoi la data che scorre?

      Elimina
  15. Ciao Simona, complimenti per il blog. Ho deciso di modificare la grafica del mio blog e i tuoi tutorial sono veramente utili e ben fatti. Per questo tutorial però sono in difficoltà; sono bloccata perché non riesco a trovare la stringa (dopo aver selezionato "blog1")..dove sbaglio?

    RispondiElimina
    Risposte
    1. Ciao Guja, grazie per i complimenti ^_^
      Quando clicchi da quell'elenco ti riporta direttamente al gadget, e lo trovi non in mezzo alla pagina, in cima...non so se mi sono spiegata...

      Elimina
  16. Ciao Simona! che manna dal cielo il tuo blog..ti seguo sempre e ora che sto facendo dei lavori di restyling sul mio non posso che ringraziarti! Ho già inserito i link con un css e mi sono pure divertita a personalizzarlo!
    Ho però un piccolo problema che non riesco a risolverle in merito alla data...come faccio per fare il testo bianco?Ho provato a modificare la riga color all'interno del tuo scrip ma non succede niente...help?

    RispondiElimina
    Risposte
    1. Ciao Michela, grazie mille per il complimento :D
      Per il testo in realtà è già bianco, il codice è #fff (che sta appunto per bianco)... puoi linkarmi il blog se vuoi così gli dò un'occhiata, magari in una email se è di prova e non vuoi far vedere nulla ;)

      Elimina
    2. L'ho re-inserito e ora me lo da giusto,,chissà a volte..=) Ho anche ingrandito un pò il font ma così facendo non rimane centrato rispetto al tondo...posso modificarlo? su che parametri devo intervenire? Grazie mille..sei super!

      Elimina
    3. Grazie sei gentilissima *_*
      Per centrare nuovamente la data, beh devo essere sincera dovrei vederla, perchè ti potrei dire che modificando 'padding' nel blocco di #Date dovrebbe smuoversi qualcosa, ma se puoi mandami il link del blog di prova anche via email ;)

      Elimina
    4. Ti ringrazio! ma dovrei essere riuscita! e ti ringrazio anche che con i tuoi tutorial sono pure riuscita a farmi una presentazione come quella che ti avevo chiesto via mail, ho messo un pò in moto la materia grigia e direi che ce l'ho fatta!!! Grazie grazie grazie =)

      Elimina
  17. Grazie sei stata gentilissima davvero!!! Ora anche io ho il famoso pallino hihihi!
    Grazie ancora! ♥

    RispondiElimina
  18. Ciao, molto bello il blog, complimenti!
    Io volevo chiederti, (anche se non è attinente con questo post), come si fa ad inserire le linee grigie che separano i vari commenti, che vedo nel tuo blog.
    Vorrei inserirle esattamente come le tue.
    Ti ringrazio in anticipo, un bacio :)

    RispondiElimina
    Risposte
    1. CiaoDebora, grazie mille ^_^ ♥
      Per avere il bordo inferiore inserisci questo codice all'interno dei tuoi codici degli stili (CSS):

      #comments ol li {border-bottom: 2px solid #eee;padding:5px;}

      E' esattamente il mio codice ;)

      Elimina

I tuoi commenti sono un vero toccasana per il mio blog! Grazie per il tuo contributo :*