Pubblicato il 20/12/13e aggiornato il

Come mostrare un widget nella versione mobile di Blogger.

Come mostrare o nascondere gadget nella versione mobile di Blogger anche se sono stati aggiunti nel modello.
Con questo articolo intendo riprendere il tema più volte affrontato di come viene visto il nostro sito su Blogger nella sua versione mobile. Occorre innanzitutto dire che negli smartphone di ultima generazione si possono installare applicazioni dei browser più comuni come Chrome, Firefox e Opera oltre a scegliere browser alternativi specifici per i cellulari come Dolphin o Next. Con tutti questi browser è possibile visualizzare un sito nella versione desktop e quindi l'aspetto in questo caso sarà molto simile a quello che si avrebbe aprendolo con un computer.

La versione mobile in Blogger viene visualizzata di default quando sia stata abilitata. Per farlo occorre andare su Bacheca > Modello e cliccare sulla icona della ruota dentata

versione-mobile-blogger

Nella finestra popup che si apre bisogna mettere la spunta su Sì. Mostra il modello per cellulari nella versione mobile. Ci sono i modelli specifici per molti dei template originali di Blogger quali Semplice, Fantastico o Viaggi. Se avete operato diverse modifiche al template vi conviene visualizzare l'opzione Personalizza per avere un aspetto della versione mobile sensibilmente più simile a quella desktop 

versione-mobile-blogger[5]

Prima di salvare è opportuno visualizzare l'Anteprima del sito nella versione mobile

versione-mobile-blogger[7]

Nel caso in cui la versione mobile personalizzata non sia di nostro gradimento possiamo alternativamente selezionare per esempio l'opzione Semplice oppure cercare di migliorarla nei limiti delle nostre possibilità. È bene sapere che nella versione mobile spariranno comunque le sidebar e tutti i widget che vi sono inseriti e questa cosa non può essere evitata. Nell'area principale del sito che è quella dei post ci possono essere però diverse personalizzazioni che o non funzionano in modo adeguato nella versione mobile oppure non si vedranno affatto.

COME ELIMINARE ELEMENTI DALLA VERSIONE MOBILE


Se avete un menù creato con javascript o anche solo con CSS3 questo non si vedrà nella versione mobile così come succederà anche per gli slideshow. In linea di massima resterà uno spazio vuoto decisamente antiestetico. In questi casi bisogna quindi eliminare questi widget dalla versione mobile lasciandoli ovviamente inalterati in quella desktop.

Tali gadget possono essere stati inseriti tramite Layout > Aggiungi un gadget > HTML/Javascript oppure incollandone il codice direttamente nel modello. Per nasconderli dobbiamo usare due diversi metodi. Se l'elemento è un gadget bisogna scoprire il suo numero ID cliccando su Modifica e aprendo la finestra per editarlo. Il suo ID sarà mostrato alla fine dell'indirizzo 

id-widget

In  questo caso si va su Modello > Modifica HTML e si cerca con Ctrl+F appunto HTMLX dove X è l'ID del widget in questione (HTML11 nello screenshot di esempio).

nascondere-widget-versione-mobile

Per nascondere il widget nella versione mobile basterà aggiungere il tag mobile='no' come mostrato nello screenshot precedente. Se invece l'elemento da nascondere dovesse essere stato inserito senza l'utilizzo di un widget allora dovrà essere compreso tra due tag condizionali in questo modo

<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</b:if>

dove al posto del Codice dell'elemento visibile tramite desktop si mette appunto tale codice per continuare a visualizzarlo come al solito dal computer e al posto di Codice dell'elemento visibile con il mobile si mette un codice alternativo o al limite anche nulla se si non si vuole mostrare niente.

COME MOSTRARE ELEMENTI NELLA VERSIONE MOBILE


Come detto tuto quello che si trova nelle sidebar non può essere mostrato nella versione mobile ma ci potrebbero essere degli elementi che ci interessa mostrare e che invece non si vedono. Potrebbe essere il caso del sistema dei commenti Disqus che sarebbe opportuno fosse visualizzato anche da mobile per permettere agli utenti di interagire normalmente. Disqus viene inserito in un widget che si posiziona al di sotto dell'area del post. Per conoscere il suo ID si va su Modello > Modifica HTML, si clicca sull'area del codice e si pigia Ctrl+F. Nella casella di ricerca si incolla Disqus e si preme su Invio

disqus-widget-mobile

Basterà aggiungere il tag mobile='yes' nella riga mostrata nello screenshot. 
Se l'elemento che vogliamo visualizzare anche nella versione mobile non è stato inserito mediante widget ma solo incollato nel modello allora bisogna procedere in altro modo. Potrebbe essere il caso per esempio di pulsanti di condivisione sui social network inseriti alla fine dei post. Dopo aver salvato il template si va su Modello > Modifica HTML > Vai al widget > Blog1



Se il widget è visibile sul desktop allora è stato inserito nella sezione

<b:includable id='post' var='post'>

per poterlo vedere anche nella versione mobile bisogna inserire tale codice anche nella sezione

<b:includable id='mobile-post' var='post'>


per poi salvare il modello. Nel nuovo Editor di Blogger sono infatti stati divisi alcuni codici relativi alle due versioni. Nello screenshot le sezioni esclusivamente per il mobile sono state evidenziate di giallo. Su questo argomento ho scritto altri due post che possono integrare la trattazione fatta in questo articolo
  1. Personalizzare la versione mobile di Blogger -
  2. Visualizzare widget nella versione mobile o in quella desktop -
Concludo ricordando che si possono nascondere spazi vuoti presenti nella versione mobile personalizzata con i tag <div style='margin-top:-10px;'/> … </div> da inserire nei contenuti mobili.




