Ça fait un moment que je veux vous parler des conditional tags - des quoi ???
Ce sont des codes qui permettent d'afficher un contenu sur certaines pages du blog seulement ! Ce sont donc des outils assez puissants et très intéressants quand on souhaite personnaliser l'apparence de son blog sur Blogger !
Allez, c'est parti pour toutes les explications !
Sommaire
- A quoi cela peut-il servir ?
- Comment ça marche ?
- Les codes pour les différentes pages du blog
- Faire une sauvegarde de son blog avant toute modification !
- Où coller les codes
- Exemple : Cacher un gadget spécifique
A quoi cela peut-il servir ?
Si on reprend, les conditional tags en anglais, sont des codes qui vont permettre d'afficher du contenu sur certaines page de votre blog.Avec ces codes on peut sur certaines pages du blog, afficher ou cacher :
- Un gadget
- La barre latérale du blog
- Une image
- Du texte
Mais aussi :
- Définir une apparence différente d'un gadget, sur certaines pages
- Définir une apparence différente de certaines pages
Comment ça marche ?
Il existe plusieurs conditional tags que l’on peut utiliser sur Blogger. Ces codes sont de la forme :<b:if cond='data:blog.pageType == "index"'>
<!-- Contenu ici -->
</b:if><b:if cond='data:blog.pageType == "index"'></b:if><!-- Contenu ici --><b:if cond='data:blog.pageType == "index"'>data:blog.pageType == "index". C’est ce morceau de code qui va changer selon la page du blog auquel on souhaite appliquer les modifications.Dans cet exemple,
data:blog.pageType == "index" correspond aux pages d'index du blog : page d’accueil + pages de recherche + pages de libellés.Si, par exemple, je souhaites cacher mon gadget HTML1 avec du CSS sur ces pages j'ajoute le code suivant :
<style type="text/css">
#HTML1 {
display: none;
}
</style>
<b:if cond='data:blog.pageType == "index"'>
<style type="text/css">
#HTML1 {
display: none;
}
</style>
</b:if>Les conditions contraires
Imaginons que vous souhaitez cacher ce même gadget HTML sur toutes les pages du blog autres que les pages d’index. Dans ce cas il faut remplacer le signe== du code de début de la condition :<b:if cond='data:blog.pageType == "index"'>!= comme ceci :<b:if cond='data:blog.pageType != "index"'>Les codes pour les différentes pages du blog
Voici la liste de codes pour cibler les différentes pages du blog.Pages d'index
<!-- Affichage sur index-->
<b:if cond='data:blog.pageType == "index"'>
<!-- Contenu ici -->
</b:if>Page d'accueil seulement
<!-- Affichage sur page d'accueil seulement -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Contenu ici -->
</b:if>Pages d'article
<!-- Affichage sur page des articles -->
<b:if cond='data:blog.pageType == "item"'>
<!-- Contenu ici -->
</b:if>Pages statiques (Pages)
<!-- Affichage sur Pages -->
<b:if cond='data:blog.pageType == "static_page"'>
<!-- Contenu ici -->
</b:if>Pages de recherche
<!-- Affichage sur recherches -->
<b:if cond='data:blog.searchQuery'>
<!-- Contenu ici -->
</b:if>Pages de libellés
<!-- Affichage sur recherche de libellé -->
<b:if cond='data:blog.searchLabel'>
<!-- Contenu ici -->
</b:if>Page d'un libellé spécifique
<!-- Affichage sur recherche de libellé spécifique -->
<b:if cond='data:blog.searchLabel == "libellé"'>
<!-- Contenu ici -->
</b:if>libellé par le nom exacte de votre libellé.Url spécifique du blog
<!-- Affichage sur URL spécifique-->
<b:if cond='data:blog.url == "URL"'>
<!-- Contenu ici -->
</b:if>URL par l'adresse url de la page à cibler.Faire une sauvegarde de son blog avant toute modification !
Avant d'aller plus loin, faites une sauvegarde de votre thème avant d’utiliser ces codes dans votre thème !Si vous faites une erreur vous pourrez alors facilement revenir en arrière !
Pour savoir comment faire une sauvegarde de son blog / thème et comment la charger en cas d'erreur, suivez le tutoriel ;)
Où ajouter les codes
Tout ça c'est bien joli, mais concrètement où ajouter ces codes sur mon blog ?Une fois la sauvegarde de votre thème réalisée, allez dans Modèle à partir de votre tableau de bord Blogger. Cliquez sur Modifier le code HTML :
Cliquez n'importe où dans la boîte de code. Appuyez sur Ctrl et F en même temps (Cmd et F sur Mac). Un champ de recherche doit apparaître dans la boîte de code. S'il apparaît en haut de la page web, alors recommencez en cliquant bien dans la boîte de code avant d’appuyer sur Ctrl et F.
Dans le champ de recherche collez :
</body>Collez les codes juste avant cette ligne. Comme par exemple :
<!-- Affichage sur index-->
<b:if cond='data:blog.pageType == "index"'>
<style type="text/css">
#HTML1 {
display: none;
}
</style>
</b:if>
</body>Exemple : Cacher un gadget spécifique
Rien de mieux qu'un exemple pour y voir plus clair et comprendre comment ça marche !Dans cet exemple, je souhaites cacher un gadget de mon blog sur la page d’accueil seulement (pas sur toutes les pages d’index).
Trouver le nom du gadget
Tout d'abord il faut trouver le nom du gadget pour pouvoir le cibler.Pour cela il faut aller dans Mise en Page, et cliquer sur Modifier sur le gadget à cacher :
Cliquez dans la barre d'adresse en haut de la fenêtre qui s'ouvre et allez tout au bout de l’adresse :
Vous trouverez un code qui ressemble à ceci :
widgetId=Label3widgetId=. Ici le nom de mon gadget est Label3.Selon le type de gadget,
Label sera différent pour vous :
- Label = gadget de libellés
- HTML = gadget HTML/JavaScript
- Image = gadget Image
- PopularPosts = gadget d’articles les plus vus
- BlogArchive = gadget d’archives
- PageList = gadget Pages
- Text = gadget Texte
- etc.
Le numéro à la fin de ce nom représente le numéro de votre gadget. Si vous avez plusieurs gadgets du même type ce numéro peut être 1, 2, 3, etc.
Ajouter le conditional tag à son blog
Maintenant que nous avons le nom du gadget, on peut commencer à ajouter le code du conditional tag sur son blog.Comme expliqué ci-dessus, trouvez la ligne
</body> de votre thème. On va coller le code juste avant cette ligne.Comme je souhaites cacher mon gadget sur la page d’accueil seulement, je vais utiliser le code suivant :
<!-- Affichage sur page d'accueil seulement -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Contenu ici -->
</b:if><!-- Affichage sur page d'accueil seulement -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Contenu ici -->
</b:if>
</body>Ajouter le code CSS pour cacher le gadget
Pour cacher le gadget nous allons simplement utiliser du code CSS en spécifiant le nom du gadget pour le cibler.Voici le code :
#Label3 {
display: none;
}Label3 par le nom de votre gadget, en laissant le # !Pour que le code CSS fonctionne il faut rajouter 2 lignes de code HTML, autour du code CSS :
<style type="text/css"></style><style type="text/css">
#Label3 {
display: none;
}
</style><!-- Contenu ici --><!-- Affichage sur page d'accueil seulement -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type="text/css">
#Label3 {
display: none;
}
</style>
</b:if>
</body>Cacher le gadget sur toutes les autres pages du blog
Dernier petit exemple, si à l’inverse vous voulez afficher votre gadget seulement sur la page d’accueil, alors remplacez le signe== de la ligne suivante :<b:if cond='data:blog.url == data:blog.homepageUrl'>!= comme ceci :<!-- Affichage sur page d'accueil seulement -->
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type="text/css">
#Label3 {
display: none;
}
</style>
</b:if>
</body>