Come usare i tag condizionali su Blogger per mostrare widget, banner, contenuti solo nei post, nelle pagine o in homepage

Tra gli strumenti di Blogger di cui gli utenti possono usufruire hanno un ruolo di assoluto rilievo quelli che vengono definiti i tag condizionali. Si tratta di inserire delle condizioni per mostrare elementi o widget solo quando queste condizioni si manifestino. In questo modo per esempio possiamo fare in modo di mostrare le icone dei social network solo nei post oppure di visualizzare un dato widget solo in una determinata pagina statica del sito.

Il meccanismo con cui Blogger permette queste impostazioni è basato sui Tag dei Dati per i Layout di Blogger che sono delle espressioni assimilabili a delle funzioni che prendono un determinato valore quando siano inserite correttamente in un codice. Tali espressioni non sono tag HTML e funzionano solo nei modelli di Blogger.

Tanto per fare 2 o 3 esempi ricordo che se inseriamo nel modello questo tag <data:blog.title/> il browser rileverà il nome del blog così come si potrà verificare anche dal Sorgente Pagina che si attiva digitando Ctrl+U. L’espressione data:post.title determina il Titolo del post mentre il tag data:post.body è il contenuto dell’articolo e viene utilizzato per aggiungere contenuti subito sopra o subito sotto l’articolo come banner pubblicitari o icone dei social network.

La sintassi generica per mostrare un contenuto solo se si verifica una certa condizione è la seguente:

 

<b:if cond=’condition’>
[contenuto da visualizzare se la condizione è vera]
<b:else/>
[contenuto da visualizzare se la condizione è falsa]
</b:if>

con due diversi contenuti da mostrare se la condizione è vera oppure è falsa. Questo tipo di condizione si usa per esempio per mostrare due diversi menù per la versione mobile e desktop del sito. Se invece si desidera non mostrare nulla se la condizione è falsa allora si utilizza questa sintassi più semplice:

 

<b:if cond=’condition’>
[contenuto da visualizzare solo se la condizione è vera]
</b:if>
In entrambi i casi i tag condizionali terminano con la riga </b:if> mentre la prima riga è quella che determina la condizione vera e propria. Le condizioni sono spesso inserite in questo modo
cond=’data:blog.pageType == “item”‘

Tale condizione si verifica se la pagina è del tipo item cioè un post. Le virgolette doppie quando si incollano nel modello vengono convertite in linguaggio XML cioè in &quot; e  diventa
cond=’data:blog.pageType == &quot;item&quot;

OPERATORI DI CONFRONTO E EQUIVALENZA 

I due uguali affiancati dal punto di vista logico rappresentano il valore VERO o TRUE in inglese. Utilizzando la stessa sintassi si possono usare anche gli altri operatori di confronto
  1. == significa VERO o TRUE
  2. != significa FALSO o FALSE
  3. < significa MINORE
  4. > significa MAGGIORE
  5. <= significa MINORE o UGUALE
  6. >= significa MAGGIORE o  UGUALE

 

TABELLA DEI TAG CONDIZIONALI PIÙ COMUNI 

