Visualizzare un elemento o un css su Blogger solo su mobile o desktop


Gli utenti si collegano più da mobile che da PC e quindi bisogna tener conto anche della versione mobile del proprio blog. Di solito si tende a personalizzare solo la versione desktop perché è quella che si utilizza maggiormente per scrivere gli articoli e questo non è corretto, bisogna dare attenzione ad entrambe le versioni. Infatti quando si vanno ad inserire codici css o altri elementi all'interno del modello, può capitare che sulla versione mobile, certe cose si vedano male o addirittura certi "abbellimenti" possono rallentarne il caricamento delle pagine. Chi invece possiede un blog a scopo commerciale potrà sfruttare questo nuovo metodo appreso per mostrare o nascondere la pubblicità da una parte o dall'altra.

In questo articolo viene spiegato come mostrare un elemento o un css su Blogger solo nella versione mobile o solo nella versione desktop del blog. In tutti i casi, i codici si devono aggiungere prima del tag di chiusura </head>.

Per mostrare un elemento solo nella versione mobile del blog, il codice da utilizzare è il seguente:
<b:if cond='data:blog.isMobile'>
Codice da mostrare solo nella versione mobile
</b:if>

Per mostrare un elemento solo nella versione desktop del blog, il codice da utilizzare è il seguente:
<b:if cond='data:blog.isMobile == "false"'>
Codice da mostrare solo nella versione desktop
</b:if>

Dovete solamente sostituire le scritte in blu con il codice di un elemento che volete mostrare (script, iframe, banner pubblicitari ecc.). A tal proposito ricordo che i codici che volete mostrare o nascondere dovranno essere convertiti con Parse HTML, perché il modello di Blogger usa il linguaggio xml.

Per mostrare un css dovete utilizzare uno dei due codici precedenti, a seconda se volete mostrarlo solo nella versione mobile o solo nella versione desktop ed in più dovrete racchiuderlo fra i tag di stile, ad esempio:
 <style>
CSS da mostrare o su desktop o su mobile
</style>

Ricordo che è anche possibile mostrare un widget solo nella homepage, solo nei post o solo nelle etichette utilizzando gli appositi tag condizionali di Blogger.



2 commenti :

  1. Come si può decidere la posizione del codice nella versione mobile?
    Esiste un modo? Grazie!

    RispondiElimina
    Risposte
    1. si, però è una guida che non ho ancora fatto, cercherò di realizzarla al più presto :)

      Elimina

I commenti dovranno prima essere approvati da un amministratore. Verranno pubblicati solo quelli utili a tutti e attinenti al contenuto della pagina. Per commentare utilizzate un account Google/Gmail, altrimenti la modalità "anonimo".