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>

In questa guida abbiamo parlato di elementi, cioè codici incollati manualmente all'interno del tema. Per mostrare un widget solo su mobile o desktop, invece, bisogna utilizzare un'altra guida dove bisogna specificare l'ID del widget.

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