25 commenti :

  1. Nella versione mobile del mio Blog non è visibile l'Header. Come è possibile rimediare?
    Grazie

    RispondiElimina
    Risposte
    1. C'è già scritto nel post nella sezione
      COME MOSTRARE ELEMENTI NELLA VERSIONE MOBILE
      Vai nel modello e cerca questo codice
      b:widget id='Header1' locked='true'
      Inserisci quindi la condizione che sia visibile anche in mobile in questo modo
      b:widget id='Header1' locked='true' mobile='yes'
      Dovrebbe funzionare anche se è la prima volta che sento dire che non si vede l'header
      @#

      Elimina
  2. Ciao Ernesto . Sai come fare per colorare la parte bassa del blog. Ciao

    RispondiElimina
    Risposte
    1. Si deve analizzare il template con questo strumento
      http://www.ideepercomputeredinternet.com/2013/05/selettori-css-chrome-firefox.html
      per poi trovare il selettore del footer
      che in questo blog è per esempio
      .footer-outer
      quindi si incolla questo foglio di stile
      .footer-outer { background: #ffffff;}
      sopra alla riga che contiene /b:skin
      @#

      Elimina
  3. esistono caselle di ricerca che funzionano anche da mobile? Quella di Blogger non appare, e quelle in HTML (provando da pc) sembra che tolgono la parte /?m=1 e quindi trasferiscono nel sito desktop.
    Senza casella di ricerca è inutile la versione mobile. :(

    RispondiElimina
    Risposte
    1. Le caselle di ricerca non appaiono su mobile perché sono nella sidebar. Hai provato a metterla sopra ai post? Se non si vede la ragione sta anche in quale tipo di browser si usa per aprire la pagina visto che molti browser mobili non supportano gli script
      @#

      Elimina
    2. ho provato da pc con l'aggiunta del codice /?m=1 all'URL. Per la posizione non c'è alcun problema infatti invece della casella di Blogger mi appare solamente una crocetta mentre quella con script appare però quando eseguo la ricerca dall'URL scompare il codice /?m=1 quindi è come se non si sta più navigando nella versione desktop, sembra che mi sposti dalla versione mobile al desktop. Bisognerebbe trovare una casella di ricerca che sia in grado di aggiungere /?m=1 alla fine di ogni link in automatico... ma la vedo dura.

      Elimina
  4. Ciao, non so se puoi aiutarmi anche in questo caso.
    Sul mio blog non appare il banner pubblicitario per mobile (pur avendo la versione personalizza), malgrado lo abbiamo inserito sia tramite widget, sia in html. L'ho inserito sia dopo Content che Mobile.

    Ho provato inserendo anche mobile=yes ma nulla e sembra strano anche a quelli di Eadv. Potrei inserire qualcos'altro?
    Grazie

    RispondiElimina
    Risposte
    1. Il banner per il mobile è in linea di massima diverso da quello per il desktop. Leggi qui
      http://www.ideepercomputeredinternet.com/2014/06/banner-adsense-versione-mobile-blogger.html
      @#

      Elimina
    2. Ho risolto, grazie. Utilizzo banner di Eadv e ho inserito il codice sotto la parte b:includable id='mobile-post' var='post'

      Elimina
  5. Ciao Ernesto. Io ho sul blog un menu di quelli che hai proposto in precedenza, inserito nella navbar, ma nella versione mobile non si vede, come posso fare?

    RispondiElimina
    Risposte
    1. Fai come me. Anche il mio menù non si vede. Puoi lasciare così com'è oppure mettere una condizione per visualizzarlo solo da desktop
      http://www.ideepercomputeredinternet.com/2014/11/blogger-tag-condizionali-desktop-mobile.html
      @#

      Elimina
    2. Pensavo di creare un menu solo per la versione mobile ma diventa troppo complicato. Volevo chiederti, invece, come mai quando visualizzo dal cellulare il mio blog (scegliendo di vederlo in visualizzazione web) il testo del post compare scritto con un font più grande e, all'interno dello stesso articolo, alcune parti hanno un'interlinea, nelle altre le frasi si discostano di più? Com'è possibile? Dal pc mi sembra tutto a posto.

      Elimina
    3. Se apro il mio sito a visualizazione web con il browser di default di Android ci vedo una linea bianca in mezzo :) Sono problematiche che non possono essere affrontate dall'amministratore del sito ma che dipendono da dispositivo, browser, marca dello stesso, ecc
      @#

      Elimina
  6. Ciao Ernesto. Ho una domanda =)
    Sarebbe possibile, avendo un template completamente responsive con quindi la visualizzazione da mobile disattivata, nascondere un widget solo in determinate circostanze? Per esempio in base al dispositivo che sta visualizzando la pagina web ?

    RispondiElimina
    Risposte
    1. Domanda molto interessante. Bisognerebbe usare il tag display: none;
      http://www.ideepercomputeredinternet.com/2011/12/come-nascondere-un-elemento-del-blog.html
      con il vincolo che funzioni solo quando la pagina è aperta da dispositivi con una risoluzione inferiore a una data
      http://www.ideepercomputeredinternet.com/2015/06/media-query-iphone-ipad-galaxy-htc-nexus.html
      Seguimi i prossimi giorni, magari ci possa fare un post
      @#

      Elimina
  7. Ciao Ernesto, sto impazzendo da giorni con la versione mobile delmio blog.. Ho uno spazio assurdo tra l'intestazione del blog e il menù e credevo che fosse un problema del widget che è in altoprima dei post che mostra gli ultimi post pubblicati, così ho segutolaprocedura non mostrandolo nella versione mobile, ma il problema resta. Non so quale sia l'elemento che da problemi e crea quello spazio nella versione mobile. Se ci fai caso.. anche l'header è in miniatura, boh.. Grazie mille

    RispondiElimina
    Risposte
    1. @# Prova a incollare questo codice

      <b:if cond='data:blog.isMobile'>
      <style>
      #Header1_headerimg {margin-bottom:-120px !important;}
      </style>
      </b:if>

      subito sopra alla riga </head>

      Elimina
    2. Provato... mi taglia del tutto l'intestazione del blog.. ma mi lascia quell'enorme spazio bianco sotto..

      Elimina
    3. Ho visto utilizzando ispeziona elemento tramite screenfly della verzionemobile delmio blog.. che il blocco di codice è .header-outer, e diminuendo l'altezza dell'header da 195 a 40 si riduce lo spazio bianco.. Ovviamente questo valore 195 va benissimo nella versione desktop, ma in quella mobile va ridotto. Come posso fare? Grazie

      Elimina
    4. Inserisci la modifica tra i due tag condizionali che ho usato nel commento 8.a. La prima e la ultima riga
      @#

      Elimina
    5. Che intendi come modifica? che riga devo inserire? questa?

      #header-outer {height:40px !important;}

      Scusami..

      Elimina
    6. @# Prova con questo

      <b:if cond='data:blog.isMobile'>
      <style>
      div.header-outer, header-outer {height:60px !important;}
      </style>
      </b:if>


      da incollare sopra a </head> altrimenti tenta con altri selettori e altri tag

      Elimina
    7. Perfetto!!!!!! ti ringrazio di cuore Ernesto! :-D

      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.