Installare widget della sidebar di Blogger anche nella versione mobile.

Come visualizzare un widget della sidebar di Blogger anche nella versione mobile e come personalizzarlo singolarmente.

Il Tema della versione mobile di Blogger non ha le sidebar quindi i widget installati in una sidebar non saranno visibili se il blog viene aperto da dispositivo mobile.

Questo in linea generale perché come certo saprete ci sono anche i Temi Responsive per Blogger che adattano il layout al dispositivo e alla risoluzione con cui viene aperta la pagina. Se non si utilizza un Modello Responsive è consigliabile abilitare la versione mobile di Blogger con il Tema Personalizza.

Si va su Bacheca -> Tema -> Cellulare e si clicca sulla ruota dentata posta al di sotto. Si mette la spunta su  Sì. Mostra la versione mobile del tema sui dispositivi mobili per poi scegliere Personalizza in Scegli tema per dispositivi mobili. Si va su Anteprima per vedere l'aspetto del blog con quel Tema e si clicca su Salva.

La scelta di Personalizza è fondamentale per poter personalizzare il Tema della versione mobile che altrimenti non si potrebbe modificare agendo sul suo codice. Ricordo che il Codice di Blogger è suddiviso in sezioni che servono appunto per modificare l'aspetto da desktop e da mobile.

VISUAZLIZZARE UN WIDGET DELLA SIDEBAR NELLA VERSIONE MOBILE

I widget presenti nella sidebar della versione desktop non saranno visibili in quella mobile perché tale versione ha solo la colonna principale. Per mostrare un widget anche su mobile dovremo procedere così:

1. Installare un secondo widget come quello della sidebar
2. Posizionare questo secondo widget sopra o sotto l'area principale del blog
3. Aggiungere i tag condizionali per visualizzare questo widget solo nei dispositivi mobili.

Per rendere le cose più semplici vediamo come installare il Page Plugin di Facebook anche su mobile sotto all'area del post. Dovremo installare due gadget uguali per poi andare in alto a destra su Salva Disposizione.

Questi due widget saranno visti entrambi su desktop. Dobbiamo mettere dei vincoli al widget posizionato sotto l'area del post per visualizzarlo solo da mobile. Quello presente nella sidebar sarà comunque visibile solo da desktop. La prima operazione da fare è cliccare su Modifica nell'elemento pagina di tale widget.

Si scorre fino alla fine l'indirizzo del widget visibile in alto della finestra per prendere nota dell'ID del widget. Nello screenshot è HTML2 e si trova alla fine dell'URL dopo widgetId=.

Adesso si va su Tema -> Modifica HTML e con CTRL+F si cerca l'ID del widget appena trovato. Si cliccherà sulle freccette nere presenti sulla sinistra per visualizzare tutto il codice del widget

Tale codice inizierà con la riga <b:widget ... e terminerà con </b:widget>. Nella prima riga si aggiunge mobile='only' dopo locked='false'  quindi si incolla la riga

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

subito sotto alla riga

<b:includable id='main'>

e la riga

</b:if>

subito sopra a

</b:includable>

Si salva il tema. Per controllare il risultato non resta che aprire il blog con un dispositivo desktop e con un dispositivo mobile oppure con lo strumento Screenfly.

Visto che i widget installati sono due, uno per la sidebar da desktop e uno per il mobile, si possono personalizzare in modo diverso per quello che riguarda la larghezza, i colori e gli altri parametri.