SOGNI e IMMAGINAZIONE

SOGNI e IMMAGINAZIONE
Divagazioni di sogni e parole in salsa d'immaginazione

venerdì 18 luglio 2014

TUTORIAL BLOGGER ➨ COME USARE FONTS ORIGINALI

Come cambiare il font di un post in Blogger e sostituirlo con uno originale
Devo essere sincera, la mia testa ragiona spesso pensando alla grafica, ai disegni e così quando scrivo un articolo mi interessa anche personalizzare il carattere e i colori.
Oggi vedremo come usare nuovi font nei post di Blogger, per rendere gli articoli più originali. 
Ricordate sempre che il contenuto è fondamentale, così come è importante conoscere le regole del Web Copywriting per creare un buon articolo.
Come usare Font Personalizzati
Ci sono due modi per usare un font personalizzato in Blogger. Il più semplice di questi è di servirsi dell'opzione "Personalizza" fornita di base da Blogger. 
Scegli il testo che desideri cambiare, il font, il colore ed è fatta. 
Ma se avete voglia di mettere alla prova voi stessi potete aggiungere  un nuovo font all'interno del codice del vostro blog!
Ecco a voi come si fa.
WEB FONT DI GOOGLE
Google fornisce una libreria di 613 fonts gratuiti da poter usare nel vostro blog.
I caratteri disponibili sono davvero tanti e molto belli.  
GoogleFONTS
Inoltre Google fonts non mette soltanto a disposizione il font gratuito, ma anche il codice per utilizzarlo nel  blog e le istruzioni per riuscire nell'impresa! 
Potete creare la vostra personale collezione di Font. E' semplice.  
Nella pagina dei FONT sfogliate la libreria per ordine alfabetico, popolarità, data di inserimento e aggiungete i caratteri alla vostra libreria. 
Quindi potete scaricare le famiglie di font nella vostra collezione come un file zip o
sincronizzare i font di Google con il vostro desktop utilizzando SkyFonts.
➨ Dovete cliccare sull'icona a forma di freccia sulla libreria dei Fonts, che apre una schermata con le varie opzioni.
Sincronizza Google Fonts sul desktop con SkyFonts 
SkyFonts
SkyFonts è il principale ospite di font open-source per l'uso sul web, con centinaia di famiglie di font disponibili. 
E' un programma leggero, che permette di installare facilmente i font direttamente dal desktop e può essere utilizzato ovunque. 
➨ Oppure potete creare un account gratuito ed iniziare a scaricare fonts free!
COME INSERIRE I CARATTERI WEB FONT DI GOOGLE IN BLOGGER
Prima di effettuare qualsiasi modifica per evitare sgradite sorprese ricordatevi sempre di salvare il modello originale del VOSTRO TEMPLATE da MODIFICA HTMLSALVA MODELLO COMPLETO.
Step 1 ⇝ Trovare e Scegliere i font! 
Nella libreria on line di Google, scegliete il carattere e cliccate sopra
Per questo tutorial ho scelto Lobster.
Quindi cliccate su "quick-use"  che trovate immediatamente sotto ogni font che vi viene proposto. 
Se avete creato la libreria virtuale basta che usate la sezione UsaIn entrambi i casi si aprirà una schermata.
Step 2 ⇝ Il Codice per utilizzare i font sul vostro sito.
Nella nuova schermata ci sono tutte le impostazioni del font e i codice di riferimento.
Dovete copiare il codice e incollarlo nella pagina del codice html nella pagina del vostro blog e integrare i font nel CSS.  
Se avete creato una libreria di font, avrete a disposizione tutti i codici Css dei caratteri che avete scelto. Invece il codice Html sarà sempre uno.
PERSONALIZZARE I FONT
Se volete personalizzare il vostro carattere, alla voce 1 Scegliere gli stili desiderati potrete scegliere il tipo di spaziatura tra le lettere, la dimensione e si può addirittura cambiare anche il font-tipo. E si creerà il codice Css, da copiare e incollare nel template.
UTILIZZARE I FONT NEL BLOG
A questo punto vediamo come inserire i codici HTLML e Css nel Blog per personalizzare i post
Step 3 ⇝HTML
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. 

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

Poi cliccate su SALVA TEMPLATE. 
Ecco un esempio di codice con la parola <Head> evidenziata.
Nota importante : aggiungete uno slash (/) di chiusura subito prima di >.
Altrimenti vi darà ERRORE, quando salvate.
Il finale del codice sarà così :


type="text/css"/>
Fatto questo, dovete copiare il codice del font 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 destra 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 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
Step 4 ⇝CSS
Cliccate su DESIGN > DESIGNER MODELLI> dal menu a sinistra cliccate su AVANZATO, scorrete il menu a tendina fino ad arrivare ad AGGIUNGI CSS, e nel box bianco che inserite il vostro codice css tra le parentesi graffe.  
font-family: 'Lobster', cursive;
Esistono varie possibilità: potreste voler aggiungere il vostro nuovo carattere solo per i titoli o solo per i post, perciò ho distinto le varie possibilità, per rendere tutto più semplice:


  • PER L’INTESTAZIONE HEADER
.header h1 { font-family: 'Lobster', cursive;}  
  • PER L'INTESTAZIONE SECONDARIA
h1 { font-family: 'Lobster', cursive; 


  • PER SIDEBAR
.sidebar h2 { font-family: 'Lobster', cursive; }

  • PER IL FOOTER
h3 { font-family: 'Lobster', cursive; 


  • PER GLI ARTICOLI – POST
POST { font-family: 'Lobster', cursive; } 

  • PER L’INTERO MODELLO
BODY { font-family: 'Lobster', cursive; } 

Naturalmente al posto di Lobster, dovrete mettere il nome del font che avete scelto.

Nessun commento:

Posta un commento

Google+ Followers