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.
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 :
Concrètement voici un condition réalisable lorsque la comparaison entre la page où on se trouve et la page d'accueil est fausse :
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 :
Dans certain cas il faut réunir plusieurs conditions pour arriver à un résultat :
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 :On peut aussi utiliser un autre contenu qui s'affichera si la condition est fausse, grâce au Sinon :
Afficher bouton Facebook;
Fin si
Si on se trouve dans la page d'accueil :Au lieu d'utiliser Sinon on peut aussi utiliser une deuxième condition, exemple :
Afficher bouton facebook;
Sinon
Afficher bouton Twitter;
Fin si
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 == "item"'>
Les pages statiques
<b:if cond='data:blog.pageType == "static_page"'>
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 == "Adresse de la page avec le http://"'>
Les pages Index
<b:if cond='data:blog.pageType == "index"'>
Les Archives
<b:if cond='data:blog.pageType == "archive"'>
Page d'erreur 404
<b:if cond='data:blog.pageType == "error_page"'>
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 > 10'>On aurait pu aussi utiliser numComments == 10 ou numComments != 10 ou même numComments < 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'>Pour plus d'informations, lisez cet article : Afficher un Widget dans des pages specifiques du Blog
<b:includable id='main'>
<b:if cond='data:blog.pageType == "index"'>
<!-- 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>
Dans certain cas il faut réunir plusieurs conditions pour arriver à un résultat :
<b:if cond='data:blog.url == "Adresse 1 "'>Surtout n'oubliez pas de toujours fermer vos conditions en ajoutant à la fin un </b:if> pour chaque <b:if... utilisé.
<b:if cond='data:blog.url == "Adresse 2 "'>
<b:if cond='data:blog.url == "Adresse 3 "'>
contenu a afficher uniquement si on se trouve dans l'adresse 1 ou 2 ou 3
</b:if>
</b:if>
</b:if>
Bien joué mon frère!
RépondreSupprimerMerci pour vos explications. Toujours utiles.
RépondreSupprimerMoi,j'aimerais savoir comment on peut créer un tableau avec Blogger.
ici http://www.leblogger.com/2010/05/comment-creer-tableau-blog-html-css.html
RépondreSupprimerSalut,
RépondreSupprimerMerci 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 ^^
Ouï
RépondreSupprimermerci, ça serrait encore super si vous me disiez comment faire parce que moi niveau codage ça vaut pas le coup d'en parler... :D
RépondreSupprimerUn indice ? ^^"
salut soufiane,
RépondreSupprimerpourrais 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.
@Crack-net
RépondreSupprimerC'est isFirstPost, je l'ai ajouté
Merci Soufiane
RépondreSupprimerpar 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?
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épondreSupprimerOui je sais, regard mon Twitter :)
RépondreSupprimerMerci Abu
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épondreSupprimerBonjour !
RépondreSupprimerJ'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 !
Oups, mon code ne s'affiche pas. Comment puis-je vous transmettre ma requête ?
Supprimersalut soufiane
RépondreSupprimerj'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 == "true"'>
<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..
Faut simplement ajouter une condition ==item
SupprimerEst-il possible d'utiliser "si" au débit d'une phrase?
RépondreSupprimerExemple: si tu peux passer récupérer le bon de commande et me déposer les cartes de visites.
bravo ... super article .
RépondreSupprimerParfait !
RépondreSupprimerMerci ;-)
RépondreSupprimerBonjour,
RépondreSupprimerQuelqu'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.
Bonjour Je ne sais pas si
RépondreSupprimerBonjour,
RépondreSupprimerJe 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?
Impossible de faire fonctionner le isLastPost :
RépondreSupprimerInvalid data reference post.isFirstPost: No dictionary named: 'post' in: ['blog', 'skin', 'view']
C'est chiant...
Bonjour,
RépondreSupprimerJ 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 ?
Bonjour,
RépondreSupprimerEt bien, ça ne me paraît pas compliqué !