Pubblicato il 02/12/15e aggiornato il

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

posizionare-widget-area-post

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=

id-widget-blogger 

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

ricerca-widget-modello-blogger

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

aggiungere-mobile

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.

mostrare-widget-solo-su-mobile-blogger

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.

tag-condizionali-blogger

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.




5 commenti :

  1. Fantastico! Grazie per aver condiviso questo utilissimo post :-)
    Funziona correttamente.
    Melania

    RispondiElimina
  2. Ciao, un dubbio: la versione tablet è assimilabile alla mobile?

    RispondiElimina
    Risposte
    1. Non esiste la versione tablet. Quando Blogger rileva che viene aperto con un tablet scarica la versione mobile. Naturalmente con i tablet ma anche con gli smartphone si può scegliere di visualizzare la versione desktop del sito
      @#

      Elimina
  3. Ciao, funziona benissimo, ma come posso centrare i vari widget che voglio far vedere? Per ora sono tutti allineati verso sinistra, ma preferivo qualcosa di più ordinato.
    grazie mille

    RispondiElimina
    Risposte
    1. Non c'è una regola precisa per centrare un widget. Bisogna trovare il suo ID e poi provare a incollare un CSS nel modello sopra alla ultima riga della sezione b:skin, tipo

      #IDWidget {text-align:center;}

      Dipende però dal widget. Qualche volta quella riga non funziona e allora si può provare con quest'altra
      #IDWidget {margin: 0 auto;}
      Per saperne di più leggi qui
      http://www.ideepercomputeredinternet.com/2014/11/centrare-orizzontalmente-verticalmente-css.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.