Il titolo potrebbe essere considerato pleonastico perché i blog su Blogger stampano automaticamente la data insieme al titolo del post. In molti blog si è però deciso di eliminare la data degli articoli. Questo per non far sapere ai navigatori che i contenuti del post sono magari già vecchi. Questa operazione si può fare molto semplicemente andando su Design > Elementi pagina > Post sul blog > Modifica e togliendo la spunta alla data. Maggiori informazioni possono essere trovate nell'articolo che tratta di come configurare i post di Blogger.
In questo caso si può scegliere di visualizzare la data corrente in automatico in tutte le pagine del blog, magari in modo flottante. Aprite questo post di demo e guardate in alto a sinistra per avere una idea della cosa
Il procedimento di installazione è molto semplice. Come sempre si va su Design > Modifica HTML e si salva il modello completo per un eventuale backup di ripristino. Si espandono i modelli widget e si cercano i seguenti tag
<div id='header-wrapper'> oppure
<div id='header-inner'>
se si ha un vecchio modello. Mentre se si ha un template realizzato con il Designer Modelli la riga da cercare è quest'altra
<header>
Immediatamente sotto si incolla questo codice
<div class='DataDelGiorno'>
<p>
<script type='text/javascript'>
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Domenica","Lunedì","Martedì","Mercoledì","Giovedì","Venerdì","Sabato")
var montharray=new Array("Gennaio","Febbraio","Marzo","Aprile","Maggio","Giugno","Luglio","Agosto","Settembre","Ottobre","Novembre","Dicembre")
document.write("<p>"+dayarray[day]+", "+daym+" "+montharray[month]+" "+year+"</p>")
</script>
</p>
</div>
Si salva il modello. La data sarà visualizzata nella parte alta di tutte le pagine del blog. Se si vuole personalizzarne l'aspetto occorre inserire dei fogli di stile. Bisogna quindi cercare la riga ]]></b:skin> e, subito sopra, incollare un codice simile a questo
.DataDelGiorno p {
margin: 15px 0px 0px 10px ;
position:fixed;
color: #003366; /* colore del testo */
font-weight: bold; /* grassetto */
font-style: italic; /* corsivo */
font-size: 16px; /* dimensioni caratteri */
}
Ho inserito alcuni parametri per definire l'aspetto della data. Se ne possono aggiungere molti altri.
- I quattro numeri accanto a margin definiscono le quattro distanze partendo da quella in alto e proseguendo in senso orario. I due numeri colorati di rosso rappresentano quindi le distanze dalla parte alta e da quella sinistra.
- position:fixed; significa inserire la data in modo flottante. Quando si scorre la pagina, rimarrà sempre ancorata nella stessa posizione. Se non la vogliamo così basta semplicemente sopprimere la riga
- Per visualizzare la data senza grassetto e corsivo basta eliminare le righe corrispondenti
- Per modificare il colore della data consultate il post sui codici dei colori
- La dimensione dei caratteri può essere scelta a piacere
Dopo aver salvato nuovamente il modello, potremo vedere la data in tutte le pagine in modo automatico. Se si vuole mostrare la data solo in alcuni tipi di pagine del blog possiamo sempre usare i tag condizionali di Blogger.
Altri articoli che potrebbero interessarti e che riguardano personalizzazioni della data su Blogger sono:
Ciao, senti io ho la data sul mio sito, è in automatcio, vorrei ridurne la grandezza ma ogni modifica che faccio è collegata ai widget, aumento grandezza widget e aumenta pure la data. sono collegati, come scorporare la data dei widget per modificarla liberamente? ho provato ad inserie size font ma non mi da effetti.
RispondiEliminaGrazie per consigli
@Alez
RispondiEliminaProva a modificare le dimensioni in questo blocco
h2 {
margin: 0 0 1em 0;
font: normal bold 16px Calibri;
color: #4b78ff;
text-transform: uppercase;
}
modificando i 16px.
P.S. Non so se funzionerà.