Come visualizzare un elemento o un CSS solo nella versione desktop o solo in quella mobile di Blogger.

Come usare i tag condizionali per mostrare un oggetto solo nella versione mobile o solo nella versione desktop di Blogger.

La piattaforma Blogger mette a disposizione degli webmaster quelli che vengono definiti i tag condizionali per selezionare la tipologia di pagine in cui attivare un determinato codice. Si può trattare di un codice di un widget inserito in una sidebar o di un pulsante installato nel modello. Non mi risulta esista un elenco ufficiale di Blogger di questi tag o se esiste non sono riuscito a trovarlo. I tag condizionali elencati nel post appena linkato sono frutto della mia esperienza personale.

Blogger dà anche la possibilità di personalizzare sia la versione mobile sia la versione desktop operando nello stesso template. Proprio cercando di ottimizzare questo sito mi sono trovato di fronte a un problema di cui voglio condividere la soluzione che ho trovato. Una linea orizzontale inserita sotto il titolo del post, il nome dell'autore e le etichette dell'articolo con le distanze calcolate per la versione desktop in quella mobile mi si posizionava invece proprio sopra il titolo. Quello che si dovrebbe fare in questi casi è creare una condizione per cui i CSS utilizzati valgano solo per la versione desktop. Nei template di Blogger però è presente solo il tag condizionale per mostrare un elemento solo nella versione mobile che è il seguente 

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

Non c'è un corrispettivo tag per la versione desktop. Si può però risolvere costruendolo ex novo

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

che abbia come condizione quella che attiva il codice ivi compreso solo se sia falsa l'affermazione che la versione sia quella mobile.  In sostanza la condizione è quella che la versione sia desktop. Ritornando all'esempio che mi ha ispirato, il CSS da utilizzare era il seguente 

div.post-header {border-bottom:1px solid #191919; line-height:50px; margin-top:-7px;}
span.post-labels, span.post-author.vcard {font-size:13px; font-style:italic;}
a.g-profile {font-variant:small-caps; font-weight:bold; font-size:15px;}

che avevo incollato sopra alla riga ]]></b:skin>. Ho integrato detto codice in questo modo 

<b:if cond='data:blog.isMobile == "false"'>
<style>
div.post-header {border-bottom:1px solid #191919; line-height:50px; margin-top:-7px;}
span.post-labels, span.post-author.vcard {font-size:13px; font-style:italic;}
a.g-profile {font-variant:small-caps; font-weight:bold; font-size:15px;}
</style>
</b:if>

per poi incollarlo subito sopra alla riga </head> visto che i tag condizionali non possono essere usati nella sezione <b:skin>. Le righe evidenziate di giallo servono quindi per attivare il codice solo nella versione desktop mentre il CSS evidenziato di verde serve per visualizzare la linea orizzontale 

Nella versione mobile tale riga è sparita visto che il CSS è attivo solo nella versione desktop. Riassumendo ecco i tag condizionali per mostrare un contenuto solo in una data versione

<b:if cond='data:blog.isMobile'>
Codice che si attiva solo nella versione mobile
</b:if>

e

<b:if cond='data:blog.isMobile == "false"'>
Codice che si attiva solo nella versione desktop
</b:if>

USARE L'ATTRIBUTO FALSE IN ALTRI TAG CONDIZIONALI

Sulla falsariga di quanto detto possiamo utilizzare l'attributo false per creare dei nuovi tag condizionali per Blogger. Consideriamo i tag seguenti 

<b:if cond='data:post.allowComments'>        1) Post in cui sono permessi i commenti
<b:if cond='data:post.isFirstPost'>                  2) Solo nel primo post

e aggiungiamo a entrambi l'attributo false per creare questi due nuovi tag

<b:if cond='data:post.allowComments == "false"'>  3) Se non sono consentiti i commenti
<b:if cond='data:post.isFirstPost == "false"'>            4) Post che non sia il primo

con il relativo campo d'azione che è il complementare in senso insiemistico del tag condizionale da cui derivano. Il tag 1) può essere usato per inserire una personalizzazione solo nei post e nelle pagine statiche in cui sono consentiti i commenti come per esempio il sistema di commenti multipli di Blogger, Facebook e Google+. Il tag 2) è utile per mostrare i banner pubblicitari solo nel primo post della homepage o delle pagine di etichette o di archivio. Il tag 3) potrebbe quindi servire per mostrare qualcosa di alternativo ai commenti nei post in cui non sono consentiti mentre il tag 4) si può usare per mostrare elementi diversi dai banner pubblicitari nei post che non siano il primo.