Pubblicato il 25/11/14e aggiornato il

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 

versione-desktop-mobile

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.




4 commenti :

  1. Funziona anche la versione

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

    prima di </head>. Almeno di solito faccio così. ;)

    RispondiElimina
    Risposte
    1. Certo che funziona ma per la versione mobile. Il problema era la versione desktop con cui si può usare il tag complementare a quello con l'aggiunta di false
      @#

      Elimina
  2. Caro Ernesto il mio blog grazie alle tue dritte ora è perfetto...ho solo un problema: nella versione mobile le foto dei posts non si vedono a buona risoluzione ed ho notato che in blog di amici sempre fatti con blogger questo non accade...come posso migliorare la qualità delle immagini nella versione mobile?

    RispondiElimina
    Risposte
    1. È la prima volta che sento di questo problema quindi non ti so dare risposta. Nel caso venissi a conoscenza di qualcosa di utile ci farò un post
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.