Dans Blogger, les balises conditionnelles vous permettent de contrôler l'affichage des éléments dans les différentes pages du blog.
Par exemple, vous devez les utiliser si vous souhaitez qu'un gadget déterminé n'apparaisse que sur la page d'accueil ou encore que la barre latérale ne s'affiche pas dans les pages statiques de votre blog telles que la page de contact, à propos, politique de confidentialité, etc.
Vous pouvez facilement les distinguer du reste du code HTML puisqu'elles
débutent toujours par la balise <b:if cond= et se termine par
la balise de fermeture </b:if>.
Grâce à ces conditions, vous pouvez facilement modifier l'apparence de votre blog notamment pour afficher ou faire disparaitre (cacher) une image, un gadget ou une section entière de votre blog (pied de page, barre latérale, barre de navigation, etc.).
En voici un exemple concret pour mieux cerner leur fonctionnement :
<b:if cond='data:view.isHomepage'>
<style>.sidebar {display:none}</style>
</b:if>Explication :
data:view.isHomepage
Ce code correspond à la page d'accueil et chacune des pages de votre blog possède son propre code (voir la liste complète ci-dessous). On déduit alors que cette condition impactera uniquement la page d'accueil.
Cette condition nous apprend quoi au juste ?
En effet, la ligne de code à l'intérieur de la balise conditionnelle
<b:if cond='data:view.isHomepage'> et
</b:if> nous renseigne sur la règle à appliquer lors de
l'affichage la page d'accueil, à savoir :
<style>.sidebar {display:none}</style>
La balise <style> nous apprend qu'il s'agit d'un code CSS.
Je rappelle que les propriétés CSS nous permettent de modifier l'apparence de
notre blog.
.sidebar {display:none}
Ici on constate que ce code CSS concerne spécifiquement la barre latérale
(.sidebar) et la suite du code
{display:none} précise que l'élément ne sera pas affiché.
Donc, dans notre page d'accueil (data:view.isHomepage), on ne souhaite pas afficher la barre latérale (.sidebar {display:none}). Autrement dit, on souhaite cacher la barre latérale uniquement dans la page d'accueil.
Voici à présent les balises conditionnelles appelées " Conditional Tags " dans la langue de Shakespeare pour chacune des pages de votre blog.
La liste complète des balises conditionnelles par type de page dans Blogger
La page d'accueil
<b:if cond='data:view.isHomepage'>
<!-- la règle à exécuter lors de l'affichage de la page (HTML, CSS ou JavaScript) -->
</b:if>Comme illustrer plus haut, cette condition vous permettra de cibler exclusivement la page d'accueil de votre blog.
Cibler l'ensemble des pages du blog à l'exception de la page d'accueil
<b:if cond='!data:view.isHomepage'>
<!-- la règle à exécuter lors de l'affichage de la page (HTML, CSS ou JavaScript) -->
</b:if>Ou
<b:if cond='not data:view.isHomepage'>
</b:if>Exemple :
<b:if cond='!data:view.isHomepage'>
<style>.sidebar {display:none}</style>
</b:if>Cette condition nous indique que la barre latérale sera cachée sur toutes les pages excepté la page d'accueil. Autrement dit, elle apparaîtra seulement dans la page d'accueil de notre blog.
Les pages des articles
<b:if cond='data:view.isPost'>
<!-- la règle à exécuter lors de l'affichage de la page (HTML, CSS ou JavaScript) -->
</b:if>Vous l'aurez compris, pour spécifier une condition pour l'ensemble des pages à l'exception des pages qui affichent les articles de notre blog, on rajoutera un point d'exclamation au début de la condition ou le terme "not" comme ceci :
<b:if cond='!data:view.isPost'>
<!-- la règle à exécuter lors de l'affichage de la page (HTML, CSS ou JavaScript) -->
</b:if>Ou
<b:if cond='not data:view.isPost'>
<!-- la règle à exécuter lors de l'affichage de la page (HTML, CSS ou JavaScript) -->
</b:if>Les pages statiques telles que la page de contact, conditions d'utilisation, politique de confidentialité, etc.
<b:if cond='data:view.isPage'>
<!-- la règle à exécuter lors de l'affichage de la page (HTML, CSS ou JavaScript) -->
</b:if>La page d'index qui regroupe la page d'accueil, la page des libellés et la page d'archive
<b:if cond='data:view.isMultipleItems'>
<!-- la règle à exécuter lors de l'affichage de la page (HTML, CSS ou JavaScript) -->
</b:if>La page d'archive
<b:if cond='data:view.isArchive'>
<!-- la règle à exécuter lors de l'affichage de la page (HTML, CSS ou JavaScript) -->
</b:if>La page des libellés
<b:if cond='data:view.isLabelSearch'>
<!-- la règle à exécuter lors de l'affichage de la page (HTML, CSS ou JavaScript) -->
</b:if>Pour cibler un libellé spécifique
<b:if cond='data:view.isLabelSearch in {"votre libellé ici"}'>
<!-- la règle à exécuter lors de l'affichage de la page (HTML, CSS ou JavaScript) -->
</b:if>La page de recherche
<b:if cond='data:view.isSearch'>
<!-- la règle à exécuter lors de l'affichage de la page (HTML, CSS ou JavaScript) -->
</b:if>La page d'erreur 404
<b:if cond='data:view.isError'>
<!-- la règle à exécuter lors de l'affichage de la page (HTML, CSS ou JavaScript) -->
</b:if>Les pages des articles + les pages statiques
<b:if cond='data:view.isPage or data:view.isHomepage'>
<!-- la règle à exécuter lors de l'affichage de la page (HTML, CSS ou JavaScript) -->
</b:if>Si vous souhaitez cibler les pages des articles et les pages statiques
<b:if cond='data:view.isSingleItem'>
<!-- la règle à exécuter lors de l'affichage de la page (HTML, CSS ou JavaScript) -->
</b:if>Les pages des articles + la page d'accueil
<b:if cond='data:view.isPost or data:view.isHomepage'>
<!-- la règle à exécuter lors de l'affichage de la page (HTML, CSS ou JavaScript) -->
</b:if>L'affichage sur les petits écrans (smartphone, tablette)
<b:if cond='data:mobile'>
<!-- la règle à exécuter lors de l'affichage de la page (HTML, CSS ou JavaScript) -->
</b:if>Le menu "mise en page" (dans le tableau de bord Blogger)
<b:if cond='data:view.isLayoutMode'>
<!-- la règle à exécuter lors de l'affichage de la page (HTML, CSS ou JavaScript) -->
</b:if>