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

Ajouter des libellés aux articles sur Blogger

J'ai décidé de faire un petit tutoriel pour expliquer comment simplement ajouter des libellés à ses articles. Ça peut paraître facile pour certains, mais pour les débutants sur Blogger ce n'est pas forcément évident.

Ajouter des libellés aux articles sur Blogger

C'est parti pour les explications ! ;)


Ajouter un nouveau libellé à un nouvel article

Sur la page de création du nouvel article vous trouverez sur la droite de l'écran Libellés. Cliquez dessus :

Ajouter des libellés aux articles sur Blogger

Pour ajouter un nouveau libellé écrivez-le dans la boîte blanche qui apparaît. Vous pouvez en ajouter plusieurs mais il faudra alors les séparer par une virgule. Une fois que vous avez inscrit le (ou les) libellé(s), cliquez sur Ok et voilà ;)

Ajouter des libellés aux articles sur Blogger

Ajouter des libellés à un article déjà publié

Pour ajouter des libellés à un article déjà publié, allez dans Articles à partir du tableau de bord puis survolez l'article que vous voulez modifier, cliquez sur Modifier qui apparaît sous le nom de l'article :

Ajouter des libellés aux articles sur Blogger

Vous serez redirigé vers la page de création/modification de l'article. Il suffira de suivre les mêmes étapes vu ci-dessus pour ajouter un nouveau libellé à l'article. A noter que vous pouvez aussi supprimer un libellé en l'effaçant tout simplement.
Une fois que vos libellés sont bons, cliquez sur Mettre à jour  :

Ajouter des libellés aux articles sur Blogger

Ajouter un libellé déjà existant à un article

Il est possible d'ajouter un même libellé à plusieurs articles. On peut choisir un libellé ayant déjà été utilisé dans la liste proposée au-dessus du bouton Ok :

Ajouter des libellés aux articles sur Blogger

Pour valider cliquez sur Ok.

Ajouter le même libellé à plusieurs articles est très utile pour regrouper des articles par catégorie. On peut donc créer un lien dans son menu vers tous les articles associés au libellé Photo par exemple. Pour savoir comment créer un menu avec un lien qui renvoi vers un libellé (aussi appelé catégorie) vous pouvez jeter un œil au tutoriel que j'ai écrit sur le sujet ;)

Bon blogging !

Autres articles

