Dopo un certo tempo di inattività è finalmente tornata @Amanda Fazani, la ragazza di Sheffield (UK) che ha fatto del suo Blogger Buster una specie di Bibbia per tutti gli utenti di questa piattaforma. Dopo aver dichiarato la bancarotta della posta elettronica per le migliaia di messaggi inevasi e aver cambiato modello in seguito a problemi di hosting è tornata con un articolo interessantissimo che mi permetto di riproporre ai lettori italiani.
Se si utilizza Windows Live Writer siamo in grado di scrivere post con una notevole scelta di caratteri. E' sufficiente andare su Formato > Carattere e selezionare la famiglia di font con cui vogliamo scrivere l'articolo
Nel caso in cui si volessero utilizzare dei font non standard, non solo per il corpo dell'articolo ma anche per il titolo, la data, il footer, il titolo dei widget, il testo della sidebar, ecc si può seguire il seguente procedimento.
Occorre andare nel sito Kernest e cercare i font che fanno al caso nostro. Ce ne sono di gratuiti e a pagamento
Si possono cercare con l'apposita barra, cliccando su le liste dei più popolari o scegliendoli per categoria. Amanda ce ne consiglia alcuni
Bisogna registrarsi al sito andando in questa pagina e inserendo email e password. Dopo essersi loggati e aver scelto i font occorre cliccare su Embed subito sotto alla demo dei caratteri
Si aprirà una finestra in cui inserire l'URL del blog che vogliamo personalizzare con questi font
Saranno finalmente disponibili i fogli di stile da inserire nel template
La prima parte del codice dovrà essere inserita nella sezione <head>. Si può cercare la riga </head> e incollarla subito sopra, come mostrato nello screenshot
Adesso dobbiamo decidere dove utilizzare questa nuova famiglia di caratteri. A seconda della scelta dobbiamo inserire il nome della famiglia nella zona del template che ci interessa. Ecco una tabella esplicativa
| DESCRIZIONE | RIFERIMENTO |
| Titolo e descrizione | #header |
| Titolo del blog | h1> |
| Titolo dei post | post-title |
| Testo del post | post-body |
| Titolo sidebar | #sidebar h2 |
| Testo della sidebar | #sidebar .widget-content |
| Footer | .footer |
Questi riferimenti devono essere considerati come puramente indicativi perché la sezione in cui intervenire può presentare anche codici diversi da questi per la grande varietà di modelli di Blogger esistenti. La seconda parte del codice che ho acquisito da Kernest era questa
/* Chunk */
font-family: 'Chunk';
line-height: 140%;
per fare in modo di cambiare i caratteri del titolo del post sono intervenuto in questo CSS
Nulla vieta di inserire caratteri diversi per titolo, corpo del testo, titolo del widget, data, ecc. Una personalizzazione veramente cool per i blog che fanno della grafica la loro arma vincente.
Fonte | Blogger Buster -
vale anche per i blog fatti con il designer di blogger in draft??? ho scaricato i codici ed uo aggiunto la prima parte sopra il tag /head ma poi nn riesco a proseguire...
RispondiElimina@Edina
RispondiEliminaVuoi cambiare i caratteri del titolo dell'articolo, del testo dell'articolo, dell'header oppure di tutti?
Ho guardato un po' il codice del tuo blog e ho trovato queste righe
h3.post-title {
.post-body {
.post-footer {
subito sotto una di queste righe, a seconda di quello che vuoi fare, puoi inserire la riga
font-family: 'Chunk';
dove al posto di Chunk metti il nome del font che hai ottenuto insieme alla prima parte del codice.
Ciao
P.S.
Salva sempre il modello prima di procedere a queste modifiche per questioni di sicurezza.
Ciao
Grazie parsifal, oggi provo!
RispondiEliminaSe volessi cambiarli tutti, sarebbe più semplice?
@edina
RispondiEliminaprova con uno, vedi cosa ti cambia, poi magari ne aggiungi un altro e così via. Il problema è che per ogni template c'è un codice diverso e devi capire da sola dove inserire la riga. Comunque le indicazioni dell'articolo e del mio commento dovrebbero essere sufficienti.
Ciao
ce l'ho fatta in entrambi i miei blog (ho usato i caratteri di kernest), la font family va aggiunta nelle variabili... però sai dirmi perchè con firefox si vede il nuovo carattere e con chrome no?
RispondiEliminagrazie e scusa, ciao
@Edina Regina
RispondiEliminaSono i misteri dei browser :-) Ci fosse una cosa che va bene per tutti ^_^
Eccomi di fronte a questo problema, il cambio dei caratteri solo del titolo, per me sta diventando una sfida e con calma cedo che ce la potrò fare, ho girato un po' nella rete e il tuo è l'articolo più chiaro e semplice da seguire ma, io vorrei come carattere il bradley hand id, banalmente, come posso inserirlo??
RispondiEliminaGrazie
@Lia
RispondiEliminaSono caratteri che non conosco. Se non ci sono su Windows Live Writer, prova a inserirli in Blogger. Ti posto questi due link
http://www.ideepercomputeredinternet.com/2009/05/come-scaricare-gratis-migliaia-di-nuovi.html
http://www.ideepercomputeredinternet.com/2010/05/come-usare-i-nuovi-caratteri-di-google.html
Ciao
ho seguito tutte le tue indicazione e fino all'inserimento del link sopra l'head è andato tutto bene ma poi non riesco a inserire il css per cambiare il titolo del blog, forse perchè utilizzo un modello blogger?
RispondiEliminascusa volevo dire il titolo del post...
RispondiElimina@aurore
RispondiEliminaHai trovato una riga simile a
.post h3 {
se è così e non funziona l'inserimento della famiglia di font es:
font-family: 'Chunk';
prova a forzare il codice inserendo una cosa tipo questa
font-family: 'Chunk'; !important;
dove metti ovviamente il nome del font che hai caricato
non c'è la parentesi graffa ma questo: selector="h3.post-title, h4, h3.post-title a">
RispondiEliminaho provato ad inserilo insieme al nome degli altri caratteri ma niente...
@Aurore
RispondiEliminaho analizzato la sorgente pagina di questo blog http://sweethandicrafts.blogspot.com/. Ho trovato questo blocco di codice:
h3.post-title {
margin: 0;
font: normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
}
prova a inserire prima della riga con font quella con font-family con il nome dei caratteri.
Ciao
vorrei farlo sul mio altro blog, comunque è la stessa cosa, ho fatto come mi hai detto ma mi da errore. non so più che fare, forse è il modello che blocca l'aggiunta di altri caratteri?
RispondiElimina@aurore
RispondiEliminaNon ti può dare errore a aggiungere quella riga. L'errore se mai te lo dà quando inserisci il codice prima di < /head >. Se è questo il caso inserisci una slash, cioè una barra come questa / prima del tag > che è quello che conclude lo script.
Se invece di dà errore quando metti la riga nei CSS cioè in quel blocco di codice che inizia con
h3.post-title {
è cosa veramente strana che non mi so spiegare
dopo un po' di tentativi ci sono riuscita, grazie mille!!
RispondiEliminaCiao,
RispondiEliminaé da tempo che cercavo un sistema per utilizzare il mio carattere preferito in tutto il blog, titoli compresi.
Ho trovato solo il modo di utilizzarlo per il testo dei post, ma devo ogni volta che scrivo un post inserire la stringa.
Il metodo da te indicato mi sembra molto più efficace... se non fosse che il sito coi fonts che hai segnalato ne avra un milione e guardarli uno ad uno è un'impresa biblica... Il carattere che uso sempre è Century Gothic, che è molto simile al Geosans Light. Inserendo i nomi nel motore di ricerca di quel sito non me li trova. Magari all'interno c'è qualche font simile, ma come trovarlo??
Conosci un modo che possa accelerare la ricerca??
So che è una domanda da un milione di dollari... ;-)
Grazie in anticipo per la risposta!
La Fra
@La Fra
RispondiEliminaIl Century Gothic credo sia riconosciuto dai browser più importanti. Prova a sostituirlo a Arial, Trebuchet o quello che è nel tuo modello dove vedi. Cioè al posto di
font-family: ... ;
sostituisci
font-family: Century Gothic;
Dovrebbe funzionare. Alternativamente vai su Design > Designer Modelli > Avanzato e scegli uno tra quelli presenti (quello che cerchi tu però non c'è)
Ciao,
RispondiEliminasi ho provato e funziona, solo che alla fine non mi piace l'effetto di quel carattere su tutto il blog... andava provato per averne la certezza!
Grazie.