Pubblicato il 29/10/17 - aggiornato il  | 9 commenti :

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

header-blogger-destop-mobile

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.

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

heder-diversi-blogger

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.


9 commenti :

  1. Ho provato sia il primo che il secondo metodo ma non funzionano e non capisco dove sbaglio...

    RispondiElimina
    Risposte
    1. Risolto. Non avevo spuntato "Personalizza" sul tema del Mobile, lasciando "predefinito". Ora funziona perfettamente il secondo metodo. Ho un'altra domanda da farti. Invece di impostare una grandezza predefinita dell'immagine, non è possibile fare il modo che si adatti alla larghezza dello schermo? Credo di sapere la risposta, ma ci provo. Grazie infinite.

      Elimina
    2. Sostituisci width='600' con width='100%' nel codice dell'header per il mobile. Non ho testato ma dovrebbe prendere tutto lo spazio disponibile in modo automatico.
      @#

      Elimina
    3. Funziona! Grazie ancora. Bellissimo Blog.

      Elimina
  2. Ciao Ernesto, ho a che fare con un modoello che non presenta la stringa . In pratica l'header è definito da una struttura fatta più o meno cosi:
    .header{background-color:#fff;margin-bottom:0}
    .header .widget{margin-bottom:0}
    Il tutto posizionato sotto a
    In più chiaramente c'è il widget Header1, regolarmente presente.
    Come posso fare per applicare un header diverso? Ho provato qualche soluzione ma non ha funzionato: sono solo riuscita a nascondere l'header su mobile. Grazie

    RispondiElimina
    Risposte
    1. Vedo che mancano due pezzi di codice al commento: li rimetto con gli spazi...
      erano < header > e < b: skin >

      Elimina
    2. Hai un numero troppo alto di blog per controllare a quale ti riferisci. Se ki incolli l'URL magari posso guardare il sorgente pagina
      @#

      Elimina
  3. Questo codice vale anche per mostrare i banner AdSense di dimensioni diversi tra mobile e desktop?

    RispondiElimina
    Risposte
    1. No. Basta usare gli Annunci reattivi che si adattano automaticamente alla risoluzione
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy