Come inserire uno script di un menù o di una personalizzazione direttamente nel modello.

Forse qualcuno tra coloro che mi seguono direttamente nel blog e non solo attraverso i feed si sarà accorto che da qualche giorno ho cambiato menù inserendo un menù orizzontale. Ho caricato i due file javascript e CSS in una pagina schedario di Google Sites. Purtroppo ho avuto dei problemi e c'è stato qualche ora di non accessibilità dei file che si è tradotta in una estrema difficoltà di caricamento del sito e in una non usabilità.

Per ovviare a questo inconveniente ho quindi deciso di caricare i due file direttamente nel modello di Blogger quindi per il futuro

1. Non ci saranno problemi di accessibilità dell'hosting dei file
2. Ci sarà una larghezza di banda illimitata. In Google Sites non è specificata quanto sia ma in questo modo non ci saranno più problemi al riguardo

Illustrerò questo metodo di inserimento basandomi sul mio precedente articolo

• Come caricare file javascript direttamente nel template di Blogger -

Il codice del Menù orizzontale ha essenzialmente due file da caricare che sono

http://sites.google.com/site/ideepercomputeredinternet/script-menu/chrome.css   e

http://sites.google.com/site/ideepercomputeredinternet/script-menu/chrome.js

Per il resto si tratta solo di commenti e di credits. Il primo file determina lo stile del menù mentre il secondo è il Javascript. Ho incollato gli URL nel browser e gli ho scaricati entrambi. Gli ho aperti con Notepad++ ma chi ne fosse sprovvisto li può tranquillamente rinominare in .txt e aprirli con il Blocco Note.

Il file CSS l'ho incollato immediatamente sopra la riga di codice

]]></b:skin>

e l'ho inserito in mezzo a due commenti (non è comunque indispensabile e si può incollare così com'è)

<!--Inizio Menu Chrome-->
Codice del file
<!--Fine Menu Chrome-->

tanto per sapere dove andare a cercare in fase di successive modifiche. Ecco uno screenshot esplicativo

 

 

mentre il file Javascript l'ho dapprima incollato in un file di testo secondo questa sintassi

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

CODICE JAVASCRIPT

//]]>
</script>

quindi ho incollato il tutto immediatamente sopra la riga

</head>

Ecco il consueto screenshot

Anche in questo caso può essere utile inserire dei commenti di inizio e fine codice per riconoscere i vari blocchi nel caso ci fosse bisogno di intervenire. Prima di salvare il modello ho ovviamente cancellato il codice del menù che era presente precedentemente e che avevo inserito con le modalità di questo articolo.

Il codice del menù vero e proprio inserito in un elemento HTML/Javascript è rimasto esattamente lo stesso e non è stato toccato.

Ho illustrato questo metodo per un caso specifico ma può essere usato se siamo in presenza di una personalizzazione che abbia bisogno di un file esterno .css, o di un file .js oppure di tutti e due proprio come è successo in questo caso. Se ci fossero due file javascript possono comunque essere caricati entrambi uno di seguito all'altro, ciascuno di essi racchiuso dalle quattro linee di codice di cui sopra.