Come mostrare widget e elementi solo nella versione desktop o solo nella versione mobile dei blog su Blogger.
Come è noto Blogger ha dato ai suoi utenti la possibilità di usare i tag condizionali per scegliere quali elementi mostrare in un determinato tipo di pagine o in un dato post. Da più di due anni esiste anche la versione mobile di tutti i blog su Blogger. Inoltre il traffico proveniente da dispositivi mobili, sebbene ancora nettamente inferiore a quello desktop per la maggior parte dei blog, sta crescendo a ritmi vertiginosi. Nasce quindi l'esigenza di creare un sito che abbia un aspetto diverso a seconda che venga aperto dal computer o dal tablet.
La versione mobile di Blogger funziona molto bene con i modelli ufficiali di Blogger mentre non è così per quelli anche solo parzialmente personalizzati. Di default viene mostrata nella versione mobile solo la colonna centrale dell'area del post e quindi i gadget posizionati nelle sidebar non si vedono a meno che non si attivi la visualizzazione desktop anche da cellulare.
I widget mostrati di default sono i seguenti: Intestazione, Post su blog, Profilo, Widget delle Pagine, Adsense e Attribuzione. Per quello che riguarda Adsense viene mostrato il relativo annuncio solo se inserito mediante widget da Layout mentre non è così per gli annunci aggiunti mediante codice.
Attraverso la proprietà mobile possiamo fare in modo di nascondere un widget nella visualizzazione mobile oppure di mostrarlo solo in quella modalità. Le opzioni sono:
- mobile='default'
- mobile='yes' per mostrare il widget anche negli smartphone e nei tablet
- mobile='no' per non mostrare il widget nei dispositivi mobili
- mobile='only' per mostrare il widget solo nei dispositivi mobili
Dopo essere andati su Modello > Modifica HTML > Procedi, si espandono i modelli widget e si cerca il gadget che vogliamo personalizzare per il mobile. Facciamo l'esempio di Attribution che è il link visualizzato alla fine del blog con i crediti verso i realizzatori del modello. Si troverà un codice del tipo
<b:widget id='Attribution1' locked='false' title='' type='Attribution'>
Per non visualizzarlo nei dispositivi mobili va modificata questa riga in questo modo
<b:widget id='Attribution1' locked='false' mobile='no' title='' type='Attribution'>
Il risultato di questa operazione sarà il seguente
Per operare ulteriori personalizzazioni occorre essere sicuri che nel nostro template sia presente la riga
<body expr:class='"loading" + data:blog.mobileClass'>
che è tipica dei template del Designer Modelli. Per operare una personalizzazione in un elemento del template così come è visualizzato nel mobile occorre cercare la riga
/* Mobile
----------------------------------------------- */
----------------------------------------------- */
al di sotto della quale ci sono le classi di stile di tutti gli elementi mostrati di default come per esempio
.mobile .date-header span {
padding: 0.1em 10px;
margin: 0 -10px;
}
padding: 0.1em 10px;
margin: 0 -10px;
}
che determina l'aspetto della data dei post.
MOSTRARE UN WIDGET SOLO NEI DISPOSITIVI MOBILI
Per mostrare un widget solo nei dispositivi mobili bisogna ricordarsi che questa operazione in linea di massima si può fare solo con i gadget presenti nella colonna centrale. Dopo aver individuato il nome o l'ID del gadget si va su Modello > Modifica HTML > Procedi e si espandono i modelli widget. Si cerca il widget e, scorrendo il suo codice, si incolla subito sotto la riga
<b:includable id='main'>
la condizione
<b:if cond='data:blog.isMobile'>
e subito sopra la riga
</b:includable>
la fine della condizione
</b:if>
Si possono anche inserire nel modello delle condizioni per mostrare un dato elemento a chi apra la pagina da un browser desktop e un altro elemento a chi la apra con un dispositivo mobile. In questo caso nel modello dovremmo inserire un codice come questo ultimo
<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 desktop
</b:if>
<!-- Visibile solo nei dispositivi mobili-->Codice dell'elemento visibile con il mobile
<b:else/>
<!-- Visibile solo tramite desktop -->Codice dell'elemento visibile tramite desktop desktop
</b:if>
Si potrebbe per esempio optare per mostrare una immagine ai normali visitatori da computer che diventa invece un più leggero link per chi apra la pagina via dispositivo mobile.
Molto interessante!!!! Avevo già sperimentato l'inserimento del gadget di adsense. Funzionava perfettamente ma mi creava problemi nella maschera del layout di blogger, nel senso che non riuscivo più a salvare la pagina dopo aver spostato qualche gadget. Sapresti dirmi perchè?
RispondiElimina@ LaCucina...
EliminaMi sopravvaluti, non posso conoscere anche perché non viene salvata una disposizione. Forse non lo sanno bene neppure i componenti del Team di Blogger :)
Non è assolutamente vero che ti sopravvaluto! Il tuo lavoro è stato ed ed è fondamentale per il mio blog! Sono io che sono andata oltre! Grazie come sempre e a presto.
EliminaPost molto utile. C'è un modo per ridurre, solo nella versione mobile le dimensioni dell'header? Troppo grande nella versione mobile.
RispondiEliminaGrazie ;)
@ Tiziana
EliminaIn teoria basterebbe inserire due widget Intestazione con le condizioni che quello più grande sia visibile solo via computer e quello più piccolo solo dal cellulare. Però aspetterei che questo metodo diventasse più affidabile. In alcuni modelli ho visto che questi tag non funzionano
Ok, aspetteremo ;-)
EliminaThank you!
ciao vorrei rendere visibile da desktop una photogallery nel post fatta con flash player e invece da cellulare vorrei mostrare solo le immagini semplicemente una in fila all'altra con didascalia sotto, ho provato con il codice in alto editando direttamente la pagina del post in html ma vedo sempre entrambe, non sembra funzionare, devo intervenire anche nel modello in generale? mettendo anche lì qualche condizione? grazie in anticipo
RispondiElimina@TimeinSpace
EliminaIn li inea di massima dovresti creare un widget con la galleria in flash e un altro con le miniature per poi inserire nel modello le condizioni che vengano visti rispettivamente solo nel desktop e solo nel mobile. Le istruzioni di Blogger sono chiare e semplici però nei test ho visto che non funzionano. Funziona solo quando si vuole nascondere un widget nel mobile ma non quando si vuol nascondere nel desktop. Forse sarà una questione di modello. Vedremo in seguito quando la cosa sarà più chiara.
Il problema della diversa visualizzazione da parte dei diversi browser desktop si ripropone anche sul mobile. Non mi stupisco che su Windows Phone si veda male visto quello che succede o meglio succedeva con IE visto che con IE10 e IE11 la maggior parte delle cose sono andate a posto.
RispondiEliminaPersonalmente ho modificato l'aspetto della visualizzazione mobile di questo blog testando solo su Android. Non è una cosa semplicissima e non si possono dare consigli generali. Intuitivamente vai su Modello > Modifica HTML > Vai al widget > Blog1 e considera il codice nella sezione
b:includable id='mobile-post' var='post'
che ha il codice per la versione mobile personalizzata mentre il codice per la versione desktop si trova nella sezione successiva
b:includable id='post' var='post'
Leggi anche questo post
http://www.ideepercomputeredinternet.com/2013/10/blogger-versione-mobile-desktop-personalizzare-editor-html.html
@#
Per visualizzare un widget anche nel mobile non deve essere nelle sidebar e nel footer ma è possibile farlo solo se è insertito nel modello. Spesso dobbiamo inserire il codice due volte nel template. La prima per mostrarlo nella versione desktop e la seconda per visualizzarlo su mobile. Segui questo post
RispondiEliminahttp://www.ideepercomputeredinternet.com/2013/10/blogger-versione-mobile-desktop-personalizzare-editor-html.html
e dai pure uno sguardo a quest'altro che ti potrebbe essere utile
http://www.ideepercomputeredinternet.com/2014/11/blogger-tag-condizionali-desktop-mobile.html
@#
Ciao Ernesto, innanzitutto ottimo servizio, il mio blog sta crescendo grazie ai tuoi tutorial.
RispondiEliminaVorrei sapere se è possibile visualizzare su dispositivi mobili un menù a tendina delle etichette.... funziona perfettamente su desktop ma non compare sulla versione mobile. Per intenderci io sto utilizzando un menù a tendina che ho trovato su questo tutorial nel tuo blog...
http://www.ideepercomputeredinternet.com/2011/04/come-creare-un-menu-verticale-con-tutte.html
E' possibile farlo comparire su dispositivi mobili?
Grazie Andrea Q.
I menù che funzionano su mobile sono rari. In questo sito ne ho presentato solo uno
Eliminahttp://www.ideepercomputeredinternet.com/2014/07/blogger-responsive-menu-2-level.html
@#
Grazie per la pronta risposta. Proverò con i link esterni usando il widget delle pagine
RispondiEliminaBuongiorno Ernesto, utilissimi i tuoi consigli!
RispondiEliminaHo bisogno di una tua mano....vorrei visualizzare i tasti di condivisione social nella versione mobile.
Come fare? Es. twitter/fb/mail/google plus
Grazie mille, Silvia
Ti potrebbe essere utile questo post
Eliminahttp://www.ideepercomputeredinternet.com/2014/10/blogger-mobile-facebook-mi-piace-googleplus-twitter.html
@#
Ciao! Io vorrei cambiare il colore del background solo x mobile... ma non riesco a capire come! Hai qualche suggerimento?
RispondiEliminaSu due piedi non saprei. Salvo il tuo commento per vedere se trovo la soluzione quando ho un po' di tempo. Nel caso ci riuscissi pubblicherò un post quindi seguimi nei prossimi giorni (senza impegno)
Elimina@#
Ciao, bella guida,
RispondiEliminapotresti gentilmente aiutarmi a creare un "widget" che sia visibile solo nella versione mobile,
per l'informativa sui cookie?
altrimenti devo usare la versione mobile "personalizzata" di Blogger, che rallenta tutto.
Grazie mille!
Temo di non aver capito. Su Blogger ci sono dei tag per mostrare un elemento solo nella versione mobile o solo nella versione desktop però funzionano solo se si attiva Personalizza su Modello > Cellulare > Ruota dentata. Comunque ti linko una soluzione con vidget diversi per mobile e per desktop che potrà aiutarti
Eliminahttp://www.ideepercomputeredinternet.com/2015/05/cookie-law-desktop-mobile-blogger-barra-notifica-schermata-iniziale.html
@#
Ciao Ernesto, si puo' creare un tag condizionale per la vesrione mobile che permetta di ridurre la dimensione del titolo troppo grande in questa versione rispetto a quella desktop? Grazie.Buon fine settimana.
RispondiEliminaHo già provato e i tag condizionali non funzionano con h1, h2, h3 e h4 perché già presenti nel template. Si può solo provare a modificare il modello come illustrato in questo post. Per personalizzare le Intestazioni anche nei dispositivi mobili si possono usare i tag h5 e h6 come spiegato in questo articolo
Eliminahttp://www.ideepercomputeredinternet.com/2015/10/intestazioni-blogger-mobile.html
@#
Si può eliminare il titolo dalla versione mobile?
RispondiEliminaSi può nascondere aggiungendo questa riga di codice
Elimina.mobile h3.post-title {display:none;}
prima di ]]></b:skin>
@#
Niente da fare, uff... Non riesco a toglierlo
EliminaHo visto che nella tua versione mobile a te non spunta il titolo, hai usato quel codice? Oggi non me ne va bene una. :/
EliminaNo a me si vedono i titoli di tutti i post ma forse tu ti riferivi alla Intestazione del blog
Eliminahttp://www.ideepercomputeredinternet.com/2016/11/blogger-header-mobile-media-screen.html
@#
Sì, perfetto, intendevo quel codice, grazie!
EliminaCiao Ernesto, grazie come sempre per tutte le dritte. Volevo segnalare che da qualche tempo non funziona correttamente il menu di default nella versione mobile. Mi spiego meglio: non si leggono i titoli delle pagine, ma appare solo un riquadro bianco con un"un pallino blu" che serve per scegliere di aprire una pagina piuttosto che un'altra.
RispondiEliminaHo fatto un controllo su più blog, in particolare in quelli con un menu di navigazione non personalizzato, e in tutti i blog ho notato questo stesso problema, sempre e solo per quanto riguarda il menu da mobile.
Puoi aiutarmi? Grazie mille in anticipo...
Il tuo blog è questo?
Eliminahttp://www.encanthe.com/
Hai un modello personalizzato con un menù particolare, non mi stupisco che non funzioni nella versione mobile. Ho provato con un blog di test
http://i.imgur.com/78hqrfY.jpg
e funziona nell'emulatore Screenfly
http://quirktools.com/screenfly/#u=http%3A//demo-blogger-widget.blogspot.it/%3Fm%3D1&w=414&h=736&a=37&s=1
Quando ci sono dei malfunzionamenti da mobile bisogna controllare alcune cose
1) Andare su Modello -> Cellulare per vedere se si è impostato il modello da mobile e se si è scelto il Modello Personalizza
2) Controllare con l'emulatore per verificare che non sia un problema del modello di cellulare o di alcune impostazioni
@#
Questo commento è stato eliminato dall'autore.
RispondiElimina