50 commentaires:

  1. Coucou ! Je vous ai déjà demander conseil mais je reviens avec une question un peu toute bête :)
    est ce que les codes html pour modifier son blog ne s'appliquent que pour blogger ? car j'aimerais bien tenter quelque chose sur la plateforme weebly.
    Merci d'avance
    Romane

    RépondreSupprimer
    Réponses
    1. Bonsoir romane,

      Les tutoriels que j'écris sont essentiellement pour Blogger.
      Par contre le HTML et le CSS sont des langages web qui sont applicables à toutes les plateformes ! Par contre je ne peux pas te dire comment changer le code HTML ou CSS sur la plateforme weebly car je ne la connais pas :/

      Supprimer
    2. D'accord, merci beaucoup pour cette réponse :)

      Supprimer
  2. Coucou, je n'arrive plus à te joindre par mail. J'ai une grosse question à te poser ! Dis moi comment faire pour te joindre

    RépondreSupprimer
    Réponses
    1. Tu n'es pas la seule à avoir des problèmes pour m'envoyer des e-mails, je ne sais pas ce qui se passe :/
      Enfin, voici mon mail : contact@catherinesurr.fr

      Supprimer
  3. Bonjour,

    Merci beaucoup pour ces excellentes tutoriels. Je viens de découvrir votre site et j'ai pu améliorer considérablement le design de mon blog.

    Je viens vers vous pour vous demander si vous pourriez fournir un petit tutoriel afin de montrer comment effacer ces agaçantes "lignes" en pointillés qui apparaissent en bas des blogs ? En vous remerciant par avance.

    RépondreSupprimer
    Réponses
    1. Oui pas de soucis je note sur ma liste de tutos à faire :)

      Supprimer
  4. Bonjour,

    Merci pour tes tutos qui m'aident beaucoup.
    Je voulais savoir comment faire pour que les libellés apparaissent en vignettes comme sur ton blog /
    Quand on clique sur recettes par exemeples on a la premiere photo, moi j'ai l'article entier, pas super :/

    Merci d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour,

      Tu peux utiliser le code du tutoriel suivant : http://ladybirdr.blogspot.com/2015/01/afficher-les-articles-en-miniatures-et.html

      Mais au lieu de le coller après la ligne :

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

      Colle-le avant :

      </body>

      En rajoutant la ligne suivante :

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

      Avant la ligne :

      <style type='text/css'>

      Et en ajoutant la ligne :

      </b:if>

      Après la ligne :

      </style>

      Supprimer
  5. Bonsoir ma belle, je te (re)contact pour solliciter ton aide qui m'est si précieuse !!! Voilà je n'arrive pas à associer mes articles à mes catégories.. Par exemple quand on clique sur "Cuisine" trouver touts les articles de cuisine et ainsi de suite. J'espère que tu pourras m'aider, je t'embrasse !

    RépondreSupprimer
    Réponses
    1. As-tu réglé le problème ? Car de mon ordi tout fonctionne :)

      Supprimer
  6. Bonjour Catherine,

    Bon, fausse manip, si ça se trouve tu auras ce commentaire 2 fois sur la page (j'en suis désolée si c'est le cas !!).
    J'ai à nouveau besoin de ton aide, mais cette fois pour un truc un peu plus problématique que ma simple petite déco !! Je n'ai plus qu'un article par page (que ce soit ma page d'accueil ou mes onglets) alors que j'en ai publié trois ! J'ai du faire une fausse manip ou que sais-je, mais c'est assez embêtant parce qu'il n y a plus que l'article le plus récent qui apparait.
    J'ai essayé de modifier la date de mes articles pr choisir l'ordre d'apparition mais ça ne marche pas mieux. La configuration de mes articles est pourtant à 6 par page.
    Là vraiment je bloque :(

    Je suis vraiment désolée de t'embêter ! Merci d'avance pour ton aide.

    Belle journée à toi.

    RépondreSupprimer
    Réponses
    1. Bonjour Erica,

      Oulà ! Je pense que le problème vient de ton thème. Mais je ne le connais pas. Je peux seulement voir ton code CSS mais le problème doit être plus compliqué que ça :/

      Peux-tu m'envoyer le fichier de ton thème actuel pour que j'y jette un œil. Je ne te promets rien mais je peux regarder :)

      Supprimer
  7. Bonjour, je sais qu'une personne à déjà posé la question mais impossible pour moi de retrouver le commentaire ou je l'ai vu mais est ce possible de supprimer ou déplacer en bas de la page les encadrés :
    Affichage des articles dont le libellé est.... Afficher tous les articles
    Car c'est particulièrement moche quand même hein ;-)
    Maintenant que grâce à tes tutos et réponses à mes questions mon blog est pas trop mal, j'aimerai bien me débarrasser de ça!

    RépondreSupprimer
    Réponses
    1. Bonjour Laure,

      Ajoutes ce code avant /* Content par exemple :

      .status-msg-wrap {
      display: none !important;
      }

      Et voilà :)

      Supprimer
    2. Bonjour, catherine, merci de ta réponse rapide c'est Nickel ! J'ai vu que tu en avais fais un tuto du coup! A ta liste de tutos à faire est ce que tu pourrais nous expliquer, si c'est possible, comment relier notre nom (quand on poste des commentaires ) a un lien direct sur le blog et non sur la page google +
      J'ai essayé de trouver la réponse sur le net mais j'ai fait chou blanc.

      Supprimer
    3. C'est une bonne question, je vais regarder ça :)

      Supprimer
  8. Hello !

    Je sais pas si tu peux m'aider mais avec toutes les modifs faites il se trouve que mes libellés n'apparaissent pas du tout en bas de mes articles ! Même si j'ai coché que je les voulais dans la mise en page..

    Aurais-tu une idée de qu'est-ce que j'ai fabriqué? ^^Merci d'avance et trop bien tous ces tutos !!!

    RépondreSupprimer
    Réponses
    1. Bonjour Marine, sans voir le code HTML de ton blog, je ne pourrais pas être d'une grande aide. Néanmoins j'ai remarqué une erreur dans ton code CSS.
      Dans Modifier le code HTML, cliques sur le triangle noir à gauche de <b:skin>...</b:skin>. Cliques n'importe où dans la boîte de code et appuies sur Ctrl et F en même temps. Dans la boîte de recherche qui apparaît colles :

      * Espacement et Bordure du Premier Lien

      Et appuies sur Entrer.

      Au début de cette ligne rajoutes le signe / comme ceci :

      /* Espacement et Bordure du Premier Lien

      Sauvegardes.
      Si ça ne règle pas le problème il faudra regarder directement ton code HTML.

      Supprimer
    2. Malheureusement ça n' a pas réglé le soucis ! Une idée d ou ça peut se trouver dans le code ? navrée de déranger !!

      Supprimer
    3. Bonjour Marine, le soucis c'est que le problème peut venir du code des libellés ou des codes autour. Cherches déjà si tu as bien le code suivant :

      <span class='post-labels'>

      Supprimer
    4. Il ne semble ne pas y être effectivement !! Je l'ai sûrement viré ?! Ou se trouve-t-il normalement ? Merci merci !!

      Supprimer
    5. Retrouves le code suivant :

      <div class='post-footer-line post-footer-line-1'>

      Tu trouveras ce code 2 fois, c'est le 2e qui nous intéresse. Pour trouver le 2e clique à nouveau dans la boîte de recherche et appuie à nouveau sur Entrer.
      Pour être sûre que c'est bien le 2e code, le nombre à gauche de la ligne doit être le plus grand.

      Juste après cette ligne, colles ceci :

      <span class='post-labels'>
      <b:if cond='data:post.labels'>
      <data:postLabelsLabel/>
      <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop>
      </b:if>
      </span>

      Ça devrait marcher

      Supprimer
    6. Merci merci merci !! Ils ont réapparu !! Trop forte merci ! =)

      Supprimer
    7. Coucou, en tout cas super tes explications :)
      Un grand merci !!!
      Par contre mes libellés se sont mis à côté des "boutons" et des commentaires
      mais j'aurais voulu qu'ils soient au dessus ou en dessous... Pourtant dans article du blog, modifier, j'ai bien mis en place mais ça ne donne pas ça sur le blog...
      Saurais-tu m'aider ? :)

      Merci :)

      Supprimer
    8. Bonjour,
      La solution la plus simple sans toucher au code HTML est d'ajouter le code CSS suivant à ton thème :

      span.post-labels {
      display: block;
      }

      Rajoutes-le, par exemple, juste avant la ligne :

      /* Content

      Supprimer
    9. J'ai suivie ton tuto et tes explication que tu as expliquer à Marine mais je trouve pas le < div class='post-footer-line post-footer-line-1' >
      J'ai le même soucis qu'elle :/

      Supprimer
    10. Je trouve pourtant ce code sur ton blog. C'est là où se trouvent tes boutons de partage vers les réseaux sociaux. Cherches le code suivant :

      <div class='post-footer'>

      Le code devrait se trouver juste après celui-ci.

      Supprimer
    11. Super merci tout c'est mis autaumatiquement :)

      Supprimer
  9. Bonjour Catherine! Je reviens vers toi pour un petit problème! Je voudrais déplacer mes libellés et le lien de mes commentaires en dessous des titres de mes articles! Sauf que je n'ai plus aucun contrôle sur les options d'articles (impossible de les déplacer/supprimer/ajouter par les paramètres)! Du coup je me demandais si tu savais d'ou pouvais venir le problème?
    Je te remercie d'avance pour ta réponse!
    Kévin ( http://des4lem.blogspot.fr)

    RépondreSupprimer
    Réponses
    1. Bonjour Kévin,
      Je ne sais pas de quoi peut venir ce problème, par contre tu peux déplacer les libellés et le commentaires dans l'en-tête de tes articles en passant par le code HTML.

      Le code pour les libellés commence par :

      <span class='post-labels'>

      Réduit le code des libellés comme tu as fait pour le footer, et coupe le code.

      Colles-le juste après la ligne :

      <div class='post-header-line-1'>

      ou

      <div class='post-header-line-1'/>

      Tu devrais trouver ce code 2 fois, celui qui t'intéresse est celui avec le plus grand nombre à gauche.

      Fais la même chose avec les commentaires.
      Le code pour les commentaires commence par :

      <span class='post-comment-link'>

      Supprimer
  10. Coucou ! Excuse-moi de te déranger mais je profite de cet article pour te poser une question !
    Depuis déjà pas mal de temps, les libellés ne s'affichent plus sur mes articles. Pourtant, je ne me souviens pas avoir fait quoi que ce soit ! Il est bien coché dans "mise en page" donc je ne comprends vraiment pas d'où ça peut venir... :/

    Merci d'avance et merci pour tous ces tutoriels !

    A bientôt !

    RépondreSupprimer
    Réponses
    1. Bonjour Tinhy,
      As-tu essayé les instructions que j'ai donné à Marine (ci-dessus) ? Elle à eu le même problème ;)

      Supprimer
  11. Bonjour,

    J'au une question qui n'a pas trop rapport avec ce tutoriel mais bien avec celui de la barre de navigation. Tout a fonctionné mais je comprends pas quel lien je dois mettre et surtout comment le créer.

    Si vous pouvez juste m'explique comment créer des pages et relié les articles. Mon blog est www.lepetitcochonrose.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour Mélanie, si tu veux ajouter un lien qui renvoie vers les articles d'un libellé alors fais un clique droit sur le nom de ton libellé sous ton article, et sélectionne copier l'adresse du lien. Colles l'adresse que tu viens de copier à la place de LIEN dans le code HTML du lien de ton menu comme expliqué ici : http://ladybirdr.blogspot.fr/2014/02/customiser-son-blogger-la-barre-de.html#LienLibellé

      Si tu veux créer un lien qui renvoi vers une page, alors créé ta page puis vas affiches-la dans ton navigateur. Copies l'adresse URL de la page web et colles-la à la place de LIEN dans le code HTML du lien de ton menu, comme expliqué ici : http://ladybirdr.blogspot.fr/2014/02/customiser-son-blogger-la-barre-de.html#LienArticle

      Supprimer
  12. Hello !

    Super ton blog, tes tutoriels sont top !
    Moi je suis bloquée en ce moment sur mon blog car j'aimerais faire une page regroupant des libellés sous forme de galerie photo de ce type :
    http://neginmirsalehi.com/fashion
    http://www.leblogdebetty.com/lookbook/
    http://www.madeinfaro.com/search/label/travel
    mais je n'y arrive pas :( aurais-tu un tuto de ce type ?

    Belle continuation à toi,
    Cassandre

    RépondreSupprimer
    Réponses
    1. Bonjour Cassandre, tu as plusieurs options.

      1 - Créer une page avec un galerie d'images qui renvoient vers les articles associés. Voici un tutoriel pour créer une galerie d'images : http://ladybirdr.blogspot.com/2014/11/creer-une-galerie-dimages-simple-avec.html

      2 - Modifier l'apparence des articles sur la page de recherche d'un libellé (lookbook par exemple). Pour cela il faut ajouter un même libellé à tous les articles que tu souhaites ajouter à ton lookbook. Tu peux utiliser le tutoriel suivant pour créer l'apparence en grille des articles : http://ladybirdr.blogspot.com/2015/01/afficher-les-articles-en-miniatures-et.html
      Petite remarque pour cette option, colles le code CSS de la version de ton choix avant la ligne qui commence par :

      <body

      Au lieu de la coller après le code expliqué dans le tutoriel. De plus, ajoutes la ligne suivante avant le code :

      <b:if cond='data:blog.searchLabel == "LIBELLE"'>

      En remplaçant LIBELLE par le nom de ton libellé exacte (majuscules, accents et espaces compris).

      Rajoutes aussi le code suivant après le code CSS :

      </b:if>

      Supprimer
    2. Merci ça marche ! merci beaucoup c'est super gentil de m'aider et d'avoir pris du temps pour me répondre !

      xx
      Cassandre

      Supprimer
  13. Bonjour, encore quelques questions de mon coté: Comment modifier la police d'un libellé et comment enlever le mot "Libellé" devant le libellé ?
    Je viens de comprendre comment le mettre sous le titre mais j aimerais aussi que la date soit sous le titre... est ce possible ?

    RépondreSupprimer
    Réponses
    1. Bonjour Polna,
      Ces idées sont déjà sur ma liste de tutoriels à faire ;)

      Supprimer
  14. Bonjour,
    J'ai créé un menu déroulant et je veux associez une catégorie de mon menu déroulant à mon article mais l'article n'apparait pas dans cette catégorie ? Merci pour tous tes tutos très utiles !

    RépondreSupprimer
    Réponses
    1. Bonjour Maria,
      Pour quel libellé ça ne marche pas ? Car j'ai essayé les liens Océanie, Australie, et Préparatifs, et ils marchent bien.

      Supprimer
  15. Coucou Catherine !
    Comment fait-on pour que sur notre blog, les libellés soient séparés par "/" et non par "," ? :)

    Et est-il possible d'ajouter une fine pour séparer les Libellés du titre de l'article ?

    Pour ce qui est de mes commentaires, la créatrice de mon template s'en charge mais je pense qu'on ne peut rien y faire donc j'ai importé mon blog sur un nouveau (pas encore public) et les commentaires fonctionnent sur celui ci :)


    Merci Catherine !

    RépondreSupprimer
    Réponses
    1. Bonjour Emilie,
      J'explique comment modifier l'apparence des libellés dans le pied d'article ici : http://ladybirdr.blogspot.com/2015/10/modifier-lapparence-des-libelles-dans.html
      J'explique justement comment modifier le signe , par un / ;)

      Je ne comprends pas ta question : Et est-il possible d'ajouter une fine pour séparer les Libellés du titre de l'article ?

      J'espère que les commentaires vont marcher ! En tout cas le formulaire s'affiche bien pour moi sur ton blog ;)

      Supprimer
  16. Bonjouuuur,
    J'ai créé un menu déroulant et je veux associer une catégorie de mon menu déroulant à mon article mais l'article n'apparaît pas dans cette catégorie. HELP ! :)

    RépondreSupprimer
    Réponses
    1. Bonjour Camille,
      Le problème vient des liens de ton menu vers tes libellés qui ne sont pas corrects. Tu trouveras les instructions pour ajouter des liens vers tes libellés ici : http://ladybirdr.blogspot.fr/2014/02/customiser-son-blogger-la-barre-de.html#LienLibellé ;)

      Supprimer
  17. Coucou Catherine,
    J'ai un soucis avec mes libellés qui se mettent en ordre alphabétique. Donc quand je publie un article c'est le premier de la liste alpha qui se met en affichage blog et non celui que je veux référencer à la catégorie. Par exemple mes catégories sont : LOOKS BEAUTE LIFESTYLE DIY et quand je note dans un article LOOKS : les libellés : Adidas, LOOKS, Daniel wellington, jupe, etc eh bien c'est le mot Adidas qui se mettra en affichage et pareil pour la featured slide : c'est inscrit featured au lieu de LOOKS ou LIFESTYLE.
    Merci d'avance.
    Sophie
    http://ideessoaddict.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Sophie,
      C'est normal. Blogger ne prend pas en compte les catégories car il n'y en a pas. Pour lui, ce sont tous des libellés de même ordre. Pour éviter ce problème utilise seulement des libellés pour les catégories. Ça ne sert à rien de rajouter une dizaine de libellés ;)
      Par exemple sur mon blog j'utilise customiser son blogger, tutoriel, astuces, réalisations, ressources.

      Supprimer
  18. Bonjour ! Je voulais essayer de rajouter un libellé qui n'existait pas sous mon blog, donc je suis ce tutoriel, je rajoute un libellé. Mais il ne s'affiche pas à la suite de mon article avec les autres libellés parce qu'il n'existe pas.... Comment puis-je faire ?

    Merci par avance !

    RépondreSupprimer
    Réponses
    1. Bonjour Malie,
      Ajoute le nouveau libellé manuellement dans la partie Libellés dans les paramètres à droite de l'écran de modification de ton article, puis clique sur OK. Ensuite met à jour ton article en cliquant sur Mettre à jour en haut de la page.
      Ton libellé sera ajouté à l'article, et s'affichera désormais dans la liste de libellés disponibles ;)

      Supprimer

Le blog est officiellement en PAUSE. Je ne pourrai PAS répondre à vos commentaires. Pour plus d'infos.

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

Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger