Personalizzare le Intestazioni all'interno dei post di Blogger.

Come personalizzare le Intestazioni all'interno dell'articolo di Blogger.

In tutti i manuali di linguaggio HTML si può leggere che i titoli e le intestazioni possono essere mostrati con i tag che vanno da <h1> a <h6>. Anche nel mio ebook Guida all'HTML e al CSS che può essere scaricato gratuitamente ho accennato a questa gerarchia di Titoli e Intestazioni da inserire nell'HTML.

Blogger ha da tempo inserito la possibilità di inserire le Intestazioni direttamente nell'articolo. Quando si apre l'Editor si può scegliere oltre che Normale Paragrafo anche Intestazione, Intestazione Secondaria e Intestazione Minore. 

Proviamo a creare tre diverse Intestazioni con le tre opzioni

e se poi si va su HTML invece che su Scrivi si può notare che vengono utilizzati i tag <h2> per l'Intestazione Principale, <h3> per l'Intestazione Secondaria e <h4> per l'Intestazione Minore.

Manca il tag <h1> che è il tag del titolo del post e che è giusto che non venga utilizzato all'interno dell'articolo per non creare confusione e dubbi dal punto di vista SEO. Su Blogger però abbiamo un altro problema. Il tag <h2> nella stragrande maggioranza dei modelli è utilizzato per la data dell'articolo. Anche i tag <h3> e <h4> sono presenti nel template e servono per le Intestazioni dei commenti. Quindi se pubblichiamo dei post con le Intestazioni di Blogger il risultato poi non sarà quello che ci aspettiamo perché tali tag essendo utilizzati anche in altri ambiti non mostrano le Intestazioni in modo coerente. Capita per esempio che l'Intestazione Secondaria abbia una dimensione del font maggiore della Intestazione Principale.

Nello screenshot precedente si vede per esempio che nel blog di prova che ho usato l'Intestazione Principale è più piccola di quella Secondaria e di quella Minore. Personalmente non sento molto questo problema perché confeziono i miei post con Windows Live Writer e quindi le Intestazioni le configuro senza utilizzare il Modello di Blogger.

In conclusione di questa premessa se noi vogliamo personalizzare le intestazioni dobbiamo utilizzare i tag successivi a <h1>,.. <h4> già presenti nel template di Blogger cioè <h5> e <h6>. 

COME INSERIRE LE INTESTAZIONI NEL MODELLO

Dopo aver salvato il template si va su Modello > Modifica HTML e si clicca sulla freccetta nera accanto alla sezione <b:skin> intorno alla 14-esima riga. Si visualizzerà tutto il codice della sezione e dovremo cercare la fine della stessa cioè la riga ]]></b:skin> con Ctrl+F. Subito sopra a questa riga si può incollare un codice simile a questo

h5 {
font-size:22px;
color:#f00;
font-weight:bold;
text-transform: uppercase;
}
h6 {
font-size:18px;
color:#00f;
font-weight:bold;
}

per poi salvare il modello. Nella intestazione principale con <h5> ho messo una dimensione di caratteri più grande e un diverso colore per maggiore chiarezza ma i codici dei colori possono essere scelti a piacere. Ricordo che font-weight:bold; è per il grassetto e text-transform: uppercase; serve per mostrare tutte le lettere maiuscole. Si possono aggiungere anche altre righe per uno sfondo (background-color:#eee;) o per una particolare famiglia di caratteri (font-family:Oswald;). Si può anche mostrare una delle due intestazioni in corsivo (font-style:italic;).

Quando nel post vorremo inserire una Intestazione non dovremo fare altro che andare su HTML e mettere il testo della Intestazione tra i tag <h5> e </h5> o tra i tag <h6> e </h6> in questo modo

Se andiamo su Scrivi non visualizzeremo il testo come fosse una Intestazione ma dopo la pubblicazione avremo un aspetto delle intestazioni così come lo abbiamo configurato

Nel prossimo post vedremo come personalizzare le intestazioni anche nei dispositivi mobili.