Guida per i blogger: dove includere CSS, HTML e JavaScript

Questa è una domanda che solleva molti interrogativi tra gli utenti che non hanno familiarità con la programmazione web, soprattutto con Blogger, a causa delle sue caratteristiche specifiche. In questo articolo, vi forniremo alcuni suggerimenti sul corretto posizionamento di questo tipo di codice affinché funzioni come previsto.
In linea di principio, il codice può essere inserito ovunque (template, gadget e post/pagine statici), ma ognuno al suo posto e, occasionalmente, includendo tag specifici per il caso specifico.
Anche se lo ripeterò più avanti, il template di Blogger può essere distinto da diverse parti in termini di struttura. Queste sono:

Intestazione : delimitata dai tag <head> e </head>
- Prima area di intestazione : cosa c'è tra i tag <head> e <b:skin><![CDATA[/*]
- CSS : delimitato dai tag <b:skin><![CDATA[/* e ]]></b:skin>
- Seconda area di intestazione : delimitata da ]]></b:skin> e </head>
Corpo : delimitato dai tag <body> e </body>

In questo diagramma mostrerò dove può essere incluso ogni tipo di codice e approfondirò l'argomento più avanti.

CSS

Il CSS è ciò che formatta una pagina web; ovvero, ne configura l'aspetto in termini di colori, font, allineamento, margini, ecc.
Sebbene possa essere aggiunto direttamente ai post, includerlo nel template offre il grande vantaggio che, se dovessimo modificare qualcosa in futuro (ad esempio, la tipografia), non dovremo modificare ogni singolo post per modificarlo in tutti quelli già pubblicati. Basterebbe semplicemente modificare le proprietà CSS pertinenti nel template e lo stile verrebbe modificato automaticamente per tutti i post.
Ecco i punti in cui possiamo includere questo tipo di codice.

1

Il posto naturale per il codice CSS in Blogger è nel template, tra i tag <b:skin><![CDATA[/* e i tag di chiusura ]]></b:skin> .
Se modifichi il template ( Template >> Modifica HTML ) e ne guardi l'interno, noterai che c'è molto codice in mezzo. Tutto questo è CSS, che determina l'aspetto del tuo blog. Nessun altro tipo di codice può essere inserito in quell'area .

2

Puoi anche aggiungere CSS da Template >> Personalizza >> Avanzate >> Aggiungi CSS . Questa opzione potrebbe non funzionare per i template personalizzati se gli autori non ne hanno pianificato l'utilizzo aggiungendo variabili.

3

Se vuoi aggiungere codice CSS a una sezione del tuo template diversa dai tag SKIN menzionati sopra, dovrai inserirlo tra i tag <style> e </style> . Ad esempio:

Con i tag STYLE è possibile aggiungere CSS sia alla prima che alla seconda area dell'intestazione, all'area BODY e, infine, a un gadget HTML/JavaScript.

4

Un'altra opzione sarebbe quella di creare un file .css di testo semplice con tutte le regole CSS (senza i tag STYLE ), ospitarlo su un hosting di tua proprietà e aggiungerlo al modello caricandolo tramite il tag LINK e l' URL corrispondente del file . Esempio:

Se fatto in questo modo, la posizione corretta del modello sarebbe nella prima area dell'intestazione, vale a dire tra <head> e <b:skin><![CDATA[/* .

5

Puoi usare il CSS nei post, ma racchiudilo sempre tra i tag <style> . Questo CSS verrà applicato solo al post specifico in cui lo salvi.

HTML

Qualsiasi istruzione HTML deve essere necessariamente inclusa nel CORPO della pagina. Esistono diverse opzioni per questo.

1

Modello >> Modifica HTML
Tra i tag <body> e </body> , qualsiasi codice HTML funzionerà senza problemi.

2

Design >> Aggiungi gadget >> Tipo HTML/JavaScript
In questo tipo di gadget puoi aggiungere HTML senza alcuna restrizione, poiché quando incorporato nel modello di Blogger verrà inserito nei tag BODY sopra menzionati .

3

Lo stesso vale per i post. Puoi digitare codice HTML direttamente nei post e funzionerà correttamente, poiché il corpo del post ( .post ) fa parte del BODY . Come con i CSS, il codice HTML che aggiungiamo a un post sarà visibile solo per quello specifico post.

Ci sono alcuni tag HTML aggiunti alla prima sezione dell'intestazione, ma non fanno parte della struttura della pagina; hanno semplicemente scopo informativo. Ad esempio, tra <head> e <b:skin><![CDATA[/*] vengono aggiunti i tag META , LINK , TITLE e altri simili .

JavaScript

Il codice JavaScript funziona nei gadget HTML/JavaScript e in qualsiasi punto del template, ad eccezione della parte naturalmente riservata al CSS. In altre parole, NON funzionerà se lo inseriamo tra i tag <b:skin><![CDATA[/* e ]]></b:skin> . In qualsiasi altro caso, nessun problema.
Tuttavia, è sempre necessario digitarlo (o incollarlo) tra i tag <script> e </script> . Beh, quasi sempre, perché può essere caricato anche esternamente. Le opzioni sono quindi:

1

Puoi aggiungere JavaScript alla prima o alla seconda area HEAD. Puoi aggiungerlo tra <head> e <b:skin><![CDATA[/*] oppure tra ]]></b:skin> e </head> , anche se è preferibile aggiungerlo alla seconda area.

2

Il CORPO supporta JavaScript senza restrizioni (tra <body> e </body> )

3

Può anche essere aggiunto subito dopo il BODY , ovvero tra </body> e </html> . Questo sarà necessario ogni volta che il codice JavaScript dovrà intervenire dopo il caricamento dell'intera pagina, ad esempio per modificare qualcosa "disegnato" dall'HTML.

4

All'interno di un gadget HTML/JavaScript (ovvio, vero?). Questi gadget fanno parte del BODY , quindi non ci sono problemi.

5

I post supportano anche JavaScript, sebbene debba essere inserito dalla scheda HTML dell'editor senza passare alla scheda Componi .
Farlo dalla scheda Componi a volte genera interruzioni di riga che interrompono parte del codice e ne impediscono il corretto funzionamento. Per evitare problemi, pubblica il tuo post senza nemmeno passare dalla scheda Componi . Se proprio devi, controlla prima di pubblicare che il JS non sia stato modificato. Per vedere come apparirà il tuo post, usa Anteprima , anche se a seconda del tipo di codice che usi, potresti non vederne i risultati in quella vista.
Come con HTML e CSS, JavaScript aggiunto direttamente a un post funzionerà solo per quel post.

6

Come i CSS, anche JavaScript può essere caricato da un file esterno. In tal caso, è necessario utilizzare una delle seguenti strutture. È possibile inserirla in una qualsiasi delle aree del blog menzionate sopra (da 1 a 5):

Se la prima opzione non funziona in nessuna parte del modello, prova la seconda. Blogger a volte può essere molto sensibile :)

Ad eccezione dei file esterni, per i quali non è necessario, se vuoi che il tuo codice JavaScript funzioni SEMPRE perfettamente in Blogger, dovrai aggiungere alcuni caratteri speciali. Questo ti permetterà di usare JS comodamente, senza doverti preoccupare di cose come l'uso di virgolette doppie o singole o di caratteri che potrebbero essere confusi con caratteri HTML come < e > .
Questi caratteri sono contrassegnati in grassetto e devono essere annidati all'interno dei tag SCRIPT .

fonte

Archivio Blogger

Cerca nel blog