Come mostrare un widget della sidebar di Blogger anche nella versione mobile.

Come mostrare nella versione mobile di Blogger un widget visibile nella sidebar della versione desktop duplicandolo e inserendo appositi tag condizionali.

La versione mobile dei blog su Blogger per ragioni di spazio non mostra la sidebar o le sidebar nel modello desktop.  In un commento mi è stato chiesto se fosse possibile mostrare un widget posizionato nella sidebar anche nella versione mobile. Visto che si tratta di una personalizzazione che penso possa essere utile anche ad altri lettori ho pensato di pubblicare un post sul tema prendendo come esempio il widget delle Etichette. Tale widget come noto si installa andando su Layout > Aggiungi un gadget > Base > Etichette.

La procedura però è assolutamente identica per qualsiasi altro widget come potrebbe essere quello dell'Archivio, quello del Profilo o Informazioni Personali, quello dei Post Popolari, un qualsiasi widget generico HTML/Javascript e addirittura anche quello della Casella di Ricerca.

 

Per prima cosa bisogna aver attivato la versione mobile andando su Bacheca > Modello > Cellulare > Ruota dentata > Mettere la spunta su Sì. Mostra il modello per cellulari nei dispositivi mobili e scegliere Personalizza tra tutti i template disponibili. La seconda operazione è quella di duplicare il widget e posizionare il secondo nella main area vale a dire sopra o sotto l'elemento Post sul blog

Si va in alto a destra su Salva disposizione per rendere la modifica effettiva. Adesso dobbiamo apportare una modifica al template in modo da mostrare nella versione desktop solo il widget della sidebar e nella versione mobile quello posizionato nell'area del post. Per questo scopo bisognerà lavorare sul modello. Prima di questo però bisogna individuare l'ID del widget posizionato nell'area del post. In Layout si clicca su Modifica nell'elemento in oggetto. Si scorre l'URL fino in fondo. L'ID del widget sarà l'ultima stringa dell'URL subito dopo widgetId=

 

Il widget Etichette duplicato avrà ID Label2, diverso da Label1 del widget presente nella sidebar. Questo vale anche per il widget Archivio, Post Popolari o Profilo. Dopo aver salvato il template si va adesso su Modello > Modifica HTML e si cerca tale widget tramite Ctrl+F

Dopo averlo individuato si clicca sulle freccette nere presenti sulla sinistra per visualizzare tutto il codice. La prima modifica da fare è quella di aggiungere mobile='yes' nella prima riga del widget

Se adesso si salva il modello questo widget verrà mostrato anche nella versione mobile. Si può controllare con il tool Screenfly che si visualizzi correttamente. Il problema è che però si visualizzerà anche su desktop.  Per evitare un widget doppione possiamo utilizzare due metodi.

1° METODO

Sostituire il tag mobile='yes' con mobile='only'. Si salva il modello e si controlla che il widget inserito sia visibile solo da mobile e non da desktop.

Questa semplice modifica dovrebbe impedire la visualizzazione del widget da desktop

.

2° METODO

Se il semplicissimo 1° Metodo non funzionasse allora dovremo utilizzare i tag condizionali. Si scorre il codice del widget fino a trovare la riga

<b:includable id='main'>

e, subito sotto a questa, si incolla

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

quindi, sempre scorrendo verso il basso, si trova la nuova riga

</b:includable>

e, subito sopra a questa, si incolla il tag

</b:if>

Finalmente si salva il template.

Non resta altro che aprire un post del sito con un browser desktop e con un dispositivo mobile (o con Screenfly) per verificare che il widget sia presente in entrambe le versioni una sola volta. La controindicazione di questo metodo è che il widget sarà visualizzato sotto gli eventuali commenti e questo potrebbe essere non ottimale per i blog che ne ricevano molti.