Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Afficher du contenu sur certaines pages du blog sur Blogger

Ç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

  1. A quoi cela peut-il servir ?
  2. Comment ça marche ?
  3. Les codes pour les différentes pages du blog
  4. Faire une sauvegarde de son blog avant toute modification !
  5. Où coller les codes
  6. Exemple : Cacher un gadget spécifique
    1. Trouver le nom du gadget
    2. Ajouter le conditional tag à son blog
    3. Ajouter le code CSS pour cacher le gadget
    4. Cacher le gadget sur toutes les autres pages du blog

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

Afficher du contenu sur certaines pages du blog sur Blogger

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>
On trouve une balise ouvrante qui définit le début de la condition :
<b:if cond='data:blog.pageType == "index"'>
Et une balise fermante qui définit la fin de la condition :
</b:if>
Entre ces 2 lignes de code, on va pouvoir ajouter les éléments spécifiques à une page : HTML, CSS, gadget, etc., à la place de :
<!-- Contenu ici -->
Décortiquons maintenant la première ligne de code qui définit le début de la condition :
<b:if cond='data:blog.pageType == "index"'>
La condition en elle-même est définie par le code en rouge : 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>
Comme ceci :

<b:if cond='data:blog.pageType == "index"'>

<style type="text/css">
#HTML1 {
  display: none;
}
</style>

</b:if>
Mon gadget HTML1 sera alors caché sur les pages d'index du blog, mais visible sur toutes les autres pages !

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"'>
Par le signe != 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>
Remplacez 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>
Remplacez 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 :

Afficher du contenu sur certaines pages du blog sur Blogger

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>
Et appuyez sur Entrer.

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 :

Afficher du contenu sur certaines pages du blog sur Blogger

Cliquez dans la barre d'adresse en haut de la fenêtre qui s'ouvre et allez tout au bout de l’adresse :

Afficher du contenu sur certaines pages du blog sur Blogger

Vous trouverez un code qui ressemble à ceci :
widgetId=Label3
Le nom de votre gadget se trouve après widgetId=. 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>
Comme ceci :
<!-- Affichage sur page d'accueil seulement -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Contenu ici -->
</b:if>

</body>
Pour l’instant ce code ne fait rien de spécial car nous n’avons rien ajouté à l’intérieur du code.

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;
}
Remplacez 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">
Et:
</style>
Comme ceci :
<style type="text/css">
  #Label3 {
    display: none;
  }
</style>
Ajoutez ce code à la place de la ligne :
<!-- Contenu ici -->
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>
Sauvegardez, et voilà votre gadget sera caché sur la page d’accueil de votre blog !

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'>
Par != 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>
Et voilà ! Maintenant votre gadget ne s’affichera QUE sur la page d’accueil, et sera cachée sur toutes les autres pages du blog ;)

Autres articles

60 commentaires:

  1. Merci beaucoup pour cet article c'est top ! Je voulais savoir est-ce que c'est possible que tous mes widgets s'affichent sur la page d'accueil mais que quand je clique sur un article il n'y a plus les widgets latéraux, l'article prend toute la place ? (je ne sais pas si c'est clair ce que j'ai dis ^^)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      C'est tout à fait possible. Il faut utiliser le conditional tag pour les pages des articles (car c'est sur ces pages qu'on veut cacher la barre latérale).
      Pour cacher la barre latérale, utilise le code CSS ci-dessous dans le conditional tag pour la page des articles, comme expliqué dans le tutoriel :

      /* --- Code pour cacher la barre latérale de DROITE --- */
      .column-right-outer {
      display: none;
      }

      Juste après ce code CSS, il faut ajouter d'autres codes CSS pour corriger le décalage du contenant du blog. Par défaut il à une marge à droite (ou à gauche) correspondant à la largeur de la barre latérale. On va supprimer cette marge pour que le contenant prennent toute la largeur du blog.

      Ajoute :

      /* --- Codes pour corriger la marge à DROITE --- */
      .main-inner .fauxcolumn-right-outer {
      width: 0 !important;
      }
      .main-inner .fauxcolumn-center-outer {
      right: 0 !important;
      }
      .main-inner .columns {
      padding-right: 0 !important;
      }

      Et voilà ;)

      Supprimer
    2. Hello! Merci pour ce tutoriel bien pratique et sympa! :3

      Je voulais faire la même chose que Miss-Fashionista, mais le code ne marche pas du tout pour ma part... :( (même en rajoutant un "!important"... :/ )

      Supprimer
    3. Bonjour,
      Il semblerait que tu ais oublié d'ajouter :

      <style type='text/css'>

      Avant les codes CSS pour cacher la barre latérale, et le code suivant après ces codes CSS :

      </style>

      De plus, remplace ton code CSS :

      .main-inner .fauxcolumn-center-outer {
      right: 0 !important;
      }

      Par :

      .main-inner .fauxcolumn-center-outer {
      padding-right: 0 !important;
      }

      Supprimer
    4. Hello!
      J'ai essayé ce que tu conseilles de faire, mais je n'ai pas plus de résultats...
      Chose très bizarre en revanche, autant mes articles ne prennent pas pleine page lorsque je clique dessus, autant quand je fais l'aperçu d'un de mes articles, ça marche.. ^^'

      Supprimer
    5. Bonjour Arlé,
      Je ne vois pas les codes CSS pour cacher la barre latérale sur les pages des articles. Les as-tu bien ajouté dans le bon code conditionnel ? Utilise celui des pages d'articles seulement. Comme ceci :

      <!-- Affichage sur page des articles -->
      <b:if cond='data:blog.pageType == "item"'>
      <style type='text/css'>
      /* --- Codes pour corriger la marge à DROITE --- */
      .main-inner .fauxcolumn-right-outer {
      width: 0 !important;
      }
      .main-inner .fauxcolumn-center-outer {
      right: 0 !important;
      }
      .main-inner .columns {
      padding-right: 0 !important;
      }
      </style>
      </b:if>

      Supprimer
    6. ça marche! Merci beaucoup! :D
      (Et bonne année! ^^ )

      Supprimer
  2. Bonjour je voulais vous dire que vous m'avez sorti de belles galères donc merci beaucoup beaucoup!!! Mais j'ai un petit problème sur mon blog http://pinko-punk.blogspot.fr/ je n'arrive pas à centrer ma barre de navigation sachant que j'ai épluché TOUS les articles que vous avez fait sur le sujet mais je ne trouve pas la solution... Pouvez vous y jeter un œil si vous avez le temps, merci infiniment.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      En fait il y a un code CSS à modifier (ou à ajouter) dans le tutoriel La barre de navigation partie 2. Tu ne l'as pas par défaut dans ton code, il faut donc l'ajouter.
      Ajoute ceci :

      /* -- Centrer le menu -- */
      .tabs .widget ul {
      text-align: center;
      }

      /* -- Correction de l'alignement des liens du menu -- */
      .tabs .widget li {
      float: none !important;
      display: inline-block !important;
      }

      Juste avant la ligne suivante de ton thème :

      /* Headings

      Supprimer
  3. Bonjour !

    Je viens de faire ton tutoriel (qui était pile ce qu'il me fallait!). J'ai eu un peu de mal, mais j'ai réussi !
    Par contre, je me demandais comment enlever "l'emplacement" de la barre latérale... J'ai caché les widgets un à un (pas génial je sais :) mais j'aimerais que mon article soit sur toute la page.

    Merci d'avance :)
    Pauline
    (http://thecutestlifeisnow.blogspot.fr/2016/10/le-petit-dejeuner_10.html)

    RépondreSupprimer
    Réponses
    1. Bonjour Pauline,
      Je viens tout juste d'écrire un commentaire qui permet de cacher la barre latérale sur les pages d'articles, sans cacher un à un les gadgets ^^'
      Ci-dessous j'ai repris les commentaire en modifiant les codes CSS pour une barre latérale à gauche ;)

      Il faut utiliser le conditional tag pour les pages des articles (car c'est sur ces pages qu'on veut cacher la barre latérale).
      Pour cacher la barre latérale, utilise le code CSS ci-dessous dans le conditional tag pour la page des articles, comme expliqué dans le tutoriel :

      /* --- Code pour cacher la barre latérale de GAUCHE --- */
      .column-left-outer {
      display: none;
      }

      Juste après ce code CSS, il faut ajouter d'autres codes CSS pour corriger le décalage du contenant du blog. Par défaut il à une marge à droite (ou à gauche) correspondant à la largeur de la barre latérale. On va supprimer cette marge pour que le contenant prennent toute la largeur du blog.

      Ajoute :

      /* --- Codes pour corriger la marge à GAUCHE --- */
      .main-inner .fauxcolumn-left-outer {
      width: 0 !important;
      }
      .main-inner .fauxcolumn-center-outer {
      left: 0 !important;
      }
      .main-inner .columns {
      padding-left: 0 !important;
      }

      Et voilà ;)

      Supprimer
    2. Merci beaucoup ! C'est pile ce qu'il me fallait :)

      Supprimer
  4. Wouuuahhahhh! Je découvre cette mine d'informations et je te remercie pour le partage ! MERCI et .. MERCI !!!
    Pas encore testé mais cela ne va pas tarder ...

    RépondreSupprimer
  5. Bonjour!
    Merci milles fois pour ce tuto! J'ai réussi à enlever la barre latéral sur les articles sans soucis! Parc contre comment faire pour que le texte ne prenne pas tout la page mais reste sous les images qui sont à 1000px de large?
    Merci beaucoup !

    RépondreSupprimer
    Réponses
    1. Bonjour Camille,
      Pour cela tu peux ajouter une largeur maximale à tes articles sur les pages d'articles avec le code CSS suivant :

      .post-body {
      max-width: 1000px;
      margin: 0 auto;
      }

      Ajoute également les codes CSS suivants qui vont aligner tes images au texte des articles :

      .post-body a {
      margin-left: 0 !important;
      margin-right: 0 !important;
      }

      .post-body img {
      padding: 0 !important;
      }

      Supprimer
  6. Bonjour!
    J'ai une nouvelle question ^^
    J'ai ajouté une image à la place du lien lire la suite mais je ne veux pas qu'elle apparaissent en dessous de mes miniatures dans mes catégories... comment faire puisque ce n'est pas un gadget? Merci!

    RépondreSupprimer
    Réponses
    1. Bonjour Camille,
      Utilise le code CSS suivant pour cacher ton image Lire la suite :

      .jump-link {
      display: none;
      }

      Supprimer
    2. Bonjour!
      Lorsque j'applique ce core mon image lire la suite disparait également sur les pages général et du coup on ne peux plus acceder à la suite de l'article.
      C'est seulement dans les pages de mes catégories ou les articles sont en vignette que je veux supprimer l'image car il y en a déjà une et du coup cela fait doublon..

      Merci beaucoup et bonne journée!

      Supprimer
    3. Bonjour Camille,
      Il faut utiliser ce code CSS avec le code conditionnel des pages des libellés et des pages de recherche. Sinon, il s'appliquera à tout le blog ;)

      Supprimer
  7. Bonjour!

    Merci pour ton tuto :)

    Tu pourrais me donner le code pour enlever le pied de page partout sauf sur la page d’accueil s'il te plait ?

    Merci beaucoup!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Utilise le code conditionnel pour la page d'accueil seulement en remplaçant le signe == par !=
      Ensuite utilise le code CSS suivant pour cacher le pied de page :

      footer {
      display: none;
      }

      Supprimer
  8. Bonjour :D déjà j'aimerais te féliciter pour ton blog qui est vraiment G E N I A L ! Je viens de le découvrir il y a quelques jours en me lançant dans ce monde de blog ^^
    Voilà, j'ai une idée assez particulière de ce que je veux faire de mon blog mais je ne sais pas trop comment la réaliser mal grès tout tes tutos.

    J'aimerais que quand on va sur mon blog, on tombe sur une page d’accueil. Mais que le reste du blog s'affiche en miniature comme tu l'expliques si bien dans l'un de tes Tuto.
    En faite c'est juste le fait de faire cette première page qui restera fixe et les autres pages en miniature qui me pose problème. Je ne sais pas comment m'y prendre ^^
    j'espère que j'ai été claire et que tu puises me guider.

    Merci en tout cas du temps que tu nous accordes pour que l'on puise se créer notre petit univers

    Bonne journée
    Cordialement
    Alexane

    RépondreSupprimer
    Réponses
    1. Bonjour Alexane,
      Je me rends compte que la réponse est un peu longue pour un commentaire...
      Je vais écrire un tutoriel pour créer une page d'accueil fixe et la publier au plus vite ;)

      Supprimer
  9. Bonjour.
    Merci pour ce tutoriel de qualité et de précision. Ton blog est super, il m'aide beaucoup ! Merci beaucoup à toi. 🙏

    Il y a quelque chose que je souhaiterais faire sur mon blog mais je ne sais pas si c'est possible car je crois que tu n'en parles pas. Est-ce qu'avec le code que tu proposes ici, je pourrais faire en sorte d'exclure certains articles (associé à un label en particulier) de ma page d'accueil ?

    Bonne journée, et encore merci. ;)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Malheureusement ce n'est pas possible sur Blogger. Désolée :/

      Supprimer
  10. Bonjour Catherine,

    Je me demandais s'il était possible par un procédé semblable de supprimer sur certaines pages le pied d'article (nombre de commentaires, boutons de partage...). Par exemple, sur mes pages "Contact" et "Mentions légales", je n'ai pas besoin qu'apparaissent à la fin les commentaires ni les boutons de partage. (Au moment d'éditer ma page, j'avais pensé qu'en cochant "Ne pas autoriser, masquer les existants", le nombre de commentaires disparaîtrait peut-être du pied de l'article mais non pas du tout, je suis encore trop naïve ;)).

    Bonne journée/soirée, bon courage pour répondre à tous nos commentaires !

    RépondreSupprimer
    Réponses
    1. Bonjour Aurélie,
      Si tu souhaites cacher le pied d'article sur toutes tes pages fixes, alors utilise le code conditionnel pour les pages statiques, et ajoute le code CSS suivant :

      .post-footer {
      display: none;
      }

      Supprimer
  11. Bonjour,

    Tout d'abord, merci beaucoup pour ton blog qui est vraiment une mine d'informations précieuses et tu expliques vraiment très bien. Je suis en train de travailler sur un blog et avant de le mettre en ligne, je voudrais qu'il ressemble un minimum à quelque chose. Mais cela fait plusieurs jours que je cherche à faire quelque chose mais en vain...

    En fait dans la barre de navigation, je voudrais changer la couleur des liens des onglets actifs des pages qui ne sont pas fixes et qui renvoient à des libellés. Pour l'onglet des pages fixes et celui de l'accueil, aucun problème, on peut le faire sans coder en cliquant sur personnaliser dans modèle.

    En fait lorsque je suis sur l'accueil, le lien "Accueil" dans l'onglet est bien d'une couleur différente des autres onglets donc on sait où on est mais quand je clique sur l'onglet qui renvoie à un libellé, le lien de l'onglet reste de la même couleur que tous les autres onglets et du coup on s'y perd, on ne sait plus où on est...

    Toutes mes recherches internet n'ont pas abouties car apparemment ça ne se fait pas en HTML/CSS mais en PHP et là c'est juste incompréhensible pour moi T_T...

    Donc je me demandais si toi tu aurais une astuce pour faire ça en HTML/CSS ?
    J'espère que tu pourras m'aider car je commence à désespérer...

    Bonne journée,
    Soann

    RépondreSupprimer
    Réponses
    1. Bonjour Soann,
      Malheureusement, Blogger ne propose pas de réaliser cela pour les pages de ce type.
      Je pense que pour réaliser cela, il faut trouver un moyen de reconnaître la page sur laquelle on se trouve, de cibler le bon lien de menu et de changer spécifiquement son apparence. Avec du JavaScript ça devrait être possible mais il faut ajouter ce code manuellement pour chaque lien du menu qui ne fonctionne pas... C'est un peu casse tête en fait, et va alourdir le code de ton blog. Néanmoins si tu le souhaites je peux regarder pour en faire un tutoriel. Je le note sur ma liste ;)

      Supprimer
    2. D'accord, merci beaucoup !!! :)
      Et sinon, je pensais pouvoir me servir de ce tutoriel pour me rabattre sur ma seconde idée mais ça non plus je n'y arrive pas... Comme les liens de ma barre de navigation qui renvoient à une catégorie de libellés ne peuvent changer de couleur, je voudrais au moins qu'en cliquant dessus, un titre apparaissent au commencement de la page correspondante. Est-ce possible ?
      Encore merci !!
      Soann

      Supprimer
    3. Bonjour Soann,
      Sur les pages de recherche de libellé (quand tu cliques sur le lien vers un libellé) un message apparaît. Par défaut c'est "Affichage des articles dont le libellé est Libellé. Afficher tous les articles". Dans un tutoriel j'explique comment modifier l'apparence de ce message. Je vais sûrement écrire un tutoriel pour expliquer comment modifier le message ;)

      Supprimer
    4. Super, merci beaucoup ! Oui en effet, j'avais déjà utilisé ce tuto et à défaut de pouvoir modifier le message, j'avais choisi de le supprimer ^^. J'ai hâte de voir ce nouveau tutoriel ! :)
      Merci encore pour tout ce que tu fais,
      Bonne journée,
      Soann

      Supprimer
  12. Bonjour

    Merci infiniment pour le temps que tu consacre à concocter des tutos aussi clairs. Nouvelle dans le monde du blogging, je cherchais depuis un moment comment ne pas faire apparaître mes article sur la page d'accueil de mon blog et grâce à toi c'est chose faite

    J'ai aussi ajouté une page d'accueil statique et cela à l'air de fonctionner

    Merci pour tout

    Isabelle

    RépondreSupprimer
  13. Coucou !

    J'ai suivi ton tuto à la lettre, je l'ai même recommencé plusieurs fois pour être sure de ne pas avoir fais d'erreur et pourtant ca ne marche toujours pas..
    J'ai rentré ce code avant < /body> :

    < b:if cond='data:blog.url != "http://blogfarfromhome.blogspot.ro/2016/12/presentation.html"'>
    < style type="text/css">
    #HTML3 {
    display: none;
    }
    < /style>
    < /b:if>
    Et il fait disparaitre mon gadget de toutes mes pages, il n'est plus visible nulle part. Aurais tu une idée concernant la source du problème ? (J’ai essayé avec < b:if cond='data:blog.pageType == "item"'> < /b :if> et < b:if cond='data:blog.pageType == "static_page"'> < /b :if> par curiosité et aucun problème, le problème viendrait il donc de l’url ?)

    Par ailleurs, existe t il un code qui permettrait d'afficher un gadjet sur tous les articles qui contiennent un libellé particulier (et non pas sur la page de recherche du libellé), le cas echeant, est ce que je peux faire en sorte que le gadget s’affiche sur plusieurs url spécifiques différentes avec le code ci dessus ?

    Merci d'avance !!

    RépondreSupprimer
    Réponses
    1. Bonjour Stéphanie,
      Le code conditionnel que tu as utilisé cache le gadget sur toutes les pages du site sauf celle précisée (article présentation). Est-ce bien ce que tu souhaites faire ?

      Remarque, attention au signe == et != qui sont contraires :
      != signifie toutes les pages sauf
      == signifie seulement cette page

      Il n'existe pas de code pour les articles d'un certain libellé sur Blogger, car rien ne les différencie par défaut des autres articles. Désolée :/

      Supprimer
  14. Bonjour,
    Merci pour ta réponse, oui je souhaiterais que le gadget apparaisse sur la page "présentation", mais ca ne marche pas.. Quand je rentre ce code, mon gadget n'apparait plus nulle part, meme sur l'article présentation.
    Si j'essais de rentrer un conditionnel avec "affiché seulement un libellé" ou "afficher que sur les articles" par exemple, ca marche, mais pas le code conditionnel pour l'url..

    RépondreSupprimer
    Réponses
    1. Bonjour Stéphanie,
      Peut-être que cela vient du fait que ta page est un article. Au lieu de créer un article présentation créé une page présentation. L'URL d'une page et l'URL d'un article ne sont pas les mêmes.

      Supprimer
    2. Bonjour Catherine,
      Avec beaucoup de retard merci de ta réponse. J'ai fais comme tu as suggéré, j'ai remplacé l'URL de l'article présentation par une page présentation, mais cela ne fonctionne toujours pas.
      Voici le lien de la page : http://blogfarfromhome.blogspot.ro/p/blog-page.html
      Si je met "==", le gadget apparait sur toutes les pages, articles, ... (sauf page d'accueil) et si je met la condition "!=", le gadget n'apparait plus nulle part. C'est à n'y rien comprendre..

      Supprimer
    3. Bonjour Stéphanie,
      Essaye avec le code suivant :

      <b:if cond='data:blog.url != "http://blogfarfromhome.blogspot.com/p/blog-page.html"'>
      <style type="text/css">
      #HTML3 {
      display: none;
      }
      </style>
      <b:else/>
      <style type="text/css">
      #HTML3 {
      display: block;
      }
      </style>
      </b:if>

      Supprimer
    4. Ca marche ! Merci beaucoup pour ton temps et ta patience !!!
      Et je te souhaite beaucoup de bonheur pour cette nouvelle année !! :)

      Supprimer
  15. Bonsoir Catherine

    Je reviens vers toi car après avoir suivi ton tuto pour cacher mes articles de la page d'accueil avec succès je bloque sur une autre manip. Comme je souhaiterai que la barre latérale n'apparaisse que sur la page d'accueil, j'ai appliqué la méthode que tu recommande plus haut mais pas moyen ma barre latérale reste toujours visible partout et rien ne change....Est-ce que c'est parce que ce sont des pages menant vers des articles, là je sèche et il faut dire aussi que je ne suis pas des plus douée...

    Merci d'avance pour ton aide

    Bises

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Peux-tu me donner le lien de ton blog pour que je puisse voir le problème ?

      Remarque, attention au signe == et != qui sont contraires :
      != signifie toutes les pages sauf
      == signifie seulement cette page

      Supprimer
  16. Bonjour Catherine,

    Je personnalise au fur et à mesure mon blog, j'avais fait quelques bêtises que j'ai réussi à rattraper. Seulement maintenant j'ai un problème, mes modifications concernant mon pied de page/ "lire la suite"/ mes commentaires ne s'affichent pas. Je ne sais pas si le problème est sur mon code ou ailleurs.
    Un peu désespérée, j'ai tout vérifié et je ne vois pas ce qui cloche. Sachant que certains paramètres bougent (comme le fait que "lire la suite" soit centré) mais pas d'autres.
    Totalement perdue.

    Merci de ton aide.

    Bonne journée.
    (Ne réponds pas à mes précédents messages, celui ci est le bon ;) désolée)

    RépondreSupprimer
    Réponses
    1. Bonjour Pauline,
      Vérifie qu'il ne manque pas un des signes suivants (ou qu'il n'y en ai pas en trop) dans ton code CSS (y compris dans les codes qui le précède) :

      { : ; } /* */

      Un seul signe en plus ou manquant, et tout ce qui suit cette erreur peut ne pas être pris en compte par le navigateur ;)

      Supprimer
  17. Bonjour, est-ce possible que le pied de l'article soit affiché seulement quand on clique sur l'article ? (je ne sais pas si c'est clair ^^)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui, tu peux utiliser le code CSS suivant pour cacher le pied d'article :

      .post-footer {
      display: none;
      }

      Ajoute ce code CSS au code conditionnel de ton choix pour le cacher sur les pages correspondantes ;)

      Supprimer
  18. Bonjour,

    Merci beaucoup pour ce tutoriel! et pour tous les autres!! grâce à toi mon blog commence à ressembler à quelque chose ;)

    Je voulais cacher les commentaires sur la page d'accueil de mon blog (en fait surtout pour la version mobile, car cela décale mes miniatures par rapport à celles qui n'ont pas de commentaires...).

    J'ai essayé d'ajouter un bout de code comme expliqué, mais ça n'a rien changé (du coup là je l'ai enlevé).

    Peux-tu me dire comment faire stp?

    Au cas où tu en aurais besoin, voici l'adresse de mon blog:
    http://mamandejumelles.blogspot.fr/

    Merci beaucoup!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour cacher les commentaires sur les index des pages mobile tu peux simplement utiliser le code CSS suivant :

      .mobile-index-comment {
      display: none;
      }

      A coller avant la ligne :

      ]]></b:skin>

      Supprimer
    2. Merci beaucoup... mais ça ne marche pas... snif... j'ai essayé de rajouter "!important" au cas où mais ça ne marche pas non plus...
      .mobile-index-comment {
      display: none !important;}

      Supprimer
    3. Bonjour! merci beaucoup pour ta réponse, ça fonctionne!!

      Supprimer
  19. Bonjour,
    Merci pour tous ces tutos.
    Ce n'est peut être pas le meilleur endroit pour mon commentaire mais je ne sais pas où en parler !
    Je souhaiterais mettre des pages dans des menus déroulants (ex : wishlist) mais je n'y arrive absolument pas (pas faute d'avoir parcouru le web). Idem pour la page à propos qui ne se met pas dans à propos mais se met sous le titre du blog. Complètement paumer avec les pages !!!
    http://anthealareine.blogspot.fr/

    Peut être que tu as déjà publié des articles sur le sujet....
    Merci et encore bravo pour ce blog, qui m'a beaucoup aidé.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour classer un article dans un lien de ton menu (une catégorie d'un menu déroulant par exemple), il faut utiliser les libellés. Ajoute un libellé à tous les articles que tu souhaites regrouper dans une catégorie. Ensuite ajoute le lien vers ce libellé dans ton menu. L'adresse url d'un libellé sur Blogger est :

      http://anthealareine.blogspot.fr/search/label/libellé

      Remplace libellé par le mot exacte de ton libellé (mêmes majuscules et accents) et en remplaçant les éventuels espaces par %20.

      Si tu souhaites créer une page (à ne pas confondre avec un article) qui ne s'affiche pas dans le flux d'articles de l'accueil, alors à partir de ton tableau de bord clique sur Pages, puis sur Nouvelle page.

      Supprimer
    2. Bonjour,
      Merci pour votre réponse.
      En relisant mon commentaire, il me semble m'être mal expliquer. Je souhaiterais mettre des pages en sous catégories. Est-ce possible ? Désolé et Merci

      Supprimer
    3. Bonjour Anthéa,
      Si tu souhaites créer des sous-menus (menu déroulant dans un menu déroulant) j'ai créé un tutoriel disponible à la fin de ce tutoriel.
      Sinon, il n'y a pas de hiérarchie des libellés sur Blogger. Tous les libellés sont au même niveau, on ne peut créer de sous-libellé. On peut par contre simuler une hiérarchie en créant des sous menus déroulants, par exemple.

      Supprimer
    4. Bonjour,
      En fait je souhaiterais que le lien de mes pages soient dans mon menu déroulant et non en onglet. Mais je n'y arrive pas, car si je passe directement par le widget pages, celles-ci se mettent directement en nouvel onglet.
      Merci
      Bonne journée

      Supprimer
    5. Bonjour Nessa,
      Je ne sais pas comment à été créé ton thème mais tu dois sûrement avoir un gadget liste de liens, pages, ou similaire qui doit gérer les liens de tes menus déroulants.
      Si ce sont des gadgets liste de lien alors à la ligne Nom du nouveau site entre le texte du lien à afficher, et à la ligne Nouvelle URL du site entre l'adresse url de ta page.
      Avec ton thème tu as dû avoir des documents expliquant comment il fonctionne, vérifie que ce n'est pas décrit quelque part.

      Supprimer
  20. Bonjour Catherine,
    J'avais déjà mis un commentaire mais je crois qu'il n'a pas marché.
    J'ai téléchargé un thème et sur les pages que je créé il y a des boutons de partage en bas. J'aimerais les cacher si c'est possible?
    Merci milles fois,
    http://wild--amanda.blogspot.fr/p/a-propos.html

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Utilise le code conditionnel pour les pages statiques, en ajoutant le code CSS suivant :

      .post-share {
      display: none;
      }

      Supprimer

Vérifiez d'abord que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Je modère les commentaires 1 fois par semaine, mais je ne vous oublie pas ! :)

Newsletter

Tu veux recevoirinfos exclusives, news et ressourcesdans ta boîte mail ?
Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger