sabato 5 gennaio 2013

Come cambiare il font di un post in Blogger e sostituirlo con uno originale


Approfitto di una richiesta che mi ha fatto la mia carissima amica e novella blogger, Alessandra (trovate il suo blog-diario qui), e che ho esaudito con piacere. Tempo fa Ale mi chiedeva appunto come cambiare il carattere dei post di Blogger e mettere un font che non è fra quelli indicati nei modelli. Sono stata un po' lì a pensarci, poi ho provato varie indicazioni trovate sui blog specifici d'informatica e alla fine ci sono riuscita e...col mio aiuto ci è riuscita anche Alessandra! Se date infatti un'occhiata al suo blog, vi potrete rendere conto del font carino e originale che ha scelto.
 Ecco a voi come si fa.
Diciamo innanzitutto che sul web esiste un database di 613 famiglie di fonts diversi, chiamato Google fonts directory, che trovate al seguente indirizzo:


Andando su questa pagina troverete subito tutti i vari fonts e fra questi sicuramente c'è quello che fa al caso vostro (sono 613, cavolo!). Ci sono varie opzioni di ricerca dei fonts, provatele se credete, io non mi dilungherò qui più di tanto. Andiamo invece subito dritto alla procedura.

Trovato il font di vostro gradimento, cliccate in basso a dx  su "Quick-use", nel riquadro del vostro font, vi si aprirà una nuova pagina dove viene spiegata in 4 semplici steps la procedura per prelevare e inserire il font nel vostro blog:  i primi due steps riguardano lo stile del font, ma qui li salto perché quello che a noi interessa è lo step 3 dove dice "Add this code to your website". Dovete appunto copiare il codice che c'è lì e incollarlo nella pagina del codice html del vostro blog. Come si fa?

Andate in Design/modello poi cliccate su Modifica HTML. Vi si aprirà la pagina con il codice del vostro blog. Ora incollate il codice che avete copiato, subito dopo la parola <Head>, la  troverete fra le prime righe del codice.
Ecco un esempio di codice con la parola <Head> evidenziata.


Se vi viene riportato un errore di inserimento codice (a me succede sempre!), aggiungete uno slash (/) di chiusura subito prima di >
Il finale del codice sarà così :

type="text/css"/>

Fatto questo, dovete passare allo step 4, dovete cioè copiare il codice dello step 4 e incollarlo nel vostro codice HTML dopo il tag  .post-body
Qui vedete un esempio:



La difficoltà qui è proprio nel trovare le parole all'interno del codice HTML del nostro blog. Ma a questo proposito ci viene in aiuto lo strumento "TROVA" che apparirà in alto a dx digitando la combinazione di tasti CTRL+F. Basterà inserire nella stringa la parola che cerchiamo, nel nostro caso post-body, per vederla evidenziata nel codice.
Se nell'anteprima vi accorgete che il carattere risulta troppo piccolo o troppo grande, vi basterà aumentare o diminuire il valore in percentuale del tag "font size" che trovate subito dopo il codice che avete inserito. 
Tutto qui! Spero di essere stata abbastanza chiara e semplice nella spiegazione. Bye bye!

