Pubblicato il 09/01/12e aggiornato il

Come centrare o allineare a destra l'header o il nome e la descrizione di un blog su Blogger.

Mi sono già occupato di questo tema in un articolo dello scorso Aprile. Quel post è ancora valido ma adesso voglio ampliarlo a tutte le possibili opzioni che si possono presentare. Quando si carica una immagine come intestazione su Blogger questa viene di default allineata sulla sinistra e non ci sono meccanismi per scegliere un diverso allineamento per centrarla o visualizzarla sulla destra del layout.
Quando si va su Layout > Intestazione > Modifica sono presenti tre possibili opzioni di visualizzazione dell'header
  1. Dietro Titolo e Descrizione
  2. Al posto di Titolo e Descrizione
  3. Fai seguire questa immagine da una descrizione
La finestra del gadget ha quindi questo aspetto

intestazione-blogger

dove si può rimuovere l'immagine, se presente, caricarne una nuova e selezionare una delle tre opzioni appena elencate. L'header si posizionerà automaticamente sulla sinistra del layout più o meno in questo modo

header-blogger

Per modificare la posizione dell'header dobbiamo andare su Modello > Modifica HTML > Procedi, cercare la riga ]]></b:skin> e incollare il relativo codice subito sopra. Alternativamente si può andare su Modello > Personalizza > Avanzato > Aggiungi CSS e incollare il codice nel campo sulla destra. Queste due operazioni producono lo stesso risultato e quindi si può scegliere quella che riteniamo più semplice. Nel primo caso bisogna andare su Salva modello in basso a destra mentre nel secondo caso su Applica al blog in alto a destra per rendere operative le modifiche.

Immagine dell'Header inserita Dietro Titolo e Descrizione
In questo caso Blogger aggiunge l'immagine come fosse uno sfondo dell'header. Per allinearla in modo diverso dobbiamo riposizionare il background dell'header aggiungendo un apposito CSS. Questo codice non influenzerà la posizione del Titolo e della Descrizione.
Per l'allineamento al centro occorre aggiungere secondo le modalità appena illustrate questo codice
#header-inner {background-position: center !important; width: 100% !important;}
Invece per allineare l'immagine sulla destra dobbiamo incollare quest'altro codice
#header-inner {background-position: right !important; width: 100% !important;}
I risultati sono questi

allineamento-immagine-header

Come potete vedere il Titolo e la Descrizione del blog rimangono allineati sulla sinistra mentre viene modificato l'allineamento della immagine.

Immagine inserita con la modalità "Al posto di Titolo e Descrizione" oppure "Fai seguire questa immagine da una descrizione"
In questo caso l'immagine dell'Header viene aggiunta come un semplice tag <img src="Indirizzo Immagine"/>. Il CSS da usare per centrare l'header è
#header-inner img {margin: 0 auto !important;}
#header-inner {text-align:center !important;} /* Inserisci questa linea solo se utilizzi un template del Designer Modelli */

dove la seconda linea si deve aggiungere solo se si utilizza un template del Designer Modelli.
Se invece si vuole allineare sulla destra si deve incollare quest'altro CSS
#header-inner img {margin: 0 auto 0 250px;}
dove 250 è solo un valore indicativo e deve essere calibrato in funzione del template. Il risultato si può apprezzare nei seguenti screenshot



Per allineare l'immagine verticalmente, vale a dire per posizionarla più in alto o più in basso rispetto al resto del layout, si può usare questo codice
#header-inner img {padding-top: 30px ;}
dove 30px sono la distanza dalla parte alta del layout che può essere modificata, si può anche inserire un numero negativo se abbiamo dello spazio vuoto.



Come allineare il testo del Titolo e della Descrizione del blog su Blogger
L'allineamento del testo di default è sulla sinistra come quello della immagine dell'header. Si può modificare questo allineamento a destra o al centro sia in presenza di una immagine sia senza nessun header. Il CSS da incollare è il seguente
#header-inner {text-align: center;}
dove si sostituisce right a center se il testo si vuole allineato a destra invece che centrato. Per allineare il testo verticalmente si può usare questo codice
.titlewrapper {padding-top: 30px  !important;}
dove i 30px rappresentano la distanza dalla parte alta del layout. Ecco in questo caso come si presenta l'Intestazione del blog con il codice per centrare il testo


centrare-titolo-descrizione




Come posizionare immagine dell'header da una parte e Titolo e descrizione del blog dall'altra
Questa opzione è possibile solo se si è selezionato "Dietro Titolo e Descrizione" all'atto del caricamento della immagine dell'header.
  • Posizionare l'immagine sulla sinistra e il testo sulla destra
#header-inner {background-position: left !important; width: 100% !important;}
.titlewrapper, .descriptionwrapper {padding-left: 500px !important;}

  • Posizionare l'immagine sulla destra e il testo sulla sinistra
#header-inner {background-position: right !important; width: 100% !important;}
.titlewrapper, .descriptionwrapper {padding-right: 500px !important;}

dove i pixel di margine dalla destra e dalla sinistra (500px) di Titolo e descrizione possono essere personalizzati. Ecco l'ultimo screenshot

titolo-descrizione-sinistra-immagine-destra




