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 != "static_page"'>
<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 'Courier New', 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>
//<![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 != "static_page"'>
<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 'Courier New', 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('<data:post.dateHeader/>');</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate('');</script>
</div>
<script>changeDate('<data:post.dateHeader/>');</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate('');</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 :)
.jpg)
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à?
RispondiEliminaScusami Simona, so di essere una frana!
ciao Giorgia! No dove sta scritto #Date {.......... trovi 'background: #000' al posto degli zeri scrivi il codice del colore che desideri :)
EliminaOra ho capito Simona. Appena ho un attimo di tranquillità voglio provarci!
EliminaGrazie per la tua disponibilità :-)
Complimenti per la nuova grafica, simpaticissima!!!
RispondiEliminagrazie cara ^_^
EliminaSimona, a me continua a dispiacere questa cosa dello shop... davvero!
RispondiEliminaStavo 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!
Grazie Silvia, ma ormai mi sta quasi passando :D
Eliminaciao ti ho conosciuta attraverso il link BlogPal di Novembre , mi piace il tuo blog molto utile.
RispondiEliminaciao Maria Luisa, grazie mille per essere passata :)
EliminaCiao 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?
RispondiEliminaGrazie mille
Emanuela
Grazie Emanuela :D
EliminaIl 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 :)
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....
RispondiEliminaPoi 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
Grazie Alex *_* Sarà che io sono 'nata' con Wordpress e quindi sta cosa della data dovevo cambiarla per forza :D
EliminaMa 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?
Eliminasisi , 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 :(
EliminaWordpress è 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/
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?
RispondiEliminaGrazie 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
Grazie Emanuela *_* Beh, quel che è giusto, è giusto e Alex si merita davvero tutti i complimenti ;)
EliminaLa 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
Grazie Simona...sono un po' spaventata da tutti questi numeri, ma proverò e ti farò sapere.
EliminaUn abbraccio
Emanuela
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
EliminaGrazie Simona per questo tutorial, lo cercavo da tanto, ora spero di riuscirci perché il risultato è molto carino !
RispondiEliminaGrazie Carla, prova e dimmi se hai bisogno di aiuto :)
Eliminaeeee 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 ._.'
RispondiEliminasono felice che ti sia servito ^_^
EliminaHo utilizzato questo tutorial per abbellire il mio blog, è stato utilissimo e sono riuscita al primo colpo nonostante sia un pò imbranata con i codici!
RispondiEliminaTi 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
Grazie ancora per le tue belle parole :)
EliminaQuesto commento è stato eliminato dall'autore.
RispondiEliminaCiao Simona,
RispondiEliminagrazie 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
Ciao Ylenia!
EliminaDunque 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 :)
Questo commento è stato eliminato dall'autore.
RispondiEliminaCiao, io ne avrei uno fatto da un altro utente, con l'immagine l'ora e delle scritte che scorrono, come faccio?
RispondiEliminaCiao Alena, perdonami, ma non ho capito bene la domanda...vuoi la data che scorre?
EliminaCiao 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?
RispondiEliminaCiao Guja, grazie per i complimenti ^_^
EliminaQuando 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...
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!
RispondiEliminaHo 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?
Ciao Michela, grazie mille per il complimento :D
EliminaPer 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 ;)
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!
EliminaGrazie sei gentilissima *_*
EliminaPer 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 ;)
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 =)
EliminaMi fa piacere cara :D
EliminaGrazie sei stata gentilissima davvero!!! Ora anche io ho il famoso pallino hihihi!
RispondiEliminaGrazie ancora! ♥
Ciao, molto bello il blog, complimenti!
RispondiEliminaIo 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 :)
CiaoDebora, grazie mille ^_^ ♥
EliminaPer 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 ;)