Pubblicato il 24/04/16e aggiornato il

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

selettore-univoco-titolo-post

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

centrare-titolo-post

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

SNAGHTML32653e

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.




1 commento :

  1. Grazie mille!

    Post utilissimo per me! Spiegato molto bene!

    RispondiElimina

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.