31 commenti :

  1. Sempre utili i tuoi articoli. Grazie Ernesto!

    RispondiElimina
  2. @LaDamaBianca
    Grazie. E tu sempre molto gentile ***

    RispondiElimina
  3. In effetti questo mi servirebbe proprio ma oggi non ce la faccio a farcela he he he.
    Comunque Ernesto anche io sono pienamente d'accordo con la Dama bianca!

    RispondiElimina
  4. @Arwen
    Faccio quello che posso per rendermi utile *^

    RispondiElimina
  5. Avrò capito male ma a me non funziona:(((((...

    RispondiElimina
  6. @francesco_qci_
    Il tutorial è per i blog ufficiali di Blogger. Per i template personalizzati bisogna guardare il codice in cosa differisce. Prova con quest'altro sistema
    http://www.ideepercomputeredinternet.com/2011/04/come-centrare-l-dell-o-header-in.html
    che è più adatto ai template scaricati da internet.

    RispondiElimina
  7. Il problema, caro ernesto, è che il mio template è ufficiale. Certo molto personalizzato anche grazie alle tue PREZIOSISSIME dritte che giornalmente dispensi.

    Un grazie enorme, come sempre

    RispondiElimina
  8. Ci sono riuscito in un mio blog avente come header solo testo. OK

    RispondiElimina
  9. @francesco
    Se è ufficiale deve funzionare per forza

    RispondiElimina
  10. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  11. Fatto ho centrato l'immagine Header del mio Blog - mi dava un po' di fastidio scentrata!

    RispondiElimina
  12. Ciao Ernesto, hai la capacità di rendere flessibile e duttile quello che è rigido e poco malleabile. Grazie!

    RispondiElimina
  13. trovo sempre quello che cerco qui!!

    RispondiElimina
  14. perfetto. centrata l'immagine il testo e la descrizione .grazie ;-)

    RispondiElimina
  15. Sempre puntuale e preciso .. complimenti.
    Ho un problema però, in un'altro post, che non riesco più a trovare,
    avevi pubblicato il CSS per ingrnadire (in percentuale) la dimensione
    della DESCRIZIONE del Blog ... dove lo trovo?
    Grazie.

    RispondiElimina
    Risposte
    1. @pier
      Non mi ricordo quell'articolo. Segui questo post
      http://www.ideepercomputeredinternet.com/2012/01/come-personalizzare-la-descrizione-di.html
      Per modificare la dimensione dei caratteri della descrizione prova a usare questo CSS

      .descriptionwrapper {
      font-size:200% !important;
      }

      Elimina
  16. Ciao, sapresti dirmi come allineare e centrare ogni singolo widget o immagine nelle sidebar? Grazie

    RispondiElimina
    Risposte
    1. @DiegoCapezzuto
      Devi inserire prima del codice del widget questo tag <center> e alla fine del codice quest'altro </center>

      Elimina
    2. Mi da l'errore, sapresti essere più esaudiente? grazie

      Elimina
    3. @DiegoCapezzuto
      Questo sistema funziona solo con i gadget HTML/Javascript. Clicchi su Modifica e, nella finestra che si apre in Sezione del sito, inserisci il primo tag all'inizio del codice e il secondo tag alla fine del codice. Alternativamente, con la stessa modalità, puoi usare i due tag
      <div align="center"> e
      </div>

      Elimina
  17. Te sei un mito.
    Ho cercato per mesi questa cosa e sei il primo che ho trovato. Grandioso!!

    Però ho un problema, non funziona!
    Forse perchè il mio template è esterno a blogger.

    E pure mettendo 0 al padding, o addirittura valori negativi, non cambia nulla.
    Quale potrebbe essere il motivo?

    RispondiElimina
  18. Ciao! sono giorni che provo ad inserire un'immagine come header del blog e sono sicura al 100% che sia a sfondo bianco (l'ho creata con indesign), eppure quando la carico lo sfondo è grigio. ho provato e riprovato, ma nulla da fare. Magari tu puoi illuminarmi!! Grazie mille

    RispondiElimina
  19. Anche a me è capitata una cosa simile. Credo sia un bug di Blogger. Non so se sia possibile con la ta foto ma a usare uno sfondo trasparente e a salvare l'immagine in PNG
    @#

    RispondiElimina
  20. Risposte
    1. A me succede ultimamente molto spesso quando le inserisco dentro i post. Diciamo che per me è un vantaggio dato che prima sembrava che lasciassi spazi bianchi.

      Elimina
  21. Io ho sempre avuto il titolo come testo ma vorrei inserire un immagine (dato che, anche provando a caricare il font, nella versione mobile non appare come dovrebbe). Ho provato tutti i procedimenti che hai suggerito caricando un'immagine e provando a centrarla ma non si smuove. Potrei creare un header con le stessa lunghezza del blog (1100px) e ovviare il problema in questo modo, ma dalla versione mobile mi si rimpicciolisce molto. Come posso fare?

    RispondiElimina
    Risposte
    1. Io ho inserito come titolo una immagine 900x200 pixel e nella versione mobile si ridimensiona in modo accettabile. Non è che c'è sempre una soluzione per tutto :(
      Se hai già provato tutti i sistemi che ho consigliato temo ci sia poco altro da tentare
      @#

      Elimina
  22. Ci sono riuscita, grazie! L'unico problema è che sulla versione mobile l'immagine non si vede. Non so cosa modificare, ho messo su 50px la distanza perché ho il titolo molto lungo e su pc andava a capo; su cellulare la foto non c'è nemmeno microscopica. Pensi che si possa correggere in qualche modo?

    RispondiElimina
    Risposte
    1. Forse hai l'immagine della intestazione troppo grande o anche solo troppo alta. Dovresti sostituirla con una con dimensioni rettangolari più adatte a una visione da mobile per poi impostare su Modello -> Cellulare -> Ruota dentata il modello Personalizza
      @#

      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.