Utilizzare CSS esterni su Blogger

Mi è stato chiesto da nany71 come fosse possibile utilizzare dei file CSS esterni su Blogger, e visto che la cosa potrebbe interessare ad altri, rispondo con questo post. Ho cercato ampiamente in rete senza trovare informazioni specifiche, evidentemente è una richiesta così particolare che non interessa molti.

Tuttavia utilizzare un file CSS esterno porta molti vantaggi, tra cui una maggiore velocità di caricamento del blog, visto che il foglio di stile in genere rimane memorizzato nella cache dei browser e quindi di solito viene scaricato solo una volta, mentre nei classici template di Blogger, essendo parte integrante della pagina, viene scaricato ad ogni visualizzazione.

Un altro vantaggio è che il file può essere modificato senza entrare in modifica del template, evitando quindi di correre il rischio di fare danni irreparabili. Tuttavia, vista la natura della modifica, è consigliabile soltanto agli utenti più esperti che ne capiscano abbastanza di html e che abbiano reali esigenze di farla.

Creiamo il CSS

Andiamo in Layout->Modifica HTML e copiamo tutta la parte di codice compresa tra

<b:skin><![CDATA[

e

]]></b:skin>

come si vede in quest'immagine:

e incolliamola in un file che chiamiamo per esempio stile.css:

Nella parte iniziale del foglio di stile appena creato, troviamo l'elenco delle variabili: Blogger ne sostituisce automaticamente il valore quando carica il blog, ma visto che adesso il CSS è esterno, dobbiamo farlo noi al posto suo. Ad esempio, per la riga:

<Variable name="bgcolor" description="Page Background Color"           type="color" default="#dd9" value="#dddd99">

bgcolor è il nome della variabile e #dddd99 il suo valore. Cerchiamo le ricorrenze della variabile nel foglio di stile (con il simbolo $ davanti) e sostituiamole col loro valore:

body {   background:$bgcolor;   margin:0;

diventa

body {   background:#dddd99;   margin:0;

e così via per tutte le altre variabili. Alla fine dell'operazione, possiamo anche lasciare l'elenco delle variabili sopra, perchè tanto non vengono interpretate come CSS. Una volta fatto, possiamo pubblicare in rete il file stile.css su un servizio di fie hosting, magari su Skydrive (o quello che preferite).

Modifichiamo il template

A questo punto eliminiamo il codice copiato dal template lasciando inalterate le righe che lo racchiudevano:

lasciando inalterata questa porzione di codice:

<b:skin><![CDATA[]]></b:skin>

che se tolta provoca un errore e non è più possibile salvare il template, perchè Blogger richiede che sia sempre presente.

Subito sopra, incolliamo la seguente riga:

<link rel='stylesheet' href='indirizzo del file CSS' type='text/css' media='screen' charset='utf-8' />

sostituendo "indirizzo del file CSS" con l'indirizzo del file che abbiamo pubblicato.

A questo punto potete salvare il template e visualizzare il blog: non è cambiato niente, ma le informazioni CSS adesso stanno su un file a parte.

Per qualsiasi suggerimento o domanda, lasciatemi un commento.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!