Pubblicato il 05/07/15e aggiornato il

Come inserire direttamente nel modello di Blogger i file CSS e javascript caricati in un dominio esterno.

Come caricare i file js e css esterni direttamente nel modello di Blogger per velocizzare il caricamento della pagina e per non dipendere da disservizi di altri domini.
Quando si scaricano i modelli di Blogger da internet o quando si installano dei widget spesso diventiamo dipendenti da file esterni al nostro sito che possono smettere di funzionare da un momento all'altro perché il servizio su cui erano caricati ha cessato di esistere come per esempio Google Code o perché il dominio in cui il webmaster creatore del template o del widget li aveva hostati non è stato rinnovato.

In realtà si possono caricare file CSS e javascript esterni direttamente nel modello di Blogger con dei vantaggi evidenti. Innanzitutto non avremo più il problema di domini o siti esterni che vanno fuori servizio anche per poche ore e inoltre ne sarà avvantaggiata la velocità di caricamento perché il browser dovrà effettuare meno richieste HTTP.

I file CSS e javascript esterni vengono di solito caricati con una sola riga di codice

<link rel='stylesheet' href='URL_CSS_ESTERNO.css'>  per un CSS esterno
<script src='URL_JAVASCRIPT_ESTERNO.js' type='text/javascript'/> per un js esterno

in cui è presente l'indirizzo del file esterno la cui estensione termina rispettivamente con .css e .js. I file javascript possono avere la chiusura del tag con la slash finale / prima del tag > oppure averla in modo esplicito con </script>. Per caricare questi file nel modello innanzitutto vanno scaricati. Per farlo si copia il loro indirizzo, si incolla nel browser e si clicca su Invio. Si possono verificare due situazioni. La prima è che il file venga scaricato senza ulteriori passaggi. Questo succede per esempio per i file caricati su Google Sites. La seconda invece è che si visualizzi la pagina con tutto il codice del file in questione 

scaricare-file
In questo caso si clicca sulla pagina con il destro del mouse e si sceglie Salva con nome con Chrome e Salva pagina con nome con Firefox. Controllate che la pagina abbia la stessa estensione del file

salvare-file


COME CARICARE I FILE CSS NEL MODELLO


Se non lo avete ancora fatto scaricate e installate l'Editor Notepad++ (Download Notepad++). Fate doppio click sulla icona dell'Editor quindi nella sua interfaccia andate su File > Apri e selezionate il file CSS che avete scaricato nel vostro PC e che avrà un codice simile a questo

file-css

Andate all'inizio del file e subito prima del resto del codice incollate questa riga

<style type="text/css">

quindi andate alla fine del file e incollate quest'altra riga

</style>

in questo modo

Image635716941665669807

Adesso cliccate sull'Editor con il destro del cursore e scegliete Seleziona tutto quindi ricliccate sul destro del cursore e selezionate Copia. Tutto questo codice va incollato su Modello > Modifica HTML subito sopra alla riga </head>. Contestualmente va naturalmente cancellata la riga evidenziata di giallo che inseriva i CSS con il file esterno

SECONDO METODO PER I CSS


Invece di aggiungere il tag <style> all'inizio e alla fine si può andare subito su Seleziona tutto quindi su Copia per poi incollare il codice senza modifiche stavolta però sopra alla riga ]]></b:skin>.

COME CARICARE I FILE JAVASCRIPT NEL MODELLO


Dopo aver scaricato il file in oggetto nel nostro computer con la stessa modalità che abbiamo seguito con il file CSS, si apre sempre con Notepad++ andando su File > Apri.

file-javascript

All'inizio del codice vanno incollate queste due righe


<script type='text/javascript'>
//<![CDATA[

mentre alla fine si incollano queste altre due righe


//]]>
</script>

in questo modo

codice-javascript-modello-blogger

Dopo questa operazione si va sul destro del mouse e si sceglie Seleziona tutto quindi nuovamente sul destro del cursore e si va su Copia. Tale codice va quindi incollato su Modello > Modifica HTML subito sopra alla riga </head>. Si cancella la riga evidenziata di verde che inseriva il javascript con un file esterno quindi si salva il modello. Come detto in precedenza i file javascript esterni possono avere una chiusura del tag <script> con una slash finale / o con un tag esplicito </script> quindi va considerato questo fatto altrimenti non si riuscirà a salvare il modello di Blogger. Ricordo che prima di ogni procedura di questo tipo va salvato il template andando su Modello > Backup / Ripristino.




6 commenti :

  1. A proposito di disattivazione di servizi esterni... sai che anche Yahoo Pipes verrà chiuso, vero?

    RispondiElimina
    Risposte
    1. Sì dalla fine di Settembre. Un vero peccato
      @#

      Elimina
    2. Già... era un servizio poco conosciuto, ma molto utile. Non ho ancora trovato un degno sostituto. :(

      Elimina
  2. Ciao Ernesto,ormai seguo le tue guide chiare ed esaustive. Sto ottimizzando il mio blog che parla di guadagno on line e finanza http://infoutili.blogspot.it/ e lo strmento seo site check up mi rileva l'errore Your webpage is using 65 inline CSS styles! It is a good practice to move all the inlines CSS rules into an external file in order to make your page "lighter" in weight and decrease the code to text ratio.
    to fix
    check the HTML code of your page and identify all style attributes
    for each style attribute found you must properly move all declarations in the external CSS file and remove the style attribute.

    Mi erudisci in merito omi linki la tua guida che fa al caso mio.?
    Grazie mille in anticipo. P.S.......TI chiami come mio padre e ........mio figlio......ti basta ? ih..ih....ancora complimenti per la mente

    RispondiElimina
    Risposte
    1. Non mi preoccuperei troppo di queste questioni che sono secondarie. Personalmente ti consiglierei di postare i CSS e anche i javascript nel modello e non in un file esterno perché su Blogger non c'è uno spazio proprio, i server sono di Google e dovresti usarne uno esterno quindi con una ulteriore chiamata HTTP. Leggi questo post che potrebbe esserti utile per
      http://www.ideepercomputeredinternet.com/2015/07/js-css-file-blogger-template.html
      Poi se hai dei widget in cui sono presenti dei CSS tra i tag < style > e < /style > puoi spostare il codice nella sezione < b: skin > come illustrato nel post qui sopra. Comunque i CSS inline sono pratica comune. Anche l'Editor di Blogger li crea automaticamente quando pubblichi un post
      @#

      Elimina
    2. Scusa ti ho linkato il post che avevi già letto ahahah
      Allora considera solo le poche righe di ulteriori spiegazioni che ti ho dato
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.