Come allineare o centrare l'Header in modo diverso nelle versioni desktop e mobile di Blogger.

Come allineare a destra o a sinistra o come centrare in modo diverso l'Intestazione o Header di Blogger a seconda della visualizzazione da desktop o da mobile.

Riprendo il discorso iniziato con il precedente articolo sulla personalizzazione della versione mobile del nostro blog su Blogger in cui ho trattato la modifica della linea di divisone dei post nella homepage vista da dispositivo mobile. In questo articolo faremo un altro esempio di come allineare in modo diverso l'Intestazione o Header del blog nelle versioni mobile e desktop.

Mi è stata fatta questa richiesta in un commento a cui non ho potuto rispondere in modo adeguato perché il tema ha bisogno di una trattazione più complessa.  Premetto che i codici che pubblicherò sono relativi al blog che ho preso come esempio e che non è detto che vadano bene per tutti i modelli specie se scaricati da internet. Cercherò però di essere molto chiaro con la procedura in modo che possa essere replicata da tutti i lettori interessati a modifiche di questo genere.

Focalizziamo l'attenzione sul tool Ispeziona Elemento di Chrome. Dopo averlo aperto cliccando con il destro del mouse, si clicca sulla icona della freccia posta in alto a sinistra del riquadro che si apre in basso e si clicca sull'elemento da investigare.  Sulla destra vedremo il CSS che lo riguarda

Nella fattispecie di questo test il codice visualizzato sulla destra è

#Header1_headerimg {
display:block;
margin-left:auto;
margin-right:auto;
}

Ora se noi andiamo su Modello > Modifica HTML e cerchiamo questo blocco di codice ci accorgiamo che non è presente. Questo succede molto più spesso di quanto ci si potrebbe aspettare. Il codice può essere presente di default nei server di Blogger oppure può essere ereditato da altri codici del template. Il codice in oggetto centra l'Intestazione come vediamo anche nello screenshot.

Se a mero titolo di esempio volessimo visualizzare l'header sulla destra dovremmo andare su Modello > Modifica HTML, cercare la riga ]]></b:skin> e, subito sopra, incollare questo codice

#Header1_headerimg {
float:right !important;
}

L'aggiunta di !important serve per rendere prioritario questo CSS rispetto agli altri che riguardano lo stesso selettore univoco. Dopo aver salvato il template la versione desktop avrà questo aspetto

La versione mobile l'header invece sarà così

ottenuta con lo strumento Screenfly. Ora in questo caso non c'è l'esigenza di allineare meglio l'Header per i dispositivi mobili ma volendo si utilizza sempre Ispeziona di Chrome o Analizza Elemento di Firefox per trovare il selettore univoco della Intestazione per i cellulari e tablet.

Per trovare il selettore univoco della Intestazione per la versione mobile si procede in questo modo:

1. Si aggiunge all'URL la stringa ?m=1
2. Si apre il tool Screenfly con Chrome
3. Nel campo si incolla l'URL con l'aggiunta e si clicca su Go
4. Si sceglie il dispositivo e la risoluzione con cui visualizzare il blog
5. Sli clicca sul destro del mouse e si sceglie Ispeziona
6. Si aprirà un riquadro in basso della pagina
7. Si clicca sulla icona in alto a sinistra del riquadro a forma di freccia dentro un quadrato
8. Si clicca sull'Header (Intestazione)
9. Nei CSS sulla destra si può visualizzare il blocco di codice che riguarda tale elemento
10. Si può cliccare con il destro del mouse sulla riga di HTML dell'elemento del riquadro
11. Nel menù contestuale che si apre si sceglie Copy > Copy selector che sarà il selettore univoco

A questo punto si possono verificare due ipotesi:

1. Il selettore univoco della versione mobile è lo stesso della versione desktop.
2. Il selettore univoco della versione mobile è diverso da quello della versione desktop.

Se è diverso basterà creare un codice con il tipo di allineamento desiderato 

#selettoreunivoco {
float:right !important; /*Per allineare a destra*/
}

#selettoreunivoco {
float:left !important; /*Per allineare a sinistra*/
}

#selettoreunivoco {
display:block;
margin-left:auto; /* Per centrare*/
margin-right:auto;
}

Tale codice va incollato nel modello subito sopra alla riga ]]></b:skin> .Nei modelli ufficiali di Blogger il selettore univoco è #Header1_headerimg  ed è lo stesso per il desktop e il mobile. Quindi in questo caso per distinguere l'allineamento tra versione mobile e versione desktop va utilizzato per esempio un codice come questo

<b:if cond='data:blog.isMobile'>
<style>
#Header1_headerimg {
float:left !important; /* Per allineare a sinistra nel mobile */}
</style>
<b:else/>
<style>
#Header1_headerimg {
display:block;
margin-left:auto; /* Per centrare nel desktop*/margin-right:auto;
}
</style>
</b:if>

in cui come esempio è stato inserito il selettore univoco ufficiale e le opzioni di allineare a sinistra l'intestazione nel mobile e invece di centrarla nel desktop. In quest'ultimo caso essendo presenti i tag condizionali il codice va incollato subito sopra alla riga </head>.