Come personalizzare i titoli all'interno dei post di Blogger.

Come personalizzare i titoli e le intestazioni interne nei post dei blog della piattaforma Blogger.

Non ho mai curato molto certi aspetti estetici di questo blog perché erroneamente credo che i contenuti siano la cosa più importante in un sito insieme all'aspetto SEO del confezionamento del post.

Ho fatto qualche eccezione per adattare alcuni oggetti HTML alla versione mobile del sito come riportato nel post su come inserire una tabella personalizzata responsive e nell'altro per rendere responsive i video di Youtube e degli altri siti di video-sharing.

Google apprezza molto di più i post medio lunghi di quelli molto brevi e quando si pubblica un articolo non breve è opportuno suddividerlo in più parti con delle intestazioni secondarie secondo una certa gerarchia.

L'obiettivo di questo articolo è quello di creare un CSS da incollare nel Tema di Blogger per poi riprenderlo nei post semplicemente incollando l'ID della classe di stile. Per evidenziare queste intestazioni è consigliabile usare un colore di sfondo diverso da quello solitamente bianco del contenuto del post.

Consideriamo il caso in cui ci sia una gerarchia di tre Intestazioni, quella principale, quella secondaria e quella minore. L'aspetto per queste tre tipologie di titoli potrebbe essere impostato come in questo esempio

con una differenza delle sole dimensioni tra i titoli dei capitoli e quelli delle sezioni meno importanti. Per realizzare uno stile di questo tipo ho usato una immagine di sfondo che si ripete secondo l'asse y e che naturalmente potrà essere cambiata secondo lo stile e i colori del blog. Vedremo in un prossimo post come creare una immagine di sfondo di questo genere con un programma gratuito o con un editor online.

COME INSTALLARE IL CODICE NEL MODELLO

Si va su Tema -> Modifica HTML e si cerca la sezione <b:skin> quindi si clicca sulla freccetta nera posta a sinistra per visualizzare tutto il codice che contiene. Con Ctrl+F si cerca l'ultima riga

]]></b:skin>

quindi subito sopra si incolla questo codice

/* CODICE INTESTAZIONI PERSONALIZZATE */
h2.custom1 {
     color: #FFF;
     font-family: Lato;
     font-weight: bold;
     text-transform: uppercase;
     background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi8jFanp1_6PP9WqSlssgdHNaOElSEgd7yfID6eZMev-AjmCxEo6MzhO7IG1zS6dUpBGKDlXZHbVZq5F7Tdo6ADNJsENBjJ0X70SV0gLBltzWP9vfGsukxS3pET2UX525W_4lmJ3pmqbM/s720/sfondo-titolo.png);
     background-repeat: repeat-y;
     background-position: left bottom;
     padding: 5px 30px;
     font-size: 24px;
}
h2.custom2 {
     color: #FFF;
     font-family: Lato;
     font-weight: bold;
     text-transform: uppercase;
     background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi8jFanp1_6PP9WqSlssgdHNaOElSEgd7yfID6eZMev-AjmCxEo6MzhO7IG1zS6dUpBGKDlXZHbVZq5F7Tdo6ADNJsENBjJ0X70SV0gLBltzWP9vfGsukxS3pET2UX525W_4lmJ3pmqbM/s720/sfondo-titolo.png);
     background-repeat: repeat-y;
     background-position: left bottom;
     padding: 3px 30px;
     font-size: 18px;
}
h2.custom3 {
     color: #FFF;
     font-family: Lato;
     font-weight: bold;
     text-transform: uppercase;
     background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi8jFanp1_6PP9WqSlssgdHNaOElSEgd7yfID6eZMev-AjmCxEo6MzhO7IG1zS6dUpBGKDlXZHbVZq5F7Tdo6ADNJsENBjJ0X70SV0gLBltzWP9vfGsukxS3pET2UX525W_4lmJ3pmqbM/s720/sfondo-titolo.png);
     background-repeat: repeat-y;
     background-position: left bottom;
     padding: 2px 30px;
     font-size: 14px;
}

Si salva il Tema. Quando si pubblica un post per personalizzare le Intestazioni si usano questi codici

<h2 class="custom1">TITOLO PRINCIPALE INTERNO DEL POST</h2>
<h2 class="custom2">TITOLO SECONDARIO INTERNO DEL POST</h2>
<h2 class="custom3">TITOLO MINORE INTERNO DEL POST</h2>

riprendendo rispettivamente le classi custom1, custom2 e custom3.

PERSONALIZZAZIONI

Oltre alla personalizzazione della immagine di sfondo il cui URL è colorato di rosso si possono modificare anche gli altri parametri: colore del testo (#FFF), famiglia di font (Lato), testo tutto maiuscolo (uppercase), dimensione dei caratteri (24px, 18px o 14px). Il padding di 30 pixel serve per far iniziare il testo dopo la parte rossa del background mentre quello di 2px, 3px e 5px serve per la distanza del testo dalla parte alta e dalla parte bassa del bordo. L'immagine di sfondo è alta 3 pixel ma si ripete in verticale. Se il titolo inserito è lungo verrà mostrato su due o più righe.

Come si vede anche dallo screenshot ottenuto con il tool Screenfly lo stile delle Intestazioni è compatibile anche con la versione mobile.

Come creare uno sfondo di due o più colori