16 maggio 2010

Come usare dei caratteri originali per il nostro blog su Blogger.

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

windows-live-writer-font

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

kernest-font

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

embed-font

Si aprirà una finestra in cui inserire l'URL del blog che vogliamo personalizzare con questi font

kernest-urlDa notare che si possono inserire tutti gli URL che vogliamo inserendo un altro indirizzo e cliccando su Add. Per ottenere il codice da incollare nel modello bisogna andare su Embed Code

embed-code

Saranno finalmente disponibili i fogli di stile da inserire nel templatefogli-di-stile

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

codice-kernest-2

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

font-familyin cui la parte evidenziata di giallo è quella che è stata aggiunta. Se adesso andate nel mio blog di prova vedrete che i titoli dei post hanno i caratteri della famiglia "Chunk"

caratteri-chunk

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 -



19 commenti:

  1. 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
  2. @Edina
    Vuoi 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

    RispondiElimina
  3. Grazie parsifal, oggi provo!
    Se volessi cambiarli tutti, sarebbe più semplice?

    RispondiElimina
  4. @edina
    prova 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

    RispondiElimina
  5. 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?
    grazie e scusa, ciao

    RispondiElimina
  6. @Edina Regina
    Sono i misteri dei browser :-) Ci fosse una cosa che va bene per tutti ^_^

    RispondiElimina
  7. 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??
    Grazie

    RispondiElimina
  8. @Lia
    Sono 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

    RispondiElimina
  9. 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?

    RispondiElimina
  10. scusa volevo dire il titolo del post...

    RispondiElimina
  11. @aurore
    Hai 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

    RispondiElimina
  12. non c'è la parentesi graffa ma questo: selector="h3.post-title, h4, h3.post-title a">

    ho provato ad inserilo insieme al nome degli altri caratteri ma niente...

    RispondiElimina
  13. @Aurore
    ho 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

    RispondiElimina
  14. 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
  15. @aurore
    Non 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

    RispondiElimina
  16. dopo un po' di tentativi ci sono riuscita, grazie mille!!

    RispondiElimina
  17. Ciao,
    é 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

    RispondiElimina
  18. @La Fra
    Il 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'è)

    RispondiElimina
  19. Ciao,
    si 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.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.