Come mostrare widget diversi su Blogger in funzione delle diverse risoluzioni dei dispositivi mobili con cui viene aperto il sito.
La risoluzione dei dispositivi mobili è già una discriminante per il layout di una pagina. Sotto una certa risoluzione nei siti su piattaforma Blogger viene di default mostrato il modello per la versione mobile. Tale modello può essere scelto tra quelli disponibili oppure si può optare per Personalizza in modo da riproporre anche da mobile alcuni aspetti della grafica desktop.
Bisogna andare su Modello > Cellulare > Icona della ruota dentata per poi mettere la spunta su Sì. Mostra il modello per cellulari nei dispositivi mobili. Nel menù verticale si sceglie Personalizza quindi si va su Salva per rendere le modifiche effettive.
Nella versione per dispositivi mobili vengono mostrati solo i widget presenti nella colonna principale del layout mentre quelli della sidebar verranno nascosti. Anche quelli inseriti nell'area denominata "main" non sempre vengono però correttamente visualizzati. Se uno di questi widget non si visualizzasse da mobile bisognerà andare su Modello > Modifica HTML e cercare, con Ctrl+F, il nome del widget per individuarne il codice
Dovremo aggiungere mobile='yes' nella prima riga del widget come mostrato nello screenshot e eventualmente modificare l'attributo mobile='no' se fosse già presente. Si salva il modello.
Per verificare da computer se un widget venga visto o meno da mobile si può usare il tool Screenfly (vai a Screenfly) e si incolla l'URL della pagina da testare con l'aggiunta di ?m=1 .
COME MOSTRARE UN WIDGET SOLO PER CERTE RISOLUZIONI
Da un commento ricevuto un paio di giorni fa mi è stata presentata l'esigenza di mostrare un widget solo se la risoluzione di un dispositivo mobile fosse superiore a un certo numero di pixel. Se il widget fosse per esempio largo 600 pixel potrebbe essere difficile mostrarlo in dispositivi con una risoluzione inferiore. Per inserire questa personalizzazione useremo la regola media query che ci consente di inserire dei vincoli in tal senso nel modello di Blogger.
Per prima cosa bisogna individuare l'ID del widget. Si va su Layout e si clicca su Modifica e si scorre fino in fondo l'indirizzo presente nella parte alta dell'elemento pagina per trovare l'ID
Si va quindi su Modello > Modifica HTML e si cerca la riga ]]></b:skin> , quindi, subito sopra a questa, si incolla un codice con questa struttura
@media screen and (min-width: 0px) and (max-width: 599px) {
#Profile1 {display:none;}
}
#Profile1 {display:none;}
}
Si salva il modello. L'ID del widget, in questo caso Profile1 , è puramente indicativo. Per i widget HTML sarà HTML1, HTML2, HTML3, ecc. Anche i valori della risoluzione in cui non mostrare il widget con il tag display:none; possono essere adattati alle nostre esigenze.
COME MOSTRARE UN WIDGET ALTERNATIVO O UN AVVISO
Per i lettori che dovessero aprire la pagina con un dispositivo senza la risoluzione necessaria potrebbe essere necessario inserire un widget alternativo da mostrare al posto di quello visibile con alta risoluzione oppure un avviso testuale che informi il lettore di questa mancanza. A titolo di esempio prendiamo in considerazione questa seconda ipotesi. Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e si digita il messaggio da mostrare al posto del widget
Si può cliccare su Formato RTF per visualizzare Modifica Html per digitare e formattare il testo. Si va su Salva e poi si posiziona l'elemento pagina subito sopra o sotto al widget da sostituire.
Si va poi in alto su Salva Disposizione. Per mostrare questo widget anche nella versione mobile dobbiamo andare su Modello > Modifica HTML, cercare il codice del widget tramite il suo titolo per poi aggiungere mobile='yes' alla riga iniziale del widget come abbiamo già visto.
Adesso dobbiamo inserire un vincolo in modo che questo widget aggiuntivo si debba visualizzare solo per risoluzioni inferiori strettamente ai 600 pixel. Dovremo quindi ricavarne l'ID come mostrato in precedenza. L'ID del gadget usato nel test è HTML4 quindi faremo riferimento a questo anche nel codice. Si torna su Modello > Modifica HTML e si cerca ancora la riga ]]></b:skin>. Subito sopra a questa si incolla questo codice
@media screen and (min-width: 600px) {
#HTML4 {display:none;}
}
#HTML4 {display:none;}
}
Si salva il template. Con questo codice il widget sarà nascosto per risoluzioni superiori a 600 pixel cioè proprio quando ci sarà la condizione per la visibilità del widget iniziale
In sostanza si potranno mostrare diversi widget a seconda delle risoluzioni dei dispositivi con cui si aprono le pagine. I codici proposti sono solo indicativi e possono essere adattati alle varie esigenze. Il funzionamento di questi codici può essere testato nella Demo qui sotto
Nessun commento :
Posta un commento
Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy