Come mostrare su Blogger header diversi per il mobile e il desktop.

Come mostrare immagini di Intestazione diverse nei blog su Blogger quando vengono aperti da mobile o da dispositivi con bassa risoluzione.

Giusto ieri ho ricevuto una richiesta che ha stimolato la mia creatività. Mi è stato chiesto se fosse possibile mostrare una diversa immagine di intestazione per i blog su Blogger quando aperti da mobile o da desktop.

L'esigenza di recuperare spazio nella versione mobile di Blogger la avevo già recepita da solo e infatti avevo già pubblicato un post in cui si illustrava come nascondere l'immagine dell'header quando il dispositivo che apre la pagina ha una risoluzione troppo bassa.

In questo nuovo post faremo un passo ulteriore e vedremo come mostrare immagini diverse dell'header a seconda della risoluzione o a seconda del dispositivo. Possiamo cioè creare due diversi tipi di condizioni. La prima sarà funzione della risoluzione del dispositivo e la seconda del tipo di dispositivo.

Con la prima condizione si fissa un breakpoint, per esempio di 600 pixel, in modo che i dispositivi che hanno una risoluzione inferiore vedano un certo header mentre quelli con risoluzione superiore ne vedano un'altra. In questo modo un tablet con risoluzione di 1000 pixel vedrà lo stesso header di un computer desktop.

Con la seconda condizione invece si mostrerà un determinato header a chi apre il blog da computer qualunque sia la risoluzione, anche di soli 1000 pixel per alcuni netbook mentre si mostrerà un altro header per chi apre il sito da dispositivo mobile anche se fosse un tablet con risoluzione di 1440 pixel. La scelta di una condizione rispetto all'altra è puramente personale e non mi sento di consigliare una soluzione rispetto all'altra.

In ogni caso una immagine, quella di default per il desktop, potrà essere impostata direttamente dalla Bacheca mentre l'altra dovrà essere caricata a parte per poi ricavarne il suo link diretto. Per l'header visibile da desktop si va su Bacheca -> Layout -> Header -> Modifica e si carica l'immagine per poi scegliere se mostrarla dietro al titolo e alla intestazione o al loro posto.

La seconda immagine, quella da usare come header da mobile, si deve caricare seguendo un escamotage. Si va su Post -> Nuovo Post e si carica l'immagine andando sulla apposita icona dell'Editor. Si va poi su HTML e si copia il suo indirizzo che si trova dopo il tag src=". A questo punto potrà anche essere cancellata la Bozza visto che l'immagine rimarrà comunque nel vostro account Google Foto.

HEADER DIVERSI IN FUNZIONE DELLA RISOLUZIONE

Con questa prima personalizzazione fisseremo una risoluzione limite per mostrare un header quando il dispositivo che apre il blog ha una risoluzione superiore e un altro header quando ha risoluzione inferiore.

Dopo aver salvato il modello si va su Bacheca -> Tema -> Modifica HTML e si cerca la sezione <b:skin> per poi cliccare sulla freccetta nera posta a sinistra per visualizzare tutto il codice della sezione. Con Ctrl+F si cerca la ultima riga di tale sezione cioè ]]></b:skin> quindi subito, sopra a quella, si incolla questo codice

/* Nascondere Header Desktop */
@media only screen and (max-width: 641px) {
#header  {display: none;}
}
/* Nascondere Header Mobile */
@media only screen and (min-width: 641px) {
#header2  {display: none;}
}

dove come breakpoint è stata scelta la risoluzione 641 pixel che però può essere modificata a piacere.

Si cerca poi la riga <header> e subito sopra a quella si incolla quest'altro codice

<div id='header2'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu8MbrNIgUlHZGufrBvcd4TfUgm1Qq10N3tji3j176GGEz27M84c6tNkzGvwLcM-fJNzfylpNscquIW1D5icRqTXd_sy2pi3gUlpQGKr-3jMUwnV9jGgYOLastZbd4dLyUNIo5-H7KGR3Z/s1600/Header-ipcei-165.png' width='600'/></div>

dove al posto dell'URL colorato di rosso si incolla l'URL della seconda immagine dell'header da mostrare nei dispositivi con risoluzioni inferiori a 641 pixel. Se ne può impostare anche la larghezza. La dimensione del secondo header potrà essere configurata anche modificando la stringa s1600. 

Si salva il Tema e il risultato sarà il seguente

con due diversi header che appaiono in funzione della risoluzione del dispositivo. Questa personalizzazione non può essere applicata i nuovi modelli di Blogger perché sono Responsive e hanno un codice diverso.

HEADER DIVERSI IN FUNZIONE DEL DISPOSITIVO

Adesso vediamo come mostrare intestazioni diverse in funzione del dispositivo e non in funzione della risoluzione. Con questa modifica quando il blog viene aperto con un tablet anche di risoluzione molto elevata mostrerà comunque il secondo header e non quello di default.

Si va su Bacheca -> Tema -> Modifica HTML e si cerca  la riga <header> quindi subito sopra si incolla

<b:if cond='data:blog.isMobile'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu8MbrNIgUlHZGufrBvcd4TfUgm1Qq10N3tji3j176GGEz27M84c6tNkzGvwLcM-fJNzfylpNscquIW1D5icRqTXd_sy2pi3gUlpQGKr-3jMUwnV9jGgYOLastZbd4dLyUNIo5-H7KGR3Z/s1600/Header-ipcei-165.png' width='600'/>
</b:if>

dove l'URL colorato di rosso dovrà essere sostituito con quello della vostra intestazione e il valore  della larghezza personalizzato. Successivamente con Ctrl+F si cerca la stringa Header1 per trovare il widget della Intestazione.

Tale blocco inizierà con <b:widget id='Header1' ... e terminerà con </b:widget>. Dovremo scorrere il codice del widget Header1 fino a trovare la riga

<b:includable id='main'>

per poi incollare subito sotto a questa la riga

<b:if cond='!data:blog.isMobile'>

come mostrato nello screenshot. Si scorre ancora la pagina verso il basso fino a trovare la riga

</b:includable>

e, subito sopra a questa, si incolla la riga </b:if> quindi si salva il Tema.

Verranno mostrati header diversi in funzione non della risoluzione ma del tipo di dispositivo. Se una pagina del sito viene aperta con un tablet si visualizzerà sempre il secondo header. Concludo ricordando che per testare come si vedono le pagine con le diverse risoluzioni e con i vari dispositivi si può usare il tool Screenfly.