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



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



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



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







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