Pubblicato il 24/04/16 - aggiornato il  | 10 commenti :

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.




10 commenti :

  1. Grazie mille!

    Post utilissimo per me! Spiegato molto bene!

    RispondiElimina
  2. 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:

    .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???

    RispondiElimina
    Risposte
    1. 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

      ]]></b:skin>

      È un errore piuttosto comune che però si fa una sola volta. Controlla bene
      @#

      Elimina
    2. Ciao Ernesto e grazie per la risposta. Su Modello -> Modifica HTML ho inserito queste righe

      .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

      Elimina
    3. Questa parte finale non c'entra nulla ]]>

      L'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>

      @#

      Elimina
  3. Ok. Le righe 620,621 e 622 sono le seguenti
    .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.

    RispondiElimina
    Risposte
    1. ]]> non ho capito perché che copio ed incollo non viene neanche qui. Se ti aiuta nell'HTML è di colore verde

      Elimina
    2. < / 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

      Elimina
    3. Per inserire codice nei commenti devi seguire queste istruzioni
      http://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
      @#

      Elimina
    4. 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

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.