39 commenti:

  1. Non solo ho personalizzato il font, ma gli ho cambiato pure la taglia: più grande e più comodo da leggere :-)
    grazie <3

    RispondiElimina
    Risposte
    1. Eheh, ti nomino prima della classe!!! :-P

      Elimina
    2. ciao, scusate, io starei cercando di ingrandire il font di un post. Per spiegarmi meglio, quando pubblico un post questo appare sulla pag principale del blog.Per leggere più contenuto clicco su "continua a leggere" e si apre il post completo con un carattere ILLEGGIBILE, troppo piccolo. Come posso ingrandirlo? grazie

      Elimina
  2. Ciao Lucia, sono sempre io, veronica, penso la più imbranata delle tue fan. Ho avviato il mio blog di creatività (ceramiche) e pensieri (nelmomento il cui indirizzo è http://nelmomentovero.blogspot.it). Contenta di averlo impostato ma confusa su ogni singolo aspetto inerente la personalizzazione, che per ora manca. Dunque ti interpellerò per diversi consigli. Il primo: ho visto uno sfondo template tipo legno sul blog "la tazzina blu", in cui a fondo pagina cita "modello semplice", cioè quello che ho scelto io. Come è stato realizzato secondo te? Complicato?
    Inoltre: come faccio a mettere i miei contatti staccati dal profilo? Per ora sono riuscita ed inserirli solo inglobandoli al profilo ma vorrei metterli sotto e staccati.
    Scusa, mi vergogno quasi!!
    Grazie già da ora

    RispondiElimina
  3. Ancora una cosa Lucia. Quando lascio i commenti nei blog altrui mi piacerebbe che anzichè il mio nome comparisse quello del mio blog con il link diretto, come si fa?
    Grazie numero 2

    RispondiElimina
    Risposte
    1. Ciao, Veronica. Scusami per il ritardo con cui ti rispondo, noto però con piacere che hai risolto da sola i primi due problemi che mi avevi post. Per quanto riguarda l'ultimo quesito, ovvero come far comparire il nome del blog con il link diretto, ti spiego qui: Se vai in Design/Impostazioni ad un certo punto troverai "Il tuo Url OpenId" seguito dall'indirizzo del tuo sito. Ora tieni a mente come è scritto l'indirizzo (di solito è del tipo http://nomedelsito.blogspot.com, cioè senza www per intenderci).Ora, dopo aver scritto il tuo commento in un blog, devi selezionare la voce "OpenId" nel campo "Rispondi come" che trovi proprio sotto il riquadro del commento. Dove ti chiede di inserire l'url, metti l'indirizzo del tuo blog così come l'hai trovato nelle tue impostazioni. Poi clicca Pubblica e dovrebbe essere fatta. Tuttavia tieni presente che non tutti i blog accettano l'openId, in questo caso non troverai la voce nel campo "Rispondi come". Ti faccio vedere, in questo commento mi firmo col nome del mio sito inpigiama. Ciao, fammi sapere se ci riesci!

      Elimina
    2. provo anke io...Saluti a "inpigiama..."

      Elimina
  4. Lucia grazie anche qui, oltre che nel mio blog. Sei sempre gentile e affidabile.
    Sta sera provo e ti faccio sapere se sono riuscita.
    poi ti scriverò anche per un'assistenza nell'inserimento di un'immagine disegnata a mano nell'intestazione. E soprattutto ti farò visita spesso in questa spazio e nell'altro tuo blog per un pò di chiacchiere miste. Ho visto che anche tu ti appassioni tanto e spesso!
    Grazie davvero ancora

    RispondiElimina
  5. Prova per vedere se ho capito.

    RispondiElimina
  6. Lucia. grazie. Era molto semplice, in effetti.
    Allora ti chiedo una precisazione in più. E' possibile firmarsi col nome del mio blog, come ho fatto qui, facendo però comparire la foto del mio profilo?

    RispondiElimina
  7. Ti scrivo ancora qui per un quesito mica da poco: come si inseriscono nei post delle immagini prese dal web? E' complicato? Potresti fare un post dedicato. In giro ci sono solo spiegazioni un pò complesse in merito... Pensaci su e intanto grazie Lucia

    RispondiElimina
    Risposte
    1. Veronica, questo è proprio una fesseria. Quando tu inserisci una foto, blogger ti chiede se vuoi selezionare la foto dal tuo pc (scegli file), oppure da un url (indirizzo web), o da webcam, telefono, o Picasa web album. Va da sé che per prendere una foto dal web devi copiarne e incollarne l'indirizzo dopo aver cliccato la voce "da un URL".

      Elimina
  8. uffiiii io ci sto provando disperatamente ma quando metto l'anteprima scopro che non è cambiato nulla....

    RispondiElimina
  9. Aiutooo. Che paura, ho temuto che mi scomparisse tutto il mio blog.
    Ho inserito, credo, correttamente il codice ma quando ho dato l'Anteprima tutto ciò che è uscito è stato: #
    Dove posso avere sbagliato?
    Aiutooo da Lorena

    RispondiElimina
    Risposte
    1. Probabilmente hai sbagliato qualcosa nell'inserire il codice. A volte un punto o una virgola fanno la differenza. E cmq può succedere che per un qualche ignoto motivo le procedure descritte non vadano a buon fine. Purtroppo i codici che abbiamo nei nostri blog non sono tutti uguali.

      Elimina
  10. Se hai una mail, potrei inviarti con STAMP e INCOLLA sul Word le modifiche che ho fatto seguendo le indicazioni. Forse riusciresti a capire dove e come ho sbagliato. Mannaggia! Adesso oramai voglio il nuovo carattere e fino a che non l'ho cambiato, mi danno. Grrrrrr

    RispondiElimina
    Risposte
    1. Cara Lorena, mi spiace ma questo non posso proprio farlo. Se cominciassi a farmi mandare i codici da tutti quelli che me lo chiedono, per rispondere alle mail (che già così sono tante) dovrei rinunciare alle ore di sonno. Scusa, ma più di questo non posso fare. Grazie per la comprensione! :-)

      Elimina
    2. Hai ragione e ti chiedo scusa per avere... esagerato. A presto e ciao.

      Elimina
  11. Ciao! ti volevo solo avvisare che sono andata al link che hai messo dei google fonts ma mi da errore 404.
    Credo che ora siano a questa pagina http://www.google.com/fonts/
    Ciao e grazie!

    RispondiElimina
  12. Cara Fragolina, ti ringrazio molto per avermi avvisato! Ho provveduto subito a cambiare il link. Grazie ancora!

    RispondiElimina
  13. Ciao!
    ho appena creato il mio blog di disegno,e facendo tutti i disegni con la tavoletta grafica mi piacerebbe usare al posto del font(per esempio dove c'e scritto "post piu vecchi")la mia propria scrittura usando la tavoletta grafica. Pensi che sia quindi possibile?

    Grazie mille e....complimenti!il tuo blog è un salvagente per chi vorrebbe esprimere la propria creatività ma non sa usare i codici HTML XD

    Bacioni, Irene

    RispondiElimina
    Risposte
    1. Ciao Irene,
      sì, è possibile. Devi trattare la scritta che fai con la tavoletta grafica come se fosse un'immagine e quindi la inserirai nel blog usando il gadget "Immagine". Fammi sapere se sei riuscita.
      Ciao
      Bluezlee

      Elimina
  14. Ciao! grazie per le tue guide, le trovo molto chiare :) Io ho da poco aperto il mio blog (http://www.langolodihyna.blogspot.it/) , ho tentato di cambiare font (in realtà volevo aggiungerne uno nuovo al titolo dei post xkè da blogger n ho pochini) ma non cambia niente! ho tentato anche aggiungendo lo / ma niente.. Come mai? cmq se ti va di passare mi farebbe piacere, anche x alcuni consigli su cose ke noti a colpo d occhio ke non vanno ;) http://www.langolodihyna.blogspot.it/ ciaooo

    RispondiElimina
  15. Ps e a proposito! xkè mi esce sempre questa stringa anzichè l'apostrofo? devo toglierlo? grazieeeee

    RispondiElimina
    Risposte
    1. Non so, forse sbagli qualcosa. L'apostrofo forse è un problema di tastiera.

      Elimina
  16. Grazie a te sono riuscita a cambiare il font sia del titolo post che del post stesso!!
    Grazieeeeeeee :) :) :)

    RispondiElimina
  17. io voglio fare comparire il nome del blog nel commento invece di www.... come faccio??

    RispondiElimina
  18. Ciao e grazie della dritta,però nonostante abbia fatto tutto come descritto e provato con diversi font,non cambia nulla,rimane sempre il font originale,riesco solo a cambiare la grandezza.Boh...

    RispondiElimina
  19. Ciao scusami, io ho provato ma anche facendo ctrl+f mi dice che non trova la stringa post-body ;(

    RispondiElimina
  20. E se volessi metterlo come titolo del post? Come devo fare?

    RispondiElimina
  21. ho seguito tutto alla lettera ma non mi cambia il font dei vecchi post, che restano scritti con il vecchio font...non dovrò mica cambiarli manualmente uno ad uno??? Mhhhhh mi sa che qualcosa mi è sfuggito! Mi aiuteresti? Grazie!

    RispondiElimina
  22. uff non mi riesce!!Continua a darmi errore quando inserisco il link dopo "head"...come posso fare?

    Grazie
    Rosy

    RispondiElimina
  23. ciao complimenti per il tuo utilissimo blog, nel mio caso vorrei poter cambiare automaticamente i font dei post vecchi adeguandoli a quelli nuovi come devo fare?

    RispondiElimina
  24. Ciao, ho da poco aperto un blog e vorrei chiederti un aiutino su una cosa perchè sto impazzendo.
    Ho creato delle pagine nuove nel blog, le ho centrate in alto ma non riesco a distanziarle tra di loro e a cambiare il carattere. Mi sapresti dire come posso fare?

    RispondiElimina
  25. Vorrei modificare il font delle pagine/schede che ho creato! Ma non riesco!
    Idem i titoli dei widget non me li fa modificare! :(

    RispondiElimina
  26. Vorrei modificare il font delle pagine/schede che ho creato! Ma non riesco!
    Idem i titoli dei widget non me li fa modificare! :(

    RispondiElimina
  27. Articolo molto interessante ed utile, sul web ci sono anche molti font gratis bellissimi da poter scaricare

    RispondiElimina