Pubblicato il 09/01/13e aggiornato il

Come personalizzare la visualizzazione dei blog di Blogger con i dispositivi mobili.

Come mostrare widget e elementi solo nella versione desktop o solo nella versione mobile dei blog su Blogger.
Come è noto Blogger ha dato ai suoi utenti la possibilità di usare i tag condizionali per scegliere quali elementi mostrare in un determinato tipo di pagine o in un dato post. Da più di due anni esiste anche la versione mobile di tutti i blog su Blogger. Inoltre il traffico proveniente da dispositivi mobili, sebbene ancora nettamente inferiore a quello desktop per la maggior parte dei blog, sta crescendo a ritmi vertiginosi. Nasce quindi l'esigenza di creare un sito che abbia un aspetto diverso a seconda che venga aperto dal computer o dal tablet.

La versione mobile di Blogger funziona molto bene con i modelli ufficiali di Blogger mentre non è così per quelli anche solo parzialmente personalizzati. Di default viene mostrata nella versione mobile solo la colonna centrale dell'area del post e quindi i gadget posizionati nelle sidebar non si vedono a meno che non si attivi la visualizzazione desktop anche da cellulare.

I widget mostrati di default sono i seguenti: Intestazione, Post su blog, Profilo, Widget delle Pagine, Adsense e Attribuzione. Per quello che riguarda Adsense viene mostrato il relativo annuncio solo se inserito mediante widget da Layout mentre non è così per gli annunci aggiunti mediante codice.

Attraverso la proprietà mobile possiamo fare in modo di nascondere un widget nella visualizzazione mobile oppure di mostrarlo solo in quella modalità. Le opzioni sono:
  1. mobile='default'
  2. mobile='yes' per mostrare il widget anche negli smartphone e nei tablet
  3. mobile='no' per non mostrare il widget nei dispositivi mobili
  4. mobile='only' per mostrare il widget solo nei dispositivi mobili 
Dopo essere andati su Modello > Modifica HTML > Procedi, si espandono i modelli widget e si cerca il gadget che vogliamo personalizzare per il mobile. Facciamo l'esempio di Attribution che è il link visualizzato alla fine del blog con i crediti verso i realizzatori del modello. Si troverà un codice del tipo

<b:widget id='Attribution1' locked='false' title='' type='Attribution'>

Per non visualizzarlo nei dispositivi mobili va modificata questa riga in questo modo

<b:widget id='Attribution1' locked='false' mobile='no' title='' type='Attribution'> 

Il risultato di questa operazione sarà il seguente

personalizazione-mobile

Per operare ulteriori personalizzazioni occorre essere sicuri che nel nostro template sia presente la riga

  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

che è tipica dei template del Designer Modelli. Per operare una personalizzazione in un elemento del template così come è visualizzato nel mobile occorre cercare la riga

/* Mobile
----------------------------------------------- */

al di sotto della quale ci sono le classi di stile di tutti gli elementi mostrati di default come per esempio

.mobile .date-header span {
  padding: 0.1em 10px;
  margin: 0 -10px;
}

che determina l'aspetto della data dei post.

MOSTRARE UN WIDGET SOLO NEI DISPOSITIVI MOBILI

Per mostrare un widget solo nei dispositivi mobili bisogna ricordarsi che questa operazione in linea di massima si può fare solo con i gadget presenti nella colonna centrale. Dopo aver individuato il nome o l'ID del gadget si va su Modello > Modifica HTML > Procedi e si espandono i modelli widget. Si cerca il widget e, scorrendo il suo codice, si incolla subito sotto la riga

<b:includable id='main'>

la condizione

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

e subito sopra la riga

</b:includable>

la fine della condizione

  </b:if>

Si possono anche inserire nel modello delle condizioni per mostrare un dato elemento a chi apra la pagina da un browser desktop e un altro elemento a chi la apra con un dispositivo mobile. In questo caso nel modello dovremmo inserire un codice come questo ultimo 

<b:if cond="data:blog.isMobile">
<!-- Visibile solo nei dispositivi mobili-->Codice dell'elemento visibile con il mobile
<b:else/>
<!-- Visibile solo tramite desktop -->Codice dell'elemento visibile tramite desktop desktop
</b:if>

Si potrebbe per esempio optare per mostrare una immagine ai normali visitatori da computer che diventa invece un più leggero link per chi apra la pagina via dispositivo mobile.