CONDIZIONE EFFETTO
<b:if cond=’data:blog.url == data:blog.homepageUrl’> Elemento solo in Home
<b:if cond=’data:blog.url != data:blog.homepageUrl’> Elemento ovunque esclusa la Home
<b:if cond=’data:blog.pageType == &quot;item&quot;’> Elemento solo nei post
<b:if cond=’data:blog.pageType != &quot;item&quot;’> Elemento ovunque esclusi i post
<b:if cond=’data:blog.url == “URL_PAGINA“‘> Elemento solo nella pagina dell’URL
<b:if cond=’data:blog.url != “URL_PAGINA“‘> Ovunque escluso l’URL della pagina
<b:if cond=’data:blog.pageType == &quot;static_page&quot;’> Solo nelle pagine statiche
<b:if cond=’data:blog.pageType != &quot;static_page&quot;’> Ovunque escluse le pagine statiche
<b:if cond=’data:blog.pageType == &quot;archive&quot;’> Solo nelle pagine di Archivio
<b:if cond=’data:blog.pageType != &quot;archive&quot;’> Ovunque escluso pagine di archivio
<b:if cond=’data:blog.pageType == “data:blog.searchLabel”‘> Solo nelle pagine delle etichette
<b:if cond=’data:blog.pageType != “data:blog.searchLabel”‘> Ovunque escluso pagine etichette
<b:if cond=’data:post.isFirstPost’> Solo nel primo post
<b:if cond=’data:blog.pageType == “error_page”‘> Solo nelle pagine non trovate
<b:if cond=’data:blog.pageType != “error_page”‘> Ovunque escluso le pagine errore
<b:if cond=’data:blog.searchLabel == “NOME_ETICHETTA“‘> Post con quella etichetta
<b:if cond=’data:blog.searchLabel != “NOME_ETICHETTA“‘> Ovunque esclusa data etichetta
<b:if cond=’data:post.author == “NOME_AUTORE“‘> Pagine con dato autore
<b:if cond=’data:post.author != “NOME_AUTORE“‘> Pagine non di quell’autore
<b:if cond=’data:post.numComments > 1‘> Post con più di 1 commento
<b:if cond=’data:blog.isMobile’> Visibile solo nei dispositivi mobili
<b:if cond=’!data:blog.isMobile’> Non visibile nei dispositivi mobili
<b:if cond=’data:post.allowComments’> Post in cui sono permessi i commenti
<b:if cond=’data:post.allowComments == “false”‘> Post con commenti non consentiti
<b:if cond=’data:post.hasJumpLink’> Solo nei post con il Read More
<b:if cond=’data:blog.metaDescription’> Solo nei post con la meta descrizione

COME SI UTILIZZANO I TAG CONDIZIONALI CON I CSS

I tag condizionali non sono codice HTML ma funzionano solo nel modello di Blogger. Non funzionano neppure in un widget HTML/Javascript. Con queste condizioni possiamo per esempio fare in modo che determinati CSS vengano applicati solo in certi casi.

Esempio:

<b:if cond=’data:blog.isMobile’>
<style>
/* Regole CSS da applicare solo per visualizzazione da mobile */
</style>
</b:if>

Se si incolla il codice precedente subito sopra la riga </head> si potranno aggiungere delle regole CSS valide solo per chi apra le pagine del nostro sito con un dispositivo mobile. Analogamente si può fare in modo che il titolo di una pagina statica abbia dimensioni più grandi degli altri, ecc.

 

COME USARE I TAG CONDIZIONALI CON I CONTENUTI

Poniamo che si voglia inserire un banner nel nostro layout in modo però che sia visibile solo nel primo post e non in quelli successivi della homepage, delle pagine di etichetta e di archivio. Tale esigenza si presenta per esempio quando si voglia aggiungere un banner pubblicitario subito sotto il titolo del primo post. Se noi incolliamo il codice prima del tag data:post.body che rappresenta il contenuto degli articoli lo vedremo sotto a tutti i titoli dei post presenti in home e nelle altre pagine dinamiche. Si risolve con un codice come il seguente.

<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<b:if cond=’data:post.isFirstPost’>
Codice del Banner Pubblicitario </b:if>
</b:if>
</b:if>

che mostrerà l’unità pubblicitaria solo nelle pagine che non siano post, che non siano pagine statiche e che siano il primo post della pagina.

 

COME USARE I TAG CONDIZIONALI CON I WIDGET

 

I tag condizionali sono molto usati per nascondere un dato gadget in determinate tipologie di pagine e viceversa per mostrare un certo widget solo in una o più pagine. Per applicare tali tag bisogna andare nel Modello e cercare il codice del widget. Ci si può aiutare cercando con Ctrl+F il titolo del gadget oppure il suo ID. Il codice di un widget di Blogger ha solitamente questa struttura.
<b:widget id=’Id Widget‘ locked=’false’ title=’Titolo Widget‘ type=’Tipo del widget’>
<b:includable id=’main’>
<b:if cond=’data:title’><h2><data:title/></h2></b:if>
<div class=’widget-content’>
……….
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

che inizia con <b:widget id=…. e che termina con </b:widget>. Nel codice del gadget sono sempre presenti le due righe evidenziate di giallo nel codice precedente. I due tag condizionali vanno incollati nel template subito sotto la prima riga e subito sopra alla seconda riga in questo modo.

 

Sopra alla riga </b:includable> si incolla il tag di chiusura </b:if>mentre sotto alla riga <b:includable id=’main’> si incolla il tag della condizione da scegliere tra quelle della tabella personalizzata. Si inseriranno cioè dei vincoli per il widget che sarà mostrato solo quando la condizione introdotta sia soddisfatta.

Add a Comment

X