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

Modifier l'apparence des libellés dans le pied d'article sur Blogger

Voici enfin la 2e partie des tutoriels sur la personnalisation du pied d'article !
Dans ce tutoriel, nous allons voir comment modifier l'apparence des libellés.

Hop, c’est parti pour les explications !

Sommaire

  1. Introduction
  2. Faire une sauvegarde du thème
  3. Supprimer ou modifier le terme libellé
  4. Modifier ou supprimer l'élément entre les libellés
    1. Remplacer l'élément par un signe
    2. Remplacer l'élément par une image
  5. Modifier l'apparence des libellés
    1. Police des liellés
    2. Couleurs des libellés
    3. Espacement des libellés
    4. Ajouter de l'espace au-dessus des libellés
  6. Modifier l'apparence des libellés au survol de la souris

Introduction

Ce tutoriel fait suite au tutoriel sur la modification de l'apparence du pied d'article. Je vous conseil donc de le suivre avant de commencer celui-ci, vous y trouverez comment modifier le fond, la bordure, la police, les liens en général, et comment centrer les éléments du pied d'article !

Faire une sauvegarde du thème

Comme d'habitude, faites une sauvegarde de votre thème avant toute modification de celui-ci ! Si vous faites une erreur vous pourrez facilement revenir en arrière ;)

Cliquez sur Modèle à partir de votre tableau de bord et cliquez sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez sur Télécharger le modèle complet pour faire une sauvegarde de votre thème.

Modifier l'apparence des libellés dans le pied d'article sur Blogger

Vous pourrez maintenant facilement revenir en arrière si vous faites une erreur en cliquant sur Choisissez un fichier et en sélectionnant ce fichier.

Plus d'informations sur la sauvegarde, et comment charger votre sauvegarde en cas d'erreur ;)

Supprimer ou modifier le terme libellé

Cliquez sur Modifier le code HTML :

Modifier l'apparence des libellés dans le pied d'article sur Blogger

Cliquez sur le triangle noir à gauche de <b:skin>...</b:skin> :

Modifier l'apparence des libellés dans le pied d'article sur Blogger

Cliquez n'importe où dans la boîte de code et appuyez sur Ctrl et F en même temps. Dans la boîte de recherche qui apparaît en haut à droite de la boîte de code, collez :
<data:postLabelsLabel/>
Appuyez sur Entrer.
Vous devrez tomber sur un code qui ressemble à ceci :

Modifier l'apparence des libellés dans le pied d'article sur Blogger

Le code suivant représente les libellés :
<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='not data:label.isLast'>,</b:if>
    </b:loop>
  </b:if>
</span>
Le code <data:postLabelsLabel/> correspond au terme "Libellés :".
Vous pouvez soit supprimer cette ligne, soit la remplacer par le terme de votre choix. Attention à ne pas supprimer d'autres éléments du code ou à en rajouter !

Si je souhaites supprimer ce terme, alors on obtient :
<span class='post-labels'>
  <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>
    </b:loop>
  </b:if>
</span>
Ce qui donne :

Modifier l'apparence des libellés dans le pied d'article sur Blogger

Modifier ou supprimer l'élément entre les libellés

Remplacer l'élément par un signe

Cherchez maintenant le code suivant :
<b:if cond='not data:label.isLast'>,</b:if>
La virgule dans ce bout de code représente l'élément affiché entre les libellés. Vous pouvez soit la supprimer, soit la remplacer par un autre signe. Par exemple / | - ou tout autre signe de votre choix.

Si je remplace la virgule par / j'écris :
<b:if cond='not data:label.isLast'> /</b:if>
Remarquez l'espace que j'ai ajouté avant le signe pour éviter qu'il soit collé au texte ;)

Ce qui donne :

Modifier l'apparence des libellés dans le pied d'article sur Blogger

Remplacer l'élément par une image

Vous pouvez également remplacer ce signe par une image. Dans ce cas remplacez le signe par le code suivant :
<img src="https://adresse.fr/image.png" />
Comme ceci :
<b:if cond='not data:label.isLast'><img src="https://adresse.fr/image.png" /></b:if>
Remplacez http://adresse.fr/image.png par l'adress URL de votre image.
Pour créer une adresse URL pour votre image, vous pouvez utiliser cette technique simple sur Blogger ;)

