Comment utiliser les conditions si-sinon dans Blogger (if-else)

Ça fait quelque temps que je veux vous parler des conditions si/si non dans Blogger qui permettent d'afficher ou de cacher un contenu selon la page où est ce qu'on se trouve.
Dans cet article vous allez découvrir comment utiliser les conditions b:if pour donner une autre dimension à votre Blogspot.

Comment ça marche

C'est très simple, on spécifie un condition et le contenu s'affichera seulement si cette condition est vrai, exemple :
Si on se trouve dans la page d'accueil :
             Afficher bouton Facebook;
Fin si
On peut aussi utiliser un autre contenu qui s'affichera si la condition est fausse, grâce au Sinon :
Si on se trouve dans la page d'accueil :
             Afficher bouton facebook;
Sinon
             Afficher bouton Twitter;
Fin si
Au lieu d'utiliser Sinon on peut aussi utiliser une deuxième condition, exemple : 
Si on se trouve dans la page d'accueil :
             Afficher bouton Facebook;
Fin si
Si on ne se trouve pas  dans la page d'accueil :
             Afficher bouton Twitter ;
Fin si

Le jargon Blogger

Si vous avez compris le mécanisme alors il suffit de remplacer les termes Si, Sinon, fin si ... par leur équivalents dans Blogger :
Terme en Français Équivalent Blogger
Conditions Si...Sinon dans Blogger
si <b:if cond='La condition'>
Fin si </b:if>
Sinon <b:else/>
est égal ==
est différent !=

Les différentes conditions possibles

Malheureusement on est très limité au niveau des possiblités et on ne peut pas faire des choses compliquées comme cibler le 3ième article de la page d'accueil ou cibler les articles avec un certain libellé.
Voici la liste des conditions possibles dans Blogger que j'ai réunie en analysant le code HTML de Blogger, n'hésitez pas à laisser un commentaire pour nous signaler d'autres conditions :

Pour mieux comprendre la suite vous devez d'abord consulter ces deux articles

Cibler uniquement la page d'accueil

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

Le Premier article ou l'Article le plus récent

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

Les articles ou Items

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

Les pages statiques

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

Une adresse en particulier

Il suffit de spécifier l'adresse URL de la page dans la quelle vous voulez que le contenu s'affiche :
<b:if cond='data:blog.url == &quot;Adresse de la page avec le http://&quot;'>

Les pages Index

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

Les Archives

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

Page d'erreur 404

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

La version mobile (ne fonctionne pas encore)

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

Cibler les articles avec un certain nombre de commentaires

Utile pour, par exemple, afficher un encart de pub en bas du blog seulement si le nombre des commentaires de l'article est supérieur (respectivement égale ou inférieur) à 10
<b:if cond='data:post.numComments &gt; 10'>
On aurait pu aussi utiliser numComments == 10 ou numComments != 10 ou même numComments &lt; 10 pour dire inférieur à 10.

La négation

Vous avez remarqué que dans les conditions précédentes on utilisait souvent "si 1truc == 1truc" mais on peut aussi afficher un contenu lorsque la comparaison est fausse avec "si 1truc != 1truc".

Concrètement voici un condition réalisable lorsque la comparaison entre la page où on se trouve et la page d'accueil est fausse :
<b:if cond='data:blog.url != data:blog.homepageUrl'>

Comment utiliser les conditions

Dans la majorité des cas il suffit d'ajouter ce qu'on veut cacher/afficher à l'intérieur de la condition mais dans certaines situations il faut bien analyser le code avant de l'encapsuler dans une condition.
Par exemple pour utiliser une condition sur un widget il faut toujours la mettre à l’intérieur de la balise Includable sinon Blogger affichera une erreur. Exemple :
<b:widget id='HTML3' locked='false' title='Nom du widget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
Pour plus d'informations, lisez cet article : Afficher un Widget dans des pages specifiques du Blog 

Dans certain cas il faut réunir plusieurs conditions pour arriver à un résultat :
<b:if cond='data:blog.url == &quot;Adresse 1 &quot;'>
<b:if cond='data:blog.url == &quot;Adresse 2 &quot;'>
<b:if cond='data:blog.url == &quot;Adresse 3 &quot;'>

           contenu a afficher uniquement si on se trouve dans l'adresse 1 ou 2 ou 3