27 commenti :

  1. Molto interessante!!!! Avevo già sperimentato l'inserimento del gadget di adsense. Funzionava perfettamente ma mi creava problemi nella maschera del layout di blogger, nel senso che non riuscivo più a salvare la pagina dopo aver spostato qualche gadget. Sapresti dirmi perchè?

    RispondiElimina
    Risposte
    1. @ LaCucina...
      Mi sopravvaluti, non posso conoscere anche perché non viene salvata una disposizione. Forse non lo sanno bene neppure i componenti del Team di Blogger :)

      Elimina
    2. Non è assolutamente vero che ti sopravvaluto! Il tuo lavoro è stato ed ed è fondamentale per il mio blog! Sono io che sono andata oltre! Grazie come sempre e a presto.

      Elimina
  2. Post molto utile. C'è un modo per ridurre, solo nella versione mobile le dimensioni dell'header? Troppo grande nella versione mobile.
    Grazie ;)

    RispondiElimina
    Risposte
    1. @ Tiziana
      In teoria basterebbe inserire due widget Intestazione con le condizioni che quello più grande sia visibile solo via computer e quello più piccolo solo dal cellulare. Però aspetterei che questo metodo diventasse più affidabile. In alcuni modelli ho visto che questi tag non funzionano

      Elimina
    2. Ok, aspetteremo ;-)
      Thank you!

      Elimina
  3. ciao vorrei rendere visibile da desktop una photogallery nel post fatta con flash player e invece da cellulare vorrei mostrare solo le immagini semplicemente una in fila all'altra con didascalia sotto, ho provato con il codice in alto editando direttamente la pagina del post in html ma vedo sempre entrambe, non sembra funzionare, devo intervenire anche nel modello in generale? mettendo anche lì qualche condizione? grazie in anticipo

    RispondiElimina
    Risposte
    1. @TimeinSpace
      In li inea di massima dovresti creare un widget con la galleria in flash e un altro con le miniature per poi inserire nel modello le condizioni che vengano visti rispettivamente solo nel desktop e solo nel mobile. Le istruzioni di Blogger sono chiare e semplici però nei test ho visto che non funzionano. Funziona solo quando si vuole nascondere un widget nel mobile ma non quando si vuol nascondere nel desktop. Forse sarà una questione di modello. Vedremo in seguito quando la cosa sarà più chiara.

      Elimina
  4. Sto provando ad abilitare la vista mobile ad un blog blogger, la vista "personalizza".
    Visualizzando il blog da telefono (con IE e UCBrowser) la visualizzazione è davvero pessima.
    Non viene mostrata l'header (un'immagine incastonata nella quale sta il titolo del blog), le freccie a sinistra di ogni post sono tagliate alla base, così come la barra del menu, che risulta anche prigioniera di un brutto rettangolo inutile e retro.

    Che fare? Su che parte del codice HTML devo intervenire? (ho individuato la sezione dedicata alla visualizzazione da dispositivi portatili, ma non mi ci oriento..)

    (buona serata)

    RispondiElimina
    Risposte
    1. Ho constatato che da Windows Phone si visualizza in questo modo improprio, mentre (per esempio) da iPhone si visualizza come da anteprima fornita in blogger (in modo corretto e bello).

      Che fare? (se si può)
      (android non ho ancora avuto modo di testarlo)

      Elimina
    2. Il problema della diversa visualizzazione da parte dei diversi browser desktop si ripropone anche sul mobile. Non mi stupisco che su Windows Phone si veda male visto quello che succede o meglio succedeva con IE visto che con IE10 e IE11 la maggior parte delle cose sono andate a posto.
      Personalmente ho modificato l'aspetto della visualizzazione mobile di questo blog testando solo su Android. Non è una cosa semplicissima e non si possono dare consigli generali. Intuitivamente vai su Modello > Modifica HTML > Vai al widget > Blog1 e considera il codice nella sezione
      b:includable id='mobile-post' var='post'
      che ha il codice per la versione mobile personalizzata mentre il codice per la versione desktop si trova nella sezione successiva
      b:includable id='post' var='post'
      Leggi anche questo post
      http://www.ideepercomputeredinternet.com/2013/10/blogger-versione-mobile-desktop-personalizzare-editor-html.html

      @#

      Elimina
  5. ho voluto provare a rendere visibili due widget solo su mobile , ma non si vedono, dove devo mettere i widget nel blog, in che posizione,sidebar sotto il post, io li avevo nel fondo del blog sopra attribuzione
    Peccato perchè per le pagine invece ha funzionato!

    RispondiElimina
    Risposte
    1. Per visualizzare un widget anche nel mobile non deve essere nelle sidebar e nel footer ma è possibile farlo solo se è insertito nel modello. Spesso dobbiamo inserire il codice due volte nel template. La prima per mostrarlo nella versione desktop e la seconda per visualizzarlo su mobile. Segui questo post
      http://www.ideepercomputeredinternet.com/2013/10/blogger-versione-mobile-desktop-personalizzare-editor-html.html
      e dai pure uno sguardo a quest'altro che ti potrebbe essere utile
      http://www.ideepercomputeredinternet.com/2014/11/blogger-tag-condizionali-desktop-mobile.html
      @#

      Elimina
    2. grazie vedo se riesco a mettere a posto il tutto !

      Elimina
  6. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  7. Ciao Ernesto, innanzitutto ottimo servizio, il mio blog sta crescendo grazie ai tuoi tutorial.
    Vorrei sapere se è possibile visualizzare su dispositivi mobili un menù a tendina delle etichette.... funziona perfettamente su desktop ma non compare sulla versione mobile. Per intenderci io sto utilizzando un menù a tendina che ho trovato su questo tutorial nel tuo blog...
    http://www.ideepercomputeredinternet.com/2011/04/come-creare-un-menu-verticale-con-tutte.html
    E' possibile farlo comparire su dispositivi mobili?
    Grazie Andrea Q.

    RispondiElimina
    Risposte
    1. I menù che funzionano su mobile sono rari. In questo sito ne ho presentato solo uno
      http://www.ideepercomputeredinternet.com/2014/07/blogger-responsive-menu-2-level.html
      @#

      Elimina
  8. Grazie per la pronta risposta. Proverò con i link esterni usando il widget delle pagine

    RispondiElimina
  9. Buongiorno Ernesto, utilissimi i tuoi consigli!
    Ho bisogno di una tua mano....vorrei visualizzare i tasti di condivisione social nella versione mobile.
    Come fare? Es. twitter/fb/mail/google plus

    Grazie mille, Silvia

    RispondiElimina
    Risposte
    1. Ti potrebbe essere utile questo post
      http://www.ideepercomputeredinternet.com/2014/10/blogger-mobile-facebook-mi-piace-googleplus-twitter.html
      @#

      Elimina
  10. Ciao! Io vorrei cambiare il colore del background solo x mobile... ma non riesco a capire come! Hai qualche suggerimento?

    RispondiElimina
    Risposte
    1. Su due piedi non saprei. Salvo il tuo commento per vedere se trovo la soluzione quando ho un po' di tempo. Nel caso ci riuscissi pubblicherò un post quindi seguimi nei prossimi giorni (senza impegno)
      @#

      Elimina
    2. Prova ad aggiungere .mobile .content {background: #f8fbfd;} al CSS.

      Buon weekend. :)


      E.

      Elimina
  11. Ciao, bella guida,
    potresti gentilmente aiutarmi a creare un "widget" che sia visibile solo nella versione mobile,
    per l'informativa sui cookie?
    altrimenti devo usare la versione mobile "personalizzata" di Blogger, che rallenta tutto.
    Grazie mille!

    RispondiElimina
    Risposte
    1. Temo di non aver capito. Su Blogger ci sono dei tag per mostrare un elemento solo nella versione mobile o solo nella versione desktop però funzionano solo se si attiva Personalizza su Modello > Cellulare > Ruota dentata. Comunque ti linko una soluzione con vidget diversi per mobile e per desktop che potrà aiutarti
      http://www.ideepercomputeredinternet.com/2015/05/cookie-law-desktop-mobile-blogger-barra-notifica-schermata-iniziale.html
      @#

      Elimina
  12. Ciao Ernesto, si puo' creare un tag condizionale per la vesrione mobile che permetta di ridurre la dimensione del titolo troppo grande in questa versione rispetto a quella desktop? Grazie.Buon fine settimana.

    RispondiElimina
    Risposte
    1. Ho già provato e i tag condizionali non funzionano con h1, h2, h3 e h4 perché già presenti nel template. Si può solo provare a modificare il modello come illustrato in questo post. Per personalizzare le Intestazioni anche nei dispositivi mobili si possono usare i tag h5 e h6 come spiegato in questo articolo
      http://www.ideepercomputeredinternet.com/2015/10/intestazioni-blogger-mobile.html
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.