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 selettore-univoco-titolo-post](https://lh3.googleusercontent.com/-sq6KfPXYGAg/VxyPVpD-EeI/AAAAAAAA1Y0/rxpeWdO5Gu0/image%25255B3%25255D.png?imgmax=800)
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>
.post-title {text-align:center !important;}
</style>
Successivamente si pubblica l'articolo come al solito
![centrare-titolo-post centrare-titolo-post](https://lh3.googleusercontent.com/-VkIhaun3JCs/VxyPYh7lRtI/AAAAAAAA1Y4/bw3yAcnXCvk/SNAGHTML22f2b7%25255B4%25255D.png?imgmax=800)
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 SNAGHTML32653e](https://lh3.googleusercontent.com/-MyTt-h1l4do/VxyPc3e7hcI/AAAAAAAA1Y8/uRxRnW6hRpM/SNAGHTML32653e%25255B4%25255D.png?imgmax=800)
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>
<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.
Grazie mille!
RispondiEliminaPost utilissimo per me! Spiegato molto bene!
Ciao. Il post è utile e semplice, ma nonostante ci abbia provato 200 volte, titolo e data (l'H2) rimangono sempre allineati a sinistra. Eppure se vado nell'HTML, trovo queste righe:
RispondiElimina.date-header {text-align:center;
}
h3.post-title, .post-title {text-align:center !important;
}
]]>
Che sembrano corrispondere esattamente a quello che hai detto di fare. Mi puoi aiutare???
Ho dato uno sguardo al tuo codice sorgente. Non si riesce vedere bene come su Modello -> Modifica HTML ma mi pare che tu non abbia incollato le righe nel punto giusto. Probabilmente hai lasciato una parentesi graffa insieme alla riga
Elimina]]></b:skin>
È un errore piuttosto comune che però si fa una sola volta. Controlla bene
@#
Ciao Ernesto e grazie per la risposta. Su Modello -> Modifica HTML ho inserito queste righe
Elimina.date-header {text-align:center;}
h3.post-title, .post-title {text-align:center !important;}
]]>
Ma non cambia. Avrò qualche errore da qualche altra parte???
Grazie,
Eni
Questa parte finale non c'entra nulla ]]>
EliminaL'altro codice lo devi incollare sopra alla riga
]]></b:skin>
Devi stare attenta a non inserirla sopra a una riga come quella in cui ci sia anche una parentesi graffa cioè così
}]]></b:skin>
@#
Ok. Le righe 620,621 e 622 sono le seguenti
RispondiElimina.date-header {text-align:center;}
h3.post-title, .post-title {text-align:center !important;}
]]>
Mi sembra corrisponda esattamente a quello che mi hai detto di fare. Purtroppo nel copia/incolla del post precedente non si era copiaincollato ma solo le due parentesi.
Se ti può aiutare mi esce sempre il emssaggio di allarme : "Modificare il tuo modello in modo che mescoli HTTP e HTTPS potrebbe compromettere la sicurezza e l'esperienza utente del blog, se visualizzato tramite HTTPS".
Ti devo un favore per lo stress, questo è sicuro.
]]> non ho capito perché che copio ed incollo non viene neanche qui. Se ti aiuta nell'HTML è di colore verde
Elimina< / b : skin > ho scoperto che questo (senza lo spazio tra un carattere e l'altro), rimane verde e non mi compare nemmeno in questo spazio
EliminaPer inserire codice nei commenti devi seguire queste istruzioni
Eliminahttp://www.ideepercomputeredinternet.com/2011/05/come-inserire-codice-html-o-javascript.html
Pare che il codice tu lo abbia inserito bene. Ho anche guardato il tuo blog
http://eniwherefashion.blogspot.it/2017/02/manca-un-giorno-alla-milano-fashion-week.html
Prova a sostituire questo codice
h3.post-title, .post-title {text-align:center !important;}
con quest'altro
h3.post-title, .post-title, div.post.hentry > h3 {text-align:center !important;}
Non so perché non ti funziona :( Mi spiace
@#
Fatta anche questa prova, ma non cambia nulla. Ho provato anche da Aggiungi CSS. Lo inserisco, mi modifica l'HTML aggiungendomi la riga, ma titolo e data rimangono a sinistra.... :-(
Elimina