Pubblicato il 30/09/15e aggiornato il

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

intestazioni-blogger

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.

tag-intestazione

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.

intestazioni-blogger[6]

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

intestazioni-blogger[4]

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
intestazione-blogger

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




10 commenti :

  1. Ernesto purtroppo non ho ben capito alcuni passaggi. Il tag h1 consigli di inserirlo nel titolo del post? Inoltre dal template digitando ctrl f e trovando h2 ho modificato la dimensione di 20 che blogger da alle frasi all'interno di tale tag impostando la dimensione a 14 come il resto del post. Ti chiedo: come eliminare il neretto grassetto che blogger assegna ai tag intestazione,intestazione minore e via dicendo?
    Grazie mille

    RispondiElimina
    Risposte
    1. @# Ti posso dare un suggerimento, hai un Profilo non disponibile quindi non posso analizzare il tuo sito. Se hai modificato la dimensione dei font da 20 a 14 ora ci dovrebbe essere un codice come questo

      h2 {
      font-size: 14px;
      }

      aggiungi un'altra riga in questo modo

      h2 {
      font-size: 14px;
      font-weight: normal !important;
      }

      Elimina
  2. provo subito e ti faccio sapere grazie-Per i tag h1 non hai risposto. LI inserisco manualmente nel titolo del post in blogger? grazie ancora

    RispondiElimina
    Risposte
    1. Fai come ti pare, non capisco a che ti servano i tag h1 visto che è il tag del titolo del post. Se li metti anche nell'articolo crei confusione e basta
      @#

      Elimina
  3. ah ok Ernesto , in effetti non ho capito bene.........Se come dici tu Bòogger li assegna automaticamente i tag h1 al titolo del post non occorre inserirli a mano in ogni post allora giusto??sarebbe ridondanza.
    Attendo tue.
    La riga che mi hai fatto inserire per il grassetto funziona alla perfezione.Grazie

    RispondiElimina
    Risposte
    1. Quello che ritengo sia il sistema migliore per personalizzare le intestazioni su Blogger l'ho scritto in questo post. Blogger assegna automaticamente non solo il tag h1 ma anche h2 h3 e h4. Poi naturalmente non sono l'Oracolo di Delfi e ho solo espresso una mia opinione
      @#

      Elimina
  4. Ok Grazie mille Ernesto. Approfittando della tua gentilezza mi indichi per favore dove trovare la stringa per modificare la versione cellulare dei post. Come vedi con l'aggiunta del tag h2 si sovradimensiona il testo . IL TAG h1 alla fine ho optato di inserirlo nel titolo di ogni post. Non penso si scontri con le condizioni del template. Non sarai l'oracolo di Delfi ma sei un ottimo pensatore . Complimenti

    http://infoutili.blogspot.it/2015/09/il-colon-irritabile-come-risparmiare-la-salute-e-guadagnare-benessere.html?m=1

    RispondiElimina
    Risposte
    1. @# Prova a incollare questo codice

      <b:if cond='data:blog.isMobile'>
      <style>
      h2 {font-size: 14px;}
      </style>
      </b:if>

      subito sopra alla riga </head>

      Elimina
    2. Grazie proverò prima possibile. Se ad h2 sostituisco h1 potrò editare anche la dimensione del titolo allora?

      Elimina
    3. Sì, sotto a
      h2 {font-size: 14px;}
      puoi incollare
      h1 {font-size: 20px;}

      Se il codice del commento 4.a non funzionasse segui le istruzioni di questo post

      http://www.ideepercomputeredinternet.com/2015/09/personalizzare-blogger-dispositivi-mobili.html

      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.