</b:if>
</b:if>
</b:if>
Surtout n'oubliez pas de toujours fermer vos conditions en ajoutant à la fin un </b:if> pour chaque <b:if... utilisé.
31 Commentaires
  1. Merci pour vos explications. Toujours utiles.

    Moi,j'aimerais savoir comment on peut créer un tableau avec Blogger.

    RépondreSupprimer
  2. Salut,

    Merci pour cet jolie article, une question:

    Peut-on retirer plusieurs widgets d'une page spécifique, mais qu'ils restent visibles sur toutes les autres pages de notre blogue ?

    j'ai vraiment besoin de ta réponse ^^

    RépondreSupprimer
  3. merci, ça serrait encore super si vous me disiez comment faire parce que moi niveau codage ça vaut pas le coup d'en parler... :D

    Un indice ? ^^"

    RépondreSupprimer
  4. salut soufiane,

    pourrais tu m'indiquer qu'elle est le code de la condition qui cible uniquement le dernier article rédigé.

    Je souhaite l'isoler et lui appliquer un css différent sur la page d'accueil mais sans cette condition c'est mort pour le moment. Merci de me répondre.

    RépondreSupprimer
  5. @Crack-net
    C'est isFirstPost, je l'ai ajouté

    RépondreSupprimer
  6. Merci Soufiane
    par contre je galère toujours. Peux tu m'indiquer comment tu as fait pour ta page d’accueil pour afficher le dernier article différemment et ainsi le mettre en valeur?

    RépondreSupprimer
  7. salut ssoufiane mnt l'interface blogger draft est disponible pour tout le monde et la bonne surprise c'est que l'edition html est disponible aussi

    RépondreSupprimer
  8. Oui je sais, regard mon Twitter :)

    Merci Abu

    RépondreSupprimer
  9. Salut soufiane que met-on dans à l'interieur des conditions pour mettre en valeur le premier article et lui appliquer un css différent ?

    RépondreSupprimer
  10. Bonjour !

    J'essaie en vain de réunir plusieurs conditions, comme cité dans le dernier exemple, mais cela ne semble pas fonctionner pour moi. Voici ce que j'ai entré comme code :




    MA PAGE




    En gros, je voudrais que, lorsque mes messages portent soit le label "machin", soit le label "truc", soit le label "bidule", le lien vers "ma page" s'affiche. Cela fonctionne bien avec une seule condition, comme ceci :


    MA PAGE



    Je suppose donc qu'il doit y avoir une erreur dans l’enchaînement de mes conditions :/ ...

    D'avance merci pour votre aide !

    RépondreSupprimer
    Réponses
    1. Oups, mon code ne s'affiche pas. Comment puis-je vous transmettre ma requête ?

      Supprimer
  11. salut soufiane
    j'utilise ce code pour afficher un badge ((new-post) for home page and for the first item).
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
    <div class='new-post' id='new-post'/>
    <div class='clear'/>
    </b:if>
    </b:if>
    ce je demande de vous (Soufiane) maintenant c'est de mettre ce badge apparait aussi dans la page des articles mais juste pour le nouvel article,
    maerci de me répondre..

    RépondreSupprimer
  12. Est-il possible d'utiliser "si" au débit d'une phrase?
    Exemple: si tu peux passer récupérer le bon de commande et me déposer les cartes de visites.

    RépondreSupprimer
  13. Bonjour,

    Quelqu'un utilise le service d'envoie d'articles par mail mail2blogger?
    Il me semble qu'il ne fonctionne pas depuis le 26 juillet car mes articles n'arrivent pas à destination.

    RépondreSupprimer
  14. Bonjour,

    Je tente désespérément d'afficher un widget sur une page précise (page différente de la page d’accueil) en indiquant le lien de la page. Mais le widget n'apparait pas:

    Qu'en pensez vous?

    RépondreSupprimer
  15. Impossible de faire fonctionner le isLastPost :

    Invalid data reference post.isFirstPost: No dictionary named: 'post' in: ['blog', 'skin', 'view']

    C'est chiant...

    RépondreSupprimer
  16. Bonjour,
    J arrive pas à mettre en place la solution pour mettre plusieurs conditions sur un widget, on dirait que ça fonctionne plus. Avez vous une autre solution ?

    RépondreSupprimer
  17. Bonjour,
    Et bien, ça ne me paraît pas compliqué !

    RépondreSupprimer
  18. Tout y est bien conçu dans votre site et très beau avec beaucoup de choix, c’est une merveille !!Félicitations. Amicalement
    voyance gratuite par mail , Voyance mail gratuit

    RépondreSupprimer
  19. Bravo pour votre site, l'accès est facile et le contenu est très riche. Je vous remercie pour ce merveilleux partage. Et je vous encourage de continuez ainsi. Bon continuation
    voyance gratuite par email

    RépondreSupprimer
  20. Bonjour, ça fait un moment que je cherche sans trouver de réponse, comment peut-on ajouter une classe à une div selon le type de page ?
    Par exemple, je souhaiterai ajouter une classe sur la balise body seulement quand on se trouve dans une page de type "archive". Est-ce possible ? merci !

    RépondreSupprimer
  21. Merci beaucoup pour ce magnifique blog que je trouve d’ailleurs très intéressant avec une belle interface, facile en navigation. Il est vraiment super ! Bravo et bon courage .
    voyance gratuite en ligne

    RépondreSupprimer
  22. Bravo et merci pour ton blog et bon courage pour le maintenir en vie de longues années !!

    voyance gratuite serieuse

    RépondreSupprimer

Copyright 2015 Soufiane.fr