Pubblicato il 27/09/10 - aggiornato il  | 18 commenti :

Come centrare il titolo di un articolo su Blogger.

Mi è stato chiesto da qualche parte, non mi ricordo se in un commento su questo blog, su Facebook o per email, se fosse possibile centrare il titolo di un articolo in blog sulla piattaforma Blogger.

La cosa è fattibile se si ha un modello in cui è presente un blocco di codice simile a questo

.post h3 {
  font-family: Trebuchet MS, arial, Sans-serif;
  font-size: 150%;
  font-weight:bold;
}

La riga realmente importante è la prima in cui si definisce lo stile del titolo dell'articolo riguardo alla famiglia di caratteri, alle dimensioni rispetto ai font del corpo del post, all'opzione grassetto, ecc. All'interno delle due parentesi graffe ci possono stare tutte le personalizzazioni possibili. Vediamo come fare per centrare il titolo oppure come visualizzarlo sulla destra. Di default apparirà ovviamente allineato a sinistra.

Dopo essere andati su Design > Modifica HTML e aver trovato il codice è sufficiente incollare un'altra riga in questo modo

.post h3 {
  text-align:center;
  font-family: Trebuchet MS, arial, Sans-serif;
  font-size: 150%;
  font-weight:bold;
}

Se si vuole vedere il titolo sulla destra basta sostituire text-align:center; con text-align:right; e salvare il modello. Si passerà da questo aspetto

titolo-articolo

a quest'altro

titolo-centrato





18 commenti :

  1. Interessante. Non mi serviva però il titolo centrato, ma quello giustificato. Quindi ho sostituito la parola "center" con "justify".

    RispondiElimina
  2. Grazie Ernesto!
    Ricordo che la curiosità era partita da me e hai trovato la soluzione.

    Grazie!

    RispondiElimina
  3. grazie dell'ndicazione, era proprio una cosa che volevo fare. Ho provato e ha funzionato benissimo :)

    ho un'altra curiosità: si possono scrivere i titoli con i font che si hanno in word?
    ciao e grazie ancora

    RispondiElimina
  4. @Miss D.
    Se conosci il nome del font basta aggiungere anche questa riga nello stesso blocco di codice

    font-family: Trebuchet MS;

    dove al posto di Trebuchet MS puoi mettere la famiglia di font che ti piace come per esempio: arial, verdana, sans-serif ecc.

    RispondiElimina
  5. Nel modello SIMPLE del nuovo Designer Modelli di Blogger, ho dovuto cercarmi la riga:

    h3.post-title, .comments h4 {

    e aggiungendo

    text-align:center;

    subito dopo, sono riuscita nell'intento di centrare il titolo del post.

    Spero che la mia info non faccia perdere tempo a chi tenta di fare la stessa cosa. Ciao Ernè ;)

    RispondiElimina
  6. @Sarù
    E' sempre un piacere leggerti da queste parti :)

    RispondiElimina
  7. E' possibile che solo io non riesca a trovare questa parte?? Se ti mando i codici mi aiuteresti tu??

    RispondiElimina
  8. @BrilliDiLuce
    Ho trovato questo codice nel tuo blog
    h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
    {
    margin: 1em 0;
    font-size: 19px;
    color: #A34900;
    }
    Inserisci una riga in questo modo
    h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
    {
    text-align:center;
    margin: 1em 0;
    font-size: 19px;
    color: #A34900;
    }
    Dovrebbe funzionare.

    RispondiElimina
  9. @parsifal32 ho cambiato template..ma .post h3 non lo trovo..mi aiuteresti a trovarlo??

    RispondiElimina
  10. @BrilliDiLuce
    Nel tuo template è già presente questa riga
    text-align: left;
    se la sostituisci con quest'altra
    text-align: center;
    ti viene tutto centrato non solo il titolo. Non si può distinguere la classe del titolo da quella di tutto il post.

    RispondiElimina
  11. Sto cercando anche io di centrare il titolo del post rispetto al resto.

    Ho trovato questa stringa in mio html



    Esattamente dove mettere text-align:center;?
    Dopo h4" all'interno della graffa o dopo la graffa...dopo la riga...e devo mettere graffe?

    Grazie dell'aiuto

    RispondiElimina
  12. Scusate ma non mi fa apparire il copia e incolla delle righe html interessate...

    Mio blog http://dino-freezone.blogspot.it/

    Grazie se mi aiutate a individuare posizionamento.

    Altra domanda: ho letto che era possibile anche aggiungendo una stringa in css ma non me lo fa fare.

    RispondiElimina
    Risposte
    1. @# Prova con
      h3.post-title { text-align:center !important;}
      da incollare in una riga dopo una parentesi graffa chiusa, cioè dopo un segno come questo
      }
      La riga la ottieni cliccando su Invio dopo aver posizionato il cursore

      Elimina
  13. Nel blog di prova che ho fatto, dove ho inserito il nuovo template per lavorarci, cercando .post h3 { non riesco a trovare nulla. Come posso risolvere? Grazie.

    RispondiElimina
    Risposte
    1. @# Il post ha di più di 4 anni. Ora non si usa più quel codice ma quest'altro
      h3.post-title
      spesso però è insieme a
      .comments h4
      e quindi centrando il titolo centri anche i commenti. Per evitare prova a incollare subito sotto a una parentesi graffa chiusa
      }
      questo codice

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

      Elimina
    2. E' possibile che da me non ci sia? Quando scrivo la parte del codice sul trova codice cliccando F3 non mi trova nulla.

      Elimina
    3. @# Ti riferisci al post o al mio commento di risposta 14.a? Per trovare il codice non si può più usare F3 ma questo sistema
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      Se ti riferisci inveceal commento dopo essere andata su Modello > Modifica HTML intorno alla 13.ema o 14.ema riga dovresti vedere
      <b:skin>...</b:skin>
      Clicca sulla freccetta neraa sinistra per visualizzarlo tutto e solo allora cerca la riga
      ]]></b:skin>
      con il metodo del post che ti ho incollato. Subito sopra incolla il codice che ti ho già postato in precedenza cioè
      h3.post-title {
      text-align:center !important;
      }

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy