Come centrare il titolo del post in Blogger.

Come mostrare al centro del layout il titolo del post nella versione desktop e/o nella versione mobile di Blogger in tutti gli articoli o solo in uno dato.

Giusto ieri ho ricevuto un commento che mi chiedeva come si potesse centrare il titolo dell'articolo in Blogger. Visto che il tema può interessare altri lettori e che era difficile spiegarlo in un commento ho pensato di realizzare un breve articolo che illustra come centrare il titolo nella versione desktop e/o nella versione mobile di Blogger.

I codici che pubblicherò si riferiscono a un template ufficiale di Blogger. Chi avesse un modello scaricato da internet dovrà modificare i codici sostituendo i selettori univoci del titolo utilizzando gli strumenti Ispeziona Elemento di Chrome e Analizza Elemento di Firefox.

Con Firefox si clicca con il destro del mouse sulla pagina in questione e si sceglie Analizza Elemento. Si aprirà un riquadro in basso in cui cliccare nella icona in alto a sinistra per poi andare con il mouse sul titolo dell'articolo. Si visualizzerà il selettore dell'elemento da sostituire solo se diverso da quello ufficiale

Il selettore univoco del titolo del post nei modelli ufficiali è il seguente .post-title.

COME CENTRARE IL TITOLO DEL POST IN UN DATO ARTICOLO

Se volessimo centrare il titolo di un singolo articolo e lasciare tutti gli altri allineasti a sinistra dovremo aprire l'Editor del post, selezionare HTML accanto a Scrivi e incollare questo codice

<style>
.post-title {text-align:center !important;}
</style>

Successivamente si pubblica l'articolo come al solito



Con questo codice il titolo sarà centrato anche nella versione mobile.

COME CENTRARE TUTTI I TITOLI SOLO NEI POST

Per una modifica generale dobbiamo operare sul modello. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la sezione <b:skin> nelle prime 20 righe. Si clicca sulla freccetta nera posta a sinistra per visualizzarne tutto il codice. Si digita Ctrl+F per aprire la casella di ricerca in modo da trovare la riga ]]></b:skin> andando su Invio. Subito sopra si incolla il codice

.post-title {text-align:center !important;}

quindi si salva il modello. In questo modo verranno centrati tutti i titoli del blog sia nella versione desktop sia in quella mobile nel caso si sia scelta Personalizza in Modello > Cellulare.

COME CENTRARE TUTTI I TITOLI ANCHE NELLA HOMEPAGE

Con il codice precedente verrà centrato il titolo del post ma solo quando lo si apre mentre rimarrà sulla sinistra nella homepage o nelle pagine di etichette o di archivio. Per avere il titolo del post sempre centrato il codice da incollare nella stessa posizione precedente sarà

h3.post-title, .post-title {text-align:center !important;}

Dopo aver salvato il template avremo questo risultato



con i titoli centrati anche in Homepage e nelle pagine di Etichette e di Archivio.

COME CENTRARE I TITOLI DEL POST SOLO SU DESKTOP O SOLO SU MOBILE

Prendiamo in considerazione l'ipotesi che si vogliano centrare i titoli dei post solo su desktop o solo su mobile. Il codice da usare è sempre quello precedente da integrare però con i tag condizionali. Se per ipotesi volessimo centrare i titoli solo nella versione desktop si va su Modello > Modifica HTML e si cerca la riga </head> quindi, subito sopra, si incolla questo codice

<b:if cond='!data:blog.isMobile'>
<style>
h3.post-title, .post-title {text-align:center !important;}
</style>
</b:if>

Dopo aver salvato il modello i titoli saranno centrati solo nella versione desktop. Se volessimo centrarli solo nella versione mobile dovremo sostituire la prima riga del codice con quest'altra

<b:if cond='data:blog.isMobile'>

Concludo ricordando che per modelli scaricati da internet o molto vecchi in tutti i codici va sostituita la classe post-title con il selettore ricavato con i tool mostrati all'inizio dell'articolo.