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

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 

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

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 

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

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

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.