Comment Utiliser Les Balises Conditionnelles Dans Blogger

Les balises conditionnelles <b:if> / <b:else/> ( si / sinon) sont des éléments spécifiques à Blogger qui offrent davantage de souplesse en permettant de définir des modifications de modèle qui ont lieu uniquement dans certaines conditions.
Les balises des conditions, Blogger Conditional Tags, sont utilisées dans le code HTML du modèle pour indiquer aux navigateurs ce que doit être afficher ou cacher selon le cas.
Vous allez voir que les conditions constituent vraiment la base pour rendre votre blog dynamique, c'est-à-dire pour afficher des choses différentes en fonction de type des pages, de l'auteur, du nombre de commentaires, etc.

Principe Et Syntaxe Des Balises Conditionnelles

Le principe d'utilisation des balises conditionnelles est simple : on définie une condition et le contenu sera exécuté selon tel ou tel cas.
Ces balises peuvent être insérées aussi bien dans le code HTML du modèle que dans une gadget HTML/Js.
D'une manière générale, la syntaxe (en français) est la suivante :

Si Condition  = élément_comparé | opérateur de comparaison | élément comparant
=>Exécuter cette partie
Sinon
=>Exécuter cette autre partie
Fin si

Exemple :

SI le type de la page est égale à TYPE
=> Exécuter cette partie
SINON
=> Exécuter cette autre partie
Fin de condition 
 

on peut aussi utiliser une deuxième condition à la place de SINON :

SI le type de la page est égale à TYPE
=> Exécuter cette partie
Fin de condition1 
SI le type de la page est différent de  TYPE
=> Exécuter cette autre partie
Fin de condition2

Par exemple, si on veut afficher BONJOUR dans les pages article et BYE sur toutes les autres pages, alors en langage HTML cela donne :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
BONJOUR
<b:else/>
BYE
</b:if>

ou encore :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
BONJOUR
</b:if>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
BYE
</b:if>

* à noter que la comparaison avec un autre élément n'est pas obligatoire; donc s'il n'existe pas d'élément comparant, la comparaison se fait selon le contenu de la donnée.
Exemple :

<b:if cond='data:post.title'>

Cependant, la balise b:else n'est pas aussi obligatoire. Elle est utile s'il s'agit d'exécuter une alternative.

 * L'élément comparé peut être une donnée Blogger, une valeur texte ou une valeur numérique.
s'il s'agit d'une valeur texte, elle doit être encadré de guillemet (' ') échappés (&quot;) => Exemple : &quot;Texte encadré&quot;

* Les opérateurs de comparaison :
Voici comment comparer les données dans Blogger :

Opérateur	Signification	Type de valeur
==	Est égal à	texte ou numérique
!=	Est différent de	texte ou numérique
>	Est plus grand que	Uniquement numérique
<	Est plus petit que	Uniquement numérique

Les Différents Types De Pages Blogger Et Les Balises Conditionnelles à Utiliser

La page d'accueil du blog : Blogger Home page

<b:if cond='data:blog.url == data:blog.homepageUrl'>
{...}
</b:if>

Les pages articles (message,post) ou Items

<b:if cond='data:blog.pageType == &quot;item&quot;'>
{...}
</b:if>

Les pages index : index page 
Elle se réfère à toutes les autres pages sauf les pages articles càd la page d'accueil, de libellés, des archives et celle de la recherche.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
{...}
</b:if>

Les pages statiques : static page

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
{...}
</b:if>

Cibler à la fois les pages articles et les pages statiques

<b:if cond='data:blog.url == data:post.url'>
{...}
</b:if>

Les pages de libellés : Label page

<b:if cond='data:blog.searchLabel'>
{...}
</b:if>

Les pages des archives : Archive page

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
{...}
</b:if>

Une page en particulier :
Il suffit d'insérer l'adresse URL de la page désirée.

<b:if cond='data:blog.url == &quot;URL_De_La_Page&quot;'>
{...}
</b:if>

Page d'erreur 404 : Blogger error page

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
{...}
</b:if>

Le premier article ou l'article le plus récent du blog

<b:if cond='data:post.isFirstPost'>

La version mobile

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

Inverser Une Condition

Une condition peut être inversé simplement en remplaçant l'opérateur == (est égal à) avec l'opérateur != (est différent de) :

<b:if cond='data:blog.url != data:blog.homepageUrl'>
{...}
</b:if>

Dans l'exemple précédant le contenu va s'afficher dans toutes les pages du blog mais pas dans la page d'accueil.

Comment utiliser les balises conditionnelles

Le contenu qu'on veut afficher/masquer doit être insérer à l'intérieur de la condition càd entre les deux balises <b:if...> et </b:if>
Les conditions peuvent être utiliser n'importe-où dans le code HTML, mais dans certain cas il faut les insérer avec soin afin d'éviter l'affichage des erreurs lors de l'enregistrement du modèle.
Par exemple si on veut appliquer une condition sur un widget il faut la mettre entre les deux balises <b:includable id=....> et </b:includable>
Dans certaines situations il faut regrouper plusieurs conditions afin d'arriver à un résultat. Par exemple pour afficher un contenu dans la page d'accueil, dans les pages statiques et dans un article en particulier, il faut écrire ça :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.url == &quot;static_page&quot;'>
<b:if cond='data:blog.url == &quot;URL_De_La_Page&quot;'> 
Le contenu qu'on veut l'afficher uniquement si on se trouve dans la page d'accueil ou dans une page statique ou dans l'article indiqué.
</b:if>
</b:if>
</b:if>

N'oubliez surtout pas de fermer les conditions avec la balise </b:if> pour chaque <b:if...> usé.