Visuellement on obtient :

Modifier l'apparence des libellés dans le pied d'article sur Blogger

Il faut maintenant ajuster la taille et la position de l'image.

Cherchez le code suivant :
]]></b:skin>
Juste avant cette ligne collez :
/* ----- Image entre les libellés ----- */
.post-labels img {
    height: 7px;   /* Taille de l'image */
    width: auto;
    margin-left: 8px;   /* Espace à gauche de l'image */
    margin-right: 5px;   /* Espace à droite de l'image */
}
Remplacez les valeurs de height, margin-left et margin-right comme vous convient ;)

Visuellement on obtient :

Modifier l'apparence des libellés dans le pied d'article sur Blogger

Pour la suite du tutoriel je vais supprimer cet élément. Le code de l'élément ressemble donc à ceci :

<b:if cond='not data:label.isLast'></b:if>

Modifier l'apparence des libellés

Nous allons continuer la personnalisation des libellés avec du CSS. Collez tous les codes CSS avant la ligne :
]]></b:skin>
Le code CSS que nous allons utiliser pour modifier l'apparence des libellés est le suivant :
.post-labels a {
}

Police des libellés

Pour modifier la police des libellés, ajoutez les lignes suivantes avant le signe } du code ci-dessus :
font-family: 'PT sans', sans-serif;   /* Police */
font-size: 12px;   /* Taille de la police */
text-transform: uppercase;   /* Texte en majuscules */
letter-spacing: 1px;   /* Espacement des caractères */
Comme ceci :
.post-labels a {
    font-family: 'PT sans', sans-serif;   /* Police */
    font-size: 12px;   /* Taille de la police */
    text-transform: uppercase;   /* Texte en majuscules */
    letter-spacing: 1px;   /* Espacement des caractères */
}
Remplacez 'PT sans', sans-serif par le nom de la police que vous souhaitez utiliser. Vous pouvez utiliser les polices proposées par Blogger, ou une police Google Fonts.
Pour savoir comment installer une police Google Fonts, jetez un oeil à mon tutoriel ;)

Remplacez 12px par la taille de la police que vous souhaitez utiliser.

La ligne text-transform: uppercase;   /* Texte en majuscules */ transforme le texte en majuscules. Si vous ne voulez pas utiliser ceci, supprimez la ligne.

La ligne letter-spacing: 1px;   /* Espacement des caractères */ défini un espace entre les caractères de 1px. Indiquez 0 pour un espacement par défaut, ou modifiez la valeur comme bon vous semble ;)

Couleurs des libellés

Pour modifier la couleur du texte et celle du fond des libellés, ajoutez les lignes suivantes avant le signe } de votre code :
background-color: #CDDBC2;   /* Couleur du fond */
color: white;   /* Couleur du texte */
Comme ceci :
.post-labels a {
    font-family: 'PT sans', sans-serif;   /* Police */
    font-size: 12px;   /* Taille de la police */
    text-transform: uppercase;   /* Texte en majuscules */
    letter-spacing: 1px;   /* Espacement des caractères */
    background-color: #CDDBC2;   /* Couleur du fond */
    color: #ffffff;   /* Couleur du texte */
}
Remplacez les codes couleurs par celles des couleurs que vous souhaitez utiliser.
Pour trouver le code d'une couleur vous pouvez utiliser ce site ;)

Si vous ne voulez pas ajouter de couleur de fond, n'ajoutez pas la ligne :
background-color: #CDDBC2;   /* Couleur du fond */
Visuellement on obtient :

Modifier l'apparence des libellés dans le pied d'article sur Blogger

Espacement des libellés

Ajoutons maintenant de l'espace autour des libellés. Ajoutez les lignes suivantes avant le signe } du code :
padding: 3px 5px 3px 5px;   /* Espace autour du texte */
margin: 0 3px 0 3px;   /* Espace autour du libellé */
Comme ceci :
.post-labels a {
    font-family: 'PT sans', sans-serif;   /* Police */
    font-size: 12px;   /* Taille de la police */
    text-transform: uppercase;   /* Texte en majuscules */
    letter-spacing: 1px;   /* Espacement des caractères */
    background-color: #CDDBC2;   /* Couleur du fond */
    color: #ffffff;   /* Couleur du texte */
    padding: 3px 5px 3px 5px;   /* Espace autour du texte */
    margin: 0 3px 0 3px;   /* Espace autour du libellé */
}
La ligne padding: 3px 5px 3px 5px;   /* Espace autour du texte */ permet de définir l'espace autour du texte du libellé, donc entre les bords du lien et le texte.

La ligne margin: 0 3px 0 3px;   /* Espace autour du libellé */ permet de définir l'espace autour du libellé, donc entre les libellés.

Remplacez les valeurs de padding et margin comme bon vous semble sachant que les valeurs correspondent à ceci :
padding: haut droite bas gauche;
margin: haut droite bas gauche;
Visuellement on obtient :

Modifier l'apparence des libellés dans le pied d'article sur Blogger

Ajouter de l'espace au-dessus des libellés

Pour ajouter de l'espace au-dessus de la ligne de libellés, ajoutez le code CSS suivant à la suite du précédent :
.post-labels {
    margin-top: 8px;   /* Espace au-dessus de la ligne de libellés */
    display: block;
}
Comme ceci :
.post-labels a {
    font-family: 'PT sans', sans-serif;   /* Police */
    font-size: 12px;   /* Taille de la police */
    text-transform: uppercase;   /* Texte en majuscules */
    letter-spacing: 1px;   /* Espacement des caractères */
    background-color: #CDDBC2;   /* Couleur du fond */
    color: #ffffff;   /* Couleur du texte */
    padding: 3px 5px 3px 5px;   /* Espace autour du texte */
    margin: 0 3px 0 3px;   /* Espace autour du libellé */
}

.post-labels {
    margin-top: 8px;   /* Espace au-dessus de la ligne de libellés */
    display: block;
}
Remarque : Pour pouvoir ajouter un espace au-dessus de la ligne des libellés, il faut placer les libellés sur leur propre ligne avec le code :
display: block;

Modifier l'apparence des libellés au survol de la souris

Pour modifier l'apparence des libellés au survol de la souris, nous allons utiliser le code CSS suivant :
.post-labels a:hover {
}
Ajoutez à ce code CSS tous les éléments que vous souhaitez changer quand on survole le lien avec la souris.
Par exemple, si je souhaites modifier la couleur de fond, alors j'ajoute le code avec la nouvelle couleur avant le signe }, comme ceci :
.post-labels a:hover {
    background-color: #7CCCAE;   /* Couleur du fond */
}
Visuellement on obtient :

Modifier l'apparence des libellés dans le pied d'article sur Blogger

Pour supprimer le soulignement du texte au survol de la souris, ajoutez la ligne suivante avant le signe } du code ci-dessus :
text-decoration: none;   /* Supprime le soulignement du texte */
Comme ceci :
.post-labels a:hover {
    background-color: #7CCCAE;   /* Couleur du fond */
    text-decoration: none;   /* Supprime le soulignement du texte */
}
Et voilà ! Amusez-vous avec les codes pour obtenir ce que vous voulez ;)

Bon blogging !

Autres articles

72 commentaires:

  1. J'ai fait mais sa n'a rien changer .. :/

    RépondreSupprimer
    Réponses
    1. Bonjour Sarah,
      Il faut faire très attention aux signe : ; { et } car un seul en trop ou un seul en moins et tout ce qui suit cette erreur n'est pas pris en compte.

      Cherche la ligne suivante :

      #cookieChoiceInfo span { {

      Et supprime le { en trop pour obtenir :

      #cookieChoiceInfo span {

      Sauvegarde et ça devrait marcher ;)

      Supprimer
    2. Ça devrait pourtant marcher. Il faut que tu vérifies tous tes codes CSS pour voir s'il n'y a pas des erreurs :/

      Supprimer
    3. J'ai vérifier et sa me parait correct :

      .post-labels a {
      font-family: 'Combo'; /* Police */
      font-size: 12px; /* Taille de la police */
      letter-spacing: 1px; /* Espacement des caractères */
      background-color: #cfbfd9; /* Couleur du fond */
      color: #ffffff; /* Couleur du texte */
      padding: 3px 5px 3px 5px; /* Espace autour du texte */
      margin: 0 3px 0 3px; /* Espace autour du libellé */
      }
      .post-labels {
      margin-top: 8px; /* Espace au-dessus de la ligne de libellés */
      display: block;
      }
      .post-labels a:hover {
      background-color: #88e2fb; /* Couleur du fond */
      text-decoration: none; /* Supprime le soulignement du texte */
      }

      Supprimer
    4. Vérifie également au-dessus de ces codes qu'il n'y ai pas d'erreur dans un code avant ceux-ci. Car tout ce qui suit une erreur peut ne pas être pris en compte par le navigateur.

      Supprimer
  2. Merci beaucoup pour ton article, j'ai essayé mais ça ne fonctionne pas chez moi.
    Déjà, je ne trouve pas ce code ",", et même sans ça quand j'ai modifié les couleurs et tout ça prend pas en compte, je ne dois pas avoir les mêmes lignes que toi ! :)
    Bisous !

    RépondreSupprimer
    Réponses
    1. Bonjour Lucie,
      Vérifie qu'avant les codes CSS de tes libellés il n'y a pas d'erreur : un signe ; { ou } manquant dans un code CSS, ou un signe en trop. S'il y a une erreur, alors tous les codes CSS suivant cette erreur ne seront pas pris en compte ;)

      Pour ce qui est du code HTML, il est forcément dans ton code car il apparaît sur ton blog ;)
      Cherche cette ligne :

      <span class='post-labels'>

      Il devrait se trouver un peu après.

      Autre remarque, attention à bien cliquer dans la boîte de code avant d'appuyer sur Ctrl et F, sinon un champ de recherche apparaît bien mais en haut de la page web. Ce champ de recherche ne marche pas pour chercher des éléments dans le code de ton blog ;)

      Supprimer
  3. Génial !!! Merci merci merci !!!!!

    RépondreSupprimer
  4. Merci, encore, grâce à toi j'apprends beaucoup de choses :)

    RépondreSupprimer
  5. Rha j'ai fait mon code en long et en large, impossible de trouver :-(

    RépondreSupprimer
  6. Bonsoir
    Merci encore pour ce super tutoriel.
    Bises

    RépondreSupprimer
  7. Alors j'ai trouvé le code finalement ! ^_^ la modification de l'élément entre les libellés fonctionne par contre impossible pour moi de modifier tout le reste :-(

    RépondreSupprimer
    Réponses
    1. Vérifie qu'il n'y a pas d'erreur dans tes codes CSS avant les codes pour tes libellés. Un oubli de signe : ; { ou } ou un signe en trop par exemple. S'il y a une erreur dans un code CSS, alors les codes CSS suivant cette erreur ne seront pas pris en compte ;)

      Supprimer
    2. Effectivement, il y avait un } en trop ! Merci encore !!!

      Supprimer
  8. Salut Catherine !!

    Ton blog est comment dire ...merveilleux ?? Non sérieusement c'est vraiment le meilleur et j'ai voté pour toi au Golden Blog Award !!

    Je te contacte au sujet du menu déroulant. Je suis désolée, je sais que ça n'est pas l'endroit, mais on ne peut plus écrire de comms en dessous de l'article concerné.
    C'est une catastrophe, j'y arrive pas.
    Mes sous catégories se mettent sous les catégories principales. J'ai regardé les commentaires, mais j'ai pas trouvé de réponse. J'ai pas du tout réussis.

    S'il te plait aide moi, comment puis-je faire ?? :(

    Voici le lienhttp://ho-cest-anne.blogspot.fr

    Merci <3

    RépondreSupprimer
    Réponses
    1. Bonjour,

      J'ai créé un nouvel article pour ajouter des commentaires au sujet de l'article du menu déroulant. Le lien vers ce nouvel article est indiqué sur l'article original ;)

      Le problème peut venir de plusieurs choses :
      - une erreur dans le code HTML de ton menu. Vérifie que les <ul> </ul> <li> et </li> sont bien placés, qu'il n'en manque pas ou qu'il n'y en a pas en trop.
      - un oubli de code CSS. Vérifie que tu as bien tous les codes CSS mentionnés dans le tutoriel pour créer le menu déroulant, surtout les codes suivants :

      .tabs .widget li, .tabs .widget li {
      display: inline-block;
      float: none;
      }

      .tabs-outer {
      overflow: visible;
      }

      - Une erreur dans tes codes CSS. Un simple oubli de signe, ou un signe { } : ou ; en trop peut causer de gros problèmes. Tout ce qui suit cette erreur ne sera pas pris en compte par le navigateur

      Supprimer
  9. Génial ! merci pour tous ces tutos ! hâte de lire celui sur le slideshow :)

    RépondreSupprimer
  10. Coucou ma belle! Juste pour te faire la petite surprise, files vite lire mon article! Gros bisous :)
    http://unblogunemerveillee.blogspot.fr/2015/10/ce-qui-ma-aidee-dans-le-blogging.html

    RépondreSupprimer
    Réponses
    1. Oh merci beaucoup ! :)
      Je suis toujours contente de pouvoir aider ! ;)

      Supprimer
  11. Salut Catherine!
    J'ai besoin de ta précieuse aide!
    Ton blog est génialissime, c'est dingue. Je t'ai d'ailleurs dédicacé sur mon blog tellement je suis fan de toi! haha
    J'ai par contre un énorme problème! (ce n'est pas le bon topic j'en suis désolée)
    J'ai voulu faire une énorme marge en bas de ma page noire, et je me retrouve avec mes commentaires également avec un fond noir! je suis perdue, lost in my soul, et j'y voit plus rien! I need help !!
    Merci d'avance
    Justine du blog biancojustine.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour Justine,
      Où souhaites-tu ajouter une marge exactement ?

      Autre question, est-ce normal que je ne vois plus que 2 articles sur ton blog ?

      Supprimer
    2. Salut Catherine,
      Entre temps, il m'est arrivé des catastrophes. Je t'explique : voulant avoir mon nom de domaine, j'ai acheté une formule sur ovh pour 30 par an.
      Le soucis étant qu'une fois mes modifications, thèmes etc fait, j'ai fait une manipulation qui me bloque l'accès à mon site. Mon site est biancojustine.fr , et il me met une page blanche à chaque fois que j'essaie de re-rentrer dans mon tableau de bord etc.
      Merci pour ta réponse. Si tu as besoin de mes identifiants, peux-tu me donner une adresse où je peux tout t'envoyer stp?
      Merci encore, je suis à nouveau 'lost in my soul', perdue!!
      Justine du blog biancojustine.fr

      Supprimer
    3. Bonjour Justine,
      Quelle manipulation as-tu faite avant que cela te bloque l'accès au blog ?
      Envoie-moi un mail par le formulaire accessible sur la page Design.

      Supprimer
  12. Bonjour, pourriez-vous faire un tuto pour modifier le design du site mobile ?

    RépondreSupprimer
    Réponses
    1. Bonjour, c'est déjà noté sur ma liste de tutoriels à faire ;)

      Supprimer
  13. (encore) Bonjour !
    Et encore merci pour ce tuto ;)
    Comment faire pour enlever le fond gris clair et mettre des border solid en haut et en bas à la place ?
    Merci !

    RépondreSupprimer
    Réponses
    1. Bonjour Aurore,
      Veux-tu parler du fond du pied d'article ? Si oui alors voici un tutoriel qui explique, entre autres, comment modifier ce fond et la bordure ;)
      http://ladybirdr.blogspot.com/2015/09/modifier-lapparence-globale-du-pied.html

      Supprimer
  14. Bonjour Catherine,
    merci milles fois pour ce tutoriel, je trouve ça super et ça m'a bien aidé car ce petit "Libellés:..." ne me plaisait pas trop...
    Par contre, une petite question: je voulais déplacer mes libellés en dessous du titre de mon article et je suis donc passée par l'outil "mise en page" et j'ai déplacé mon titre, mais ça ne fonctionne pas... Est-ce que ça vient de mon code HTML tu crois?
    Merci beaucoup et à très bientôt :)

    RépondreSupprimer
    Réponses
    1. Bonjour Vinciane,
      C'est un problème courant que j'ai remarqué sur Blogger. Il arrive que l'outil mise en page ne marche plus pour modifier la disposition des élément dans les articles...
      Le seul moyen est de déplacer manuellement les libellés sous le titre du blog.
      J'ai prévu d'en faire un tutoriel ;)

      Supprimer
    2. D'accord merci beaucoup et il me tarde donc de voir le tutoriel ;)

      Supprimer
  15. Coucou !!
    Moi, j'ai un vrai problème avec mon template.
    Je galère toujours pour trouver les codes comme celui-ci : .post-labels {

    Dois je le placer manuellement ? Ou, y a t il une alternative ??

    Merci d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour Hamisoitil, comment as-tu procédé stp ?

      Supprimer
  16. Coucou !!
    J'ai tout reussi sauf que le background n'apparait pas pour les libellés.
    J'ai pourtant vérifié et tout à l'air correct. Que dois je faire ?? SVP ???

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il me semble que tu as réglé le problème ? Cela semble fonctionner de mon côté ;)

      Supprimer
  17. Bonsoir , très bon article comme tout le blog d'ailleurs haha alors bon je n'arrive même pas la première étape , "appuyer en même temps sur Ctrl et F" j'essaye mais cela "saute" la lettre comme la flèche vers la droite (je suis sur mac). Bonne soirée

    Marie

    RépondreSupprimer
    Réponses
    1. Bonjour Marie,
      En effet, sur Mac c'est Cmd et F et non Ctrl et F ;)

      Supprimer
  18. Super tes conseils merci ca aide beaucoup, par contre j'ai du mal a trouver les codes CSS.. genre lui ".post-labels a {
    } "
    introuvable :( .. est ce qu'il y aurait une astuce pour le repérer ??
    merci :D

    RépondreSupprimer
    Réponses
    1. Bonjour Papuche,
      C'est normal que tu ne le trouves pas il n'existe pas par défaut, il faut le rajouter avant la ligne :

      ]]></b:skin>

      Supprimer
  19. Bonjour, super article et j'aimerais beaucoup faire la même chose, mais depuis que j'ai touché le code HTLM pour changer de template je n'ai plus le même pied d'article. Sais-tu comment faire stp ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je pense que le problème vient de ton thème. Les codes sont différents avec ton thème.
      Il faudrait que tu charge la sauvegarde que tu as dû faire avant de réaliser les modifications. Ensuite je peux regarder ton code et te dire quels codes CSS utiliser ;)

      Supprimer
  20. Bonjour Catherine,
    Merci pour ce super tuto !
    Comment masquer les libellés du pied de l'article lorsque cela ne fonctionne plus depuis l'outil "Mise en page" de Blogger ? Je ne suis pas sûre du code à ajouter. Merci d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour Aurélie,
      Tu peux "cacher" les libellés en ajoutant le code CSS suivant :

      .post-labels {
      display: none; /* Cache les libellés */
      }

      Ajoute ce code avant la ligne suivante par exemple :

      ]]>

      Supprimer
  21. Salut !

    Ton tuto est super bien expliquer bien que j'ai eu quelques soucis de localisation au départ. De plus grace aux codes j'ai réussi à déplacé les libélés au bas du titre des article, cool non? Mais j'ai quand même un soucis, j'ai essayer comme tu l'a expliquer de suprimé "label" mais mon il n'est pas accepté. Mais se que je veux le plus c'est qu'on ne vois plus du tout "label" dans mon template.
    merci

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

      Supprimer
  22. Bonsoir,
    tout d'abord, merci pour tous ces tutos, ils me sont juste devenus indispensables pour perfectionner mon blog. :-)
    J'aurais juste une petite question, est-ce qu'il existe un code ou une modification à faire pour pouvoir supprimer la phrase "recommandé ce contenu sur Google" qui apparaît à côté du bouton G+1 ? En effet, j'aimerais bien l'enlever si possible de mon blog car je trouves que ce n'est pas très esthétique et qu'en plus ça fait doublon avec le bouton google+ à côté. Merci d'avance.

    RépondreSupprimer
    Réponses
    1. Bonjour Morgane,
      Les boutons de partage par défaut de Blogger ne sont pas modifiables, même cette phrase.
      Par contre tu peux les remplacer par des boutons de partage personnalisés. J'ai fait un tutoriel qui explique comment faire ici : http://ladybirdr.blogspot.com/2015/11/creer-des-boutons-de-partage-en-html-et.html

      Supprimer
  23. Bonjour et merci pour tous ces bons conseils, ce qui nous a permis de réaliser notre blog :)
    J'aimerais savoir comment mettre l'encart "google" en blanc et plus en gris, comme cela est le cas ? De plus j'aurai une autre question : comment puis-je centrer le texte et les photos à la même dimension dans mes articles ? Cela m'aiderait beaucoup :) Merci et bonne fin de journée :)

    RépondreSupprimer
    Réponses
    1. Bonjour Catherine,
      Je suppose que tu parles du fond gris du pied d'article, j'ai écris un tutoriel sur sa modification ici : http://ladybirdr.blogspot.com/2015/09/modifier-lapparence-globale-du-pied.html

      Pour mettre les photos à la même largeur que la zone de texte, tu peux suivre les instructions de ce tutoriel (1er point) : http://ladybirdr.blogspot.fr/2015/06/5-astuces-pour-un-joli-blog.html

      Et pour centrer le texte, il suffit, sur la page de création / modification des articles, de sélectionner ton texte et de cliquer sur l'outil d'alignement centré dans la barre d'outils (comme dans word par exemple).

      Supprimer
    2. Merci beaucoup pour ces indications :) J'ai bien changé les libellés ;) Toutefois, je ne parviens pas à centrer les textes et les images car mes images sont très larges. Merci pour votre aide,
      www.lostindiscovering.com

      Supprimer
    3. Bonjour Catherine,
      Veux-tu parler de l'alignement des images avec le texte ?
      Si oui, le problème vient de la taille de tes images qui ne correspond pas à la zone de texte des articles. La zone de texte fait 776 pixels de large et tes photos doivent faire au minimum cette largeur. Ensuite il faut ajouter un petit code CSS expliqué dans mon article (ci-dessous) pour éviter que les photos plus grandes ne dépassent de la zone d'article ;)
      Ce tutoriel (1er point) : http://ladybirdr.blogspot.fr/2015/06/5-astuces-pour-un-joli-blog.html

      Supprimer
  24. Coucou Catherine.

    Je voulais te remercier pour ses nombreux tuto qui m'ont enormement aidé, par contre j'ai un gros soucis, enfaite mes libellés de s'affiche pas, sur mes articles je l'ai vois pas du tout... J'ai essayé d'aller sur la mise en page, mais quand je clique sur modifier sa me dit '' Oups ! Il sagit d'une erreur '' je sais pas du quoi faire... Je te laisse mon blog pour que tu vois : http://jolisouvenir.blogspot.fr

    Merci d'avance, bonne soirée

    RépondreSupprimer
    Réponses
    1. J'ai vu que tu avais trouvé la solution ;)

      Supprimer
  25. Hello Catherine, merci pour tous tes articles, très bien expliqués et qui m'aide beaucoup, même si je galère assez souvent ^^.
    Aujourd'hui nouveau "problème", que ce soit les libellés, les boutons de partage ( que j'ai pu crée grâce à un de tes derniers tutos) ils restent bleu après modification, "couleur lien" et se soulignent. Comment je peux faire ?

    J'ai une dernière petite question : mon titre d'article change quand je clique dessus pour le voir en entier, en gros la police que j'ai mis est la bonne en page d'acceuil mais dès qu'on voit l'article en entier ce n'est plus la même.

    Merci d'avance, j'espère que tu pourras m'aider; bonne journée ! :)

    RépondreSupprimer
    Réponses
    1. Bonjour Mae,
      En regardant ton code CSS, je remarque qu'il n'y a plus aucun code CSS pour tes articles (dont pied d'article). Après les lignes :

      /* Posts
      ----------------------------------------------- */

      On devrait trouver tous les codes CSS pour les articles, mais il n'y a que les codes pour les commentaires :/

      Tu peux retrouver ces codes en regardant le thème d'un nouveau blog. Créé un nouveau blog test et copie les codes manquants entre :

      /* Posts
      ----------------------------------------------- */

      Et :

      /* Comments

      Colle les codes manquants avant tes codes pour tes commentaires.

      Ensuite, il y a une petite erreur dans ton code. Juste avant la ligne :

      /* Posts

      Ajoute un signe }. Le code qui précède cette ligne n'est pas fermée, et tout ce qui suit cette erreur peut être mal ou pas pris en compte.

      Supprimer
    2. Mais vraiment merci beaucoup pour toute ton aide et tes précieux conseils ;)

      Supprimer
  26. Bonjour Catherine, Excuse-moi si ce n'est pas tout à fait le lieu pour poser cette question ou si tu y as déjà répondu ailleurs: je cherche à modifier non par les libellés eux-même mais le texte "Affichage des articles dont le libellé est..." sans aucun succès pour le moment! c'est pour mon blog-galerie : http://hubert-robert.blogspot.fr/ Aurais-tu une idée?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je n'ai pas encore d'article sur la modification du texte de ce message. C'est sur ma liste de tutoriels à faire. Par contre tu peux changer son apparence avec ce tutoriel ;)

      Supprimer
  27. Bonjour, j'ai un problème au point 5 : modifier l'apparence des libellés. Je ne sais pas où chercher la ligne ]]> ?
    Merci de votre aide précieuse en tout cas !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Cherche cette ligne dans le code HTML de ton thème. Pour faire une recherche clique n'importe où dans la boîte de code de ton thème. Appuie sur Ctrl et F en même temps. Dans le champ de recherche qui apparaît en haut à droite de la boîte de code colle :

      ]]></b:skin>

      Attention à ne pas ajouter d'espace avant ou après le code.
      Appuie sur Entrer et tu seras redirigé vers cette ligne.
      Colle les codes CSS du tutoriel avant cette ligne ;)

      Supprimer
  28. Bonjour,
    J'ai testé votre tutoriel (au passage, votre blog est très complet) et au bout d'un moment, j'ai trouvé comment faire.
    Toutefois, un problème se pose : mes libellés ne sont pas centrés.
    Comment puis-je modifier cela ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tes libellés sont bien centrés, mais les autres éléments de ton pied d'article ne le sont pas.
      Cherche la ligne suivante dans ton code :

      ]]></b:skin>

      Juste avant cette ligne colle :

      .post-share-buttons.goog-inline-block {
      margin-left: 45px;
      }

      span.post-comment-link, span.post-icons {
      display: none;
      }

      Et voilà ;)

      Supprimer
  29. Bonjour Catherine.
    J'ai réussi à suivre ton tuto pour modifier l'apparence des libellé et faire des boutons de partages en html et css.
    Par contre, je remarque que les texte "commentaires:" et les libellés ne sont pas centrés comme le sont les boutons de partage.
    Peux-tu m'aider s'il te plaît?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      En regardant tes articles, les éléments de ton pied d'article sont bien centrés ;)

      Supprimer
  30. Bonjour Catherine,

    Je n'arrive pas à centrer mes libellés :(

    http://www.langagedefrancaise.fr

    Merci d'avance ♥

    Gladys

    RépondreSupprimer
    Réponses
    1. Bonjour Gladys,
      Je ne vois pas tes libellés :/

      Supprimer
  31. Bonjour, j'ai un petit soucis, j'aimerais centrer mes libellés (mais je n'y arrive pas du tout)

    http://cactusfleuricreation.blogspot.fr/

    En vous remerciant (:

    Ps: Vos explications sont vraiment très claires, vraiment faciles à suivre

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je ne vois pas tes libellés sur ton blog :/

      Supprimer
    2. Help Catherine !
      En voulant faire disparaître le mot libellé, ce sont tous mes libellés qui ont disparu ...

      Supprimer
    3. Bonjour Cristie,
      Tu as dû supprimer le code des libellés en plus du code pour le terme Libellés.
      Si tu as bien fait une sauvegarde avant d'effectuer ces modifications, charge-la et recommence en faisant bien attention à ne supprimer que la ligne :

      <data:postLabelsLabel/>

      Et non le code avant ou après.

      Sinon, retrouve cette ligne :

      <span class='post-labels'>

      Et vérifie qu'à partir de cette ligne tu as :

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

      Si tu n'as pas ceci, ajoute les codes qu'il manque.

      Supprimer
    4. Bonjour Catherine,

      J'ai vérifié plusieurs fois et j'ai bien tous ces codes juste sous :
      (je t'envoie le code par mail ...)
      Manque-t-il autre chose ?

      Supprimer
  32. Tuto réussi, merci beaucoup ! :)En plus, grâce aux repères que tu nous mets /* je pourrai modifier et retrouver mes codes quand je voudrai ! :D

    RépondreSupprimer

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