Come centrare o allineare a destra l'header o il titolo e la descrizione su Blogger

Quando si carica una immagine come intestazione suBlogger 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

Per modificare la posizione dell'header dobbiamo andare su Modello > Modifica HTML > Procedi, cercare la riga ]]> 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 dobbiamoriposizionare 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;}

